Fix: Clerk authentication setup and configuration

tanmayjoddar · tanmayjoddar · commit 5ee7de92eaea · 2025-05-25T15:43:53.000+05:30
- Move ClerkProvider to root layout for proper app-wide authentication
- Create .env.local with Clerk environment variables template
- Fix sign-in page by removing duplicate ClerkProvider
- Add sign-up page with proper Clerk components
- Update package-lock.json with latest dependencies

This resolves the 'Missing publishableKey' error in both development and production environments.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
+import { ClerkProvider } from '@clerk/nextjs';
 import "./globals.css";
 
 const geistSans = Geist({
@@ -22,13 +23,15 @@ export default function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  return ( 
-    <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        {children}
-      </body>
-    </html>
+  return (
+    <ClerkProvider>
+      <html lang="en">
+        <body
+          className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        >
+          {children}
+        </body>
+      </html>
+    </ClerkProvider>
   );
 }
diff --git a/app/sign-in/page.tsx b/app/sign-in/page.tsx
@@ -1,21 +1,18 @@
 "use client";
-import { ClerkProvider, SignedIn, SignedOut, SignIn } from '@clerk/nextjs';
-import DashboardMain  from '../Dashboard/page';
-
-export default function User() {
+import { SignedIn, SignedOut, SignIn } from '@clerk/nextjs';
+import DashboardMain from '../Dashboard/page';
 
+export default function SignInPage() {
   return (
-<ClerkProvider>
+    <>
       <SignedOut>
         <div className="flex items-center justify-center min-h-screen">
           <SignIn routing="hash" />
         </div>
       </SignedOut>
       <SignedIn>
-      {/* <UserButton /> */}
-      <DashboardMain/>
-    </SignedIn>
-    </ClerkProvider>
-    
+        <DashboardMain />
+      </SignedIn>
+    </>
   );
 }
diff --git a/app/sign-up/page.tsx b/app/sign-up/page.tsx
@@ -0,0 +1,18 @@
+"use client";
+import { SignedIn, SignedOut, SignUp } from '@clerk/nextjs';
+import DashboardMain from '../Dashboard/page';
+
+export default function SignUpPage() {
+  return (
+    <>
+      <SignedOut>
+        <div className="flex items-center justify-center min-h-screen">
+          <SignUp routing="hash" />
+        </div>
+      </SignedOut>
+      <SignedIn>
+        <DashboardMain />
+      </SignedIn>
+    </>
+  );
+}
diff --git a/package-lock.json b/package-lock.json
