clerk fully working

.env.example

@@ -11,6 +11,8 @@ PINECONE_INDEX_NAME=
 
 CLERK_SECRET_KEY=
 NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
+NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
+NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
 
 POSTGRES_URL=
 POSTGRES_URL_NON_POOLING=

app/layout.tsx

@@ -15,6 +15,7 @@ let url = 'https://www.pdftochat.com';
 let sitename = 'pdftochat.com';
 
 export const metadata: Metadata = {
+  metadataBase: new URL(url),
   title,
   description,
   icons: {

app/page.tsx

@@ -10,11 +10,11 @@ import { redirect } from 'next/navigation';
 
 export default async function Home() {
   const user: User | null = await currentUser();
-
   const isLoggedIn = !!user;
   if (isLoggedIn) {
     redirect('/dashboard');
   }
+
   return (
     <main className="sm:p-7">
       <Header />

app/sign-in/[[...sign-in]]/page.tsx

@@ -0,0 +1,21 @@
+import Header from '@/components/home/Header';
+import { SignIn } from '@clerk/nextjs';
+
+export default function Page() {
+  return (
+    <div className="mt-5">
+      <Header />
+      <div className="flex mx-auto justify-center items-center mt-10">
+        <SignIn
+          appearance={{
+            elements: {
+              formButtonPrimary:
+                'bg-black hover:bg-gray-700 transition text-sm normal-case',
+            },
+          }}
+          afterSignInUrl="/dashboard"
+        />
+      </div>
+    </div>
+  );
+}

app/sign-up/[[...sign-up]]/page.tsx

@@ -0,0 +1,21 @@
+import Header from '@/components/home/Header';
+import { SignUp } from '@clerk/nextjs';
+
+export default function Page() {
+  return (
+    <div className="mt-5">
+      <Header />
+      <div className="flex mx-auto justify-center items-center mt-10">
+        <SignUp
+          appearance={{
+            elements: {
+              formButtonPrimary:
+                'bg-black hover:bg-gray-700 transition text-sm normal-case',
+            },
+          }}
+          afterSignUpUrl="/dashboard"
+        />
+      </div>
+    </div>
+  );
+}

styles/globals.css

@@ -5,17 +5,15 @@
 @tailwind utilities;
 
 @layer utilities {
-  @variants responsive {
-    /* Hide scrollbar for Chrome, Safari and Opera */
-    .no-scrollbar::-webkit-scrollbar {
-      display: none;
-    }
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
 
-    /* Hide scrollbar for IE, Edge and Firefox */
-    .no-scrollbar {
-      -ms-overflow-style: none; /* IE and Edge */
-      scrollbar-width: none; /* Firefox */
-    }
+  /* Hide scrollbar for IE, Edge and Firefox */
+  .no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
   }
 }