feat: Implement Convex authentication including sign-in/sign-up UI, Convex client provider, and backend auth functions.

2026-02-02 16:23:28 +00:00
parent b060e7f008
commit a795e92ef3
15 changed files with 1335 additions and 5 deletions
--- a/app/ConvexClientProvider.tsx
+++ b/app/ConvexClientProvider.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+import { ConvexAuthNextjsProvider } from "@convex-dev/auth/nextjs";
+import { ConvexReactClient } from "convex/react";
+import { ReactNode } from "react";
+
+const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL!);
+
+export default function ConvexClientProvider({
+    children,
+}: {
+    children: ReactNode;
+}) {
+    return (
+        <ConvexAuthNextjsProvider client={convex}>
+            {children}
+        </ConvexAuthNextjsProvider>
+    );
+}
--- a/app/auth/page.tsx
+++ b/app/auth/page.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import { SignIn } from "@/components/auth/SignIn";
+import { Authenticated, Unauthenticated, useQuery } from "convex/react";
+import { api } from "@/convex/_generated/api";
+
+export default function AuthPage() {
+    return (
+        <div className="min-h-screen flex items-center justify-center bg-gray-50">
+            <Unauthenticated>
+                <SignIn />
+            </Unauthenticated>
+            <Authenticated>
+                <div className="text-center">
+                    <h1 className="text-2xl font-bold mb-4">You are logged in!</h1>
+                    <p>Redirecting...</p>
+                    {/* You could add a redirect here or a button to go to dashboard */}
+                </div>
+            </Authenticated>
+        </div>
+    );
+}
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,6 +1,8 @@
 import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
 import './globals.css'
+import ConvexClientProvider from './ConvexClientProvider'
+import { ConvexAuthNextjsServerProvider } from "@convex-dev/auth/nextjs/server";

 const inter = Inter({ subsets: ['latin'] })

@@ -15,10 +17,12 @@ export default function RootLayout({
  children: React.ReactNode
 }) {
  return (
-    <html lang="en">
-      <body className={inter.className}>
-        {children}
-      </body>
-    </html>
+    <ConvexAuthNextjsServerProvider>
+      <html lang="en">
+        <body className={inter.className}>
+          <ConvexClientProvider>{children}</ConvexClientProvider>
+        </body>
+      </html>
+    </ConvexAuthNextjsServerProvider>
  )
 }