add clerk

app/(auth)/layout.tsx

@@ -0,0 +1,11 @@
+export default function AuthLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <div className="w-screen flex items-center justify-center h-screen">
+      {children}
+    </div>
+  )
+}

app/(auth)/sign-in/[[...sign-in]]/page.tsx

@@ -0,0 +1,17 @@
+import { SignIn } from "@clerk/nextjs"
+import { dark } from "@clerk/themes"
+
+export default function Page() {
+  return (
+    <SignIn
+      appearance={{
+        baseTheme: dark,
+        elements: {
+          footerActionLink: {
+            color: "#fff",
+          },
+        },
+      }}
+    />
+  )
+}

app/(auth)/sign-up/[[...sign-up]]/page.tsx

@@ -0,0 +1,17 @@
+import { SignUp } from "@clerk/nextjs"
+import { dark } from "@clerk/themes"
+
+export default function Page() {
+  return (
+    <SignUp
+      appearance={{
+        baseTheme: dark,
+        elements: {
+          footerActionLink: {
+            color: "#A3A3A3",
+          },
+        },
+      }}
+    />
+  )
+}