From ae89aaba4d94a5e9a3d18f7883068b933286a4a1 Mon Sep 17 00:00:00 2001
From: suhasBR <suhas.bangalore16@gmail.com>
Date: Sun, 29 Dec 2024 00:20:26 +0530
Subject: [PATCH] feat(error-handling): add user-friendly error message for
 missing configuration

Added a try/catch mechanism to handle missing Auth0 tenant or environment configuration in the sample app. When configuration is not set up correctly, the app now displays a clear error message guiding users to the README or .env configuration steps. This improves the onboarding experience for beginners.
---
 app/page.tsx      | 40 +++++++++++++++++++++++++++++++++++++---
 package-lock.json |  2 +-
 2 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 6346d081f..f29a66d77 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -9,8 +9,42 @@ import { SignUpForm } from "./signup-form"
 import { WelcomeBackCard } from "./welcome-back-card"
 import { SubmitButton } from "@/components/submit-button"
 
+import {
+  Card,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+
 export default async function Home() {
-  const session = await appClient.getSession()
+  let session;
+  let error;
+
+  try {
+    const session = await appClient.getSession()
+  } catch (e) {
+    error = e instanceof Error ? e : new Error('An unexpected error occurred')
+  }
+
+
+  if (error) {
+    return (
+      <div className="min-h-screen flex justify-center items-center">
+        <Card className="w-[450px]">
+          <CardHeader>
+            <CardTitle className="text-center text-xl mb-4">Configuration Issue</CardTitle>
+            <CardDescription>Verify that all setup steps have been followed correctly as outlined in the <a className="text-ring underline"
+              href="https://github.com/auth0-developer-hub/auth0-b2b-saas-starter?tab=readme-ov-file#step-three-bootstrap-the-auth0-tenant">README documentation</a>.</CardDescription>
+          </CardHeader>
+          <CardFooter>
+
+          </CardFooter>
+        </Card>
+      </div>
+    )
+  }
+
 
   return (
     <div className="container relative sm:grid h-screen flex-col items-center justify-center md:grid lg:max-w-none lg:grid-cols-2 lg:px-0">
@@ -31,8 +65,8 @@ export default async function Home() {
           className="text-sm underline"
           href="/api/auth/login"
         >
-          <SubmitButton>Log in</SubmitButton>
-        </a>
+            <SubmitButton>Log in</SubmitButton>
+          </a>
         </div>
       )}
 
diff --git a/package-lock.json b/package-lock.json
index 211fc7c4a..3dd258326 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,7 +31,7 @@
         "date-fns": "^3.6.0",
         "execa": "^9.1.0",
         "lucide-react": "^0.379.0",
-        "next": "^14.2.5",
+        "next": "^14.2.3",
         "next-themes": "^0.3.0",
         "ora": "^8.0.1",
         "react": "^18.3.1",