Fix updateName function

.env.example

@@ -1,3 +1,7 @@
+# Required Github OAuth environment variables for developing with a local Supabase instance
 SUPABASE_AUTH_EXTERNAL_GITHUB_REDIRECT_URI="http://127.0.0.1:54321/auth/v1/callback"
 SUPABASE_AUTH_EXTERNAL_GITHUB_CLIENT_ID=
 SUPABASE_AUTH_EXTERNAL_GITHUB_SECRET=
+
+# Optional OpenAI environment variable for generating SQL queries with Supabase AI
+OPENAI_API_KEY=

.gitignore

@@ -36,6 +36,7 @@ yarn-error.log*
 
 # editors
 .vscode
+*.code-workspace
 
 # certificates
 certificates

README.md

@@ -146,20 +146,19 @@ Running this command will create a new `.env.local` file in your project folder.
 
 It's highly recommended to use a local Supabase instance for development and testing. We have provided a set of custom commands for this in `package.json`.
 
-First, you will need to install [Docker](https://www.docker.com/get-started/). You should also copy or rename:
+First, you will need to install [Docker](https://www.docker.com/get-started/). You must also copy or rename the `.env.example` file to `.env` and populate it with the required environment variables, or setup of your local Supabase instance will fail.
 
-- `.env.local.example` -> `.env.local`
-- `.env.example` -> `.env`
+Follow the instructions [here](https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/creating-an-oauth-app) to create a Github OAuth app. When you create the app, set the homepage URL to 'http://localhost:3000/' and the authorization callback URL to 'http://localhost:54321/auth/v1/callback'. Github will provide you Client ID and secret for your OAuth app, which you should copy and paste into `.env`. Remember never to commit your `.env` file to version control!
 
-Next, run the following command to start a local Supabase instance and run the migrations to set up the database schema:
+Next, run the following command to start a local Supabase instance and to run the migrations to set up the database schema:
 
 ```bash
 pnpm supabase:start
 ```
 
 The terminal output will provide you with URLs to access the different services within the Supabase stack. The Supabase Studio is where you can make changes to your local database instance.
 
-Copy the value for the `service_role_key` and paste it as the value for the `SUPABASE_SERVICE_ROLE_KEY` in your `.env.local` file.
+If you haven't done so already, you'll need to copy or rename the `.env.local.example` file to `.env.local`. Then copy the value for the `service_role_key` and paste it as the value for the `SUPABASE_SERVICE_ROLE_KEY` in your `.env.local` file.
 
 You can print out these URLs at any time with the following command:
 

app/account/page.tsx

@@ -44,7 +44,7 @@ export default async function Account() {
       </div>
       <div className="p-4">
         <CustomerPortalForm subscription={subscription} />
-        <NameForm userName={userDetails?.full_name ?? ''} />
+        <NameForm userName={userDetails?.full_name ?? ''} userId={user?.id} />
         <EmailForm userEmail={user.email} />
       </div>
     </section>

components/ui/AccountForms/NameForm.tsx

@@ -7,7 +7,7 @@ import { handleRequest } from '@/utils/auth-helpers/client';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 
-export default function NameForm({ userName }: { userName: string }) {
+export default function NameForm({ userName, userId }: { userName: string, userId: string}) {
   const router = useRouter();
   const [isSubmitting, setIsSubmitting] = useState(false);
 
@@ -43,6 +43,11 @@ export default function NameForm({ userName }: { userName: string }) {
     >
       <div className="mt-8 mb-4 text-xl font-semibold">
         <form id="nameForm" onSubmit={(e) => handleSubmit(e)}>
+          <input
+            type="hidden"
+            name="userId"
+            value={userId}
+          />
           <input
             type="text"
             name="fullName"

components/ui/AuthForms/OauthSignIn.tsx

@@ -5,6 +5,8 @@ import { signInWithOAuth } from '@/utils/auth-helpers/client';
 import { type Provider } from '@supabase/supabase-js';
 import { Github } from 'lucide-react';
 import { useState } from 'react';
+import { getErrorRedirect } from '@/utils/helpers';
+import { useRouter } from 'next/navigation';
 
 type OAuthProviders = {
   name: Provider;
@@ -13,6 +15,7 @@ type OAuthProviders = {
 };
 
 export default function OauthSignIn() {
+  const router = useRouter();
   const oAuthProviders: OAuthProviders[] = [
     {
       name: 'github',
@@ -25,7 +28,14 @@ export default function OauthSignIn() {
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     setIsSubmitting(true); // Disable the button while the request is being handled
-    await signInWithOAuth(e);
+    try{
+      await signInWithOAuth(e);
+    } catch (error) {
+      return router.push(getErrorRedirect(
+        `/`,
+        "Sorry, we weren't able to log you in. Please try again."
+      ));
+    }
     setIsSubmitting(false);
   };
 

package.json

@@ -3,14 +3,15 @@
   "version": "0.0.0",
   "license": "MIT",
   "scripts": {
-    "dev": "next dev --turbo",
+    "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
     "prettier-fix": "prettier --write .",
     "stripe:login": "stripe login",
     "stripe:listen": "stripe listen --forward-to=localhost:3000/api/webhooks",
     "stripe:fixtures": "stripe fixtures fixtures/stripe-fixtures.json",
+    "supabase:init": "npx supabase init",
     "supabase:start": "npx supabase start",
     "supabase:stop": "npx supabase stop",
     "supabase:status": "npx supabase status",
@@ -25,36 +26,36 @@
   },
   "dependencies": {
     "@radix-ui/react-toast": "^1.1.5",
-    "@stripe/stripe-js": "2.4.0",
+    "@stripe/stripe-js": "3.0.7",
     "@supabase/ssr": "^0.1.0",
-    "@supabase/supabase-js": "^2.39.3",
+    "@supabase/supabase-js": "^2.39.7",
     "class-variance-authority": "^0.7.0",
     "classnames": "^2.5.1",
     "clsx": "^2.1.0",
-    "lucide-react": "0.330.0",
-    "next": "14.1.0",
+    "lucide-react": "0.352.0",
+    "next": "14.1.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-merge-refs": "^2.1.1",
-    "stripe": "^14.16.0",
+    "stripe": "^14.20.0",
     "tailwind-merge": "^2.2.1",
     "tailwindcss": "^3.4.1",
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
-    "@types/node": "^20.11.17",
-    "@types/react": "^18.2.55",
-    "@types/react-dom": "^18.2.19",
-    "autoprefixer": "^10.4.17",
-    "eslint": "^8.56.0",
-    "eslint-config-next": "14.1.0",
+    "@types/node": "^20.11.25",
+    "@types/react": "^18.2.64",
+    "@types/react-dom": "^18.2.21",
+    "autoprefixer": "^10.4.18",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "14.1.3",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-tailwindcss": "^3.14.2",
+    "eslint-plugin-react": "^7.34.0",
+    "eslint-plugin-tailwindcss": "^3.14.3",
     "postcss": "^8.4.35",
     "prettier": "^3.2.5",
-    "prettier-plugin-tailwindcss": "^0.5.11",
-    "supabase": "^1.142.2",
-    "typescript": "^5.3.3"
+    "prettier-plugin-tailwindcss": "^0.5.12",
+    "supabase": "^1.148.6",
+    "typescript": "^5.4.2"
   }
 }