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/components/auth/SignIn.tsx
+++ b/components/auth/SignIn.tsx
@@ -0,0 +1,58 @@
+import { useAuthActions } from "@convex-dev/auth/react";
+import { useState } from "react";
+
+export function SignIn() {
+    const { signIn } = useAuthActions();
+    const [step, setStep] = useState<"signIn" | "signUp">("signIn");
+    const [email, setEmail] = useState("");
+    const [password, setPassword] = useState("");
+    const [error, setError] = useState<string | null>(null);
+
+    const handleSubmit = async (event: React.FormEvent) => {
+        event.preventDefault();
+        setError(null);
+        try {
+            const flow = step === "signIn" ? "signIn" : "signUp";
+            await signIn("password", { email, password, flow });
+        } catch (err) {
+            setError("Error signing in");
+            console.error(err);
+        }
+    };
+
+    return (
+        <div className="flex flex-col gap-4 p-4 border rounded-lg max-w-sm mx-auto mt-10 bg-white shadow-sm text-black">
+            <h2 className="text-xl font-bold text-center">{step === "signIn" ? "Sign In" : "Sign Up"}</h2>
+            {error && <div className="text-red-500 text-sm text-center">{error}</div>}
+            <form onSubmit={handleSubmit} className="flex flex-col gap-3">
+                <input
+                    type="email"
+                    placeholder="Email"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    className="border p-2 rounded outline-none focus:ring-2 focus:ring-blue-500"
+                    required
+                />
+                <input
+                    type="password"
+                    placeholder="Password"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    className="border p-2 rounded outline-none focus:ring-2 focus:ring-blue-500"
+                    required
+                    minLength={8}
+                />
+                <button type="submit" className="bg-blue-600 hover:bg-blue-700 text-white p-2 rounded font-medium transition-colors">
+                    {step === "signIn" ? "Sign In" : "Sign Up"}
+                </button>
+            </form>
+            <button
+                type="button"
+                onClick={() => setStep(step === "signIn" ? "signUp" : "signIn")}
+                className="text-sm text-gray-500 hover:text-gray-700 hover:underline text-center"
+            >
+                {step === "signIn" ? "Don't have an account? Sign up" : "Already have an account? Sign in"}
+            </button>
+        </div>
+    );
+}