feat: social auth account linking

components/auth/login-form.tsx

@@ -5,12 +5,16 @@
  * the AuthGate modal that pops up when an unauthenticated user tries to use
  * a protected feature.
  *
- * `onSuccess` is invoked once login completes. Callers decide what happens
- * next (a page redirect, a modal close, etc.). The form itself doesn't
- * navigate — that keeps it environment-agnostic.
+ * Two stages:
+ *   1. Password — email + password. If the BFF signals `otp_required`
+ *      (account unverified for >30 days), the form advances to stage 2.
+ *   2. OTP — 6-digit code emailed to the user. Submitting verifies the
+ *      code, marks the email verified, and completes the session.
  *
- * `forgotPasswordHref` is configurable so the modal can override (it may
- * want to dismiss itself or open a different mode).
+ * `onSuccess` fires after the session is finalised (either at stage 1 for
+ * verified accounts or stage 2 for the OTP-gated path). Callers decide
+ * what happens next (page redirect, modal close, etc.) — the form itself
+ * doesn't navigate.
  */
 
 import { useState } from "react";
@@ -34,18 +38,26 @@ export function LoginForm({
   /** Post-OAuth redirect path on the frontend. */
   oauthNext?: string;
 }) {
-  const { logIn } = useAuth();
+  const { logIn, verifyLoginOTP } = useAuth();
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
+  const [otp, setOTP] = useState("");
+  // Two-stage state machine. "password" is the default; we advance to
+  // "otp" only after the BFF signals otp_required.
+  const [stage, setStage] = useState<"password" | "otp">("password");
   const [error, setError] = useState<string | null>(null);
   const [submitting, setSubmitting] = useState(false);
 
-  async function onSubmit(e: React.SyntheticEvent) {
+  async function onPasswordSubmit(e: React.SyntheticEvent) {
     e.preventDefault();
     setError(null);
     setSubmitting(true);
     try {
-      await logIn(email, password);
+      const res = await logIn(email, password);
+      if (res.kind === "otp_required") {
+        setStage("otp");
+        return;
+      }
       onSuccess?.();
     } catch (err) {
       setError(err instanceof AuthError ? err.message : "Login failed.");
@@ -54,46 +66,115 @@ export function LoginForm({
     }
   }
 
+  async function onOTPSubmit(e: React.SyntheticEvent) {
+    e.preventDefault();
+    setError(null);
+    setSubmitting(true);
+    try {
+      await verifyLoginOTP(email, password, otp);
+      onSuccess?.();
+    } catch (err) {
+      setError(
+        err instanceof AuthError ? err.message : "Could not verify the code.",
+      );
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  if (stage === "otp") {
+    return (
+      <form onSubmit={onOTPSubmit} className="space-y-5">
+        <div className="space-y-1.5">
+          <Label htmlFor="login-otp">Enter the 6-digit code</Label>
+          <Input
+            id="login-otp"
+            type="text"
+            inputMode="numeric"
+            autoComplete="one-time-code"
+            pattern="[0-9]{6}"
+            maxLength={6}
+            required
+            value={otp}
+            onChange={(e) =>
+              setOTP(e.target.value.replace(/\D/g, "").slice(0, 6))
+            }
+            placeholder="123456"
+            className="tracking-[0.4em] text-center text-lg"
+          />
+          <p className="text-xs text-muted-foreground">
+            We sent a code to <span className="font-medium">{email}</span>.
+            Your account has been unverified for a while, so we need this
+            extra step. The code expires in 10 minutes.
+          </p>
+        </div>
+        {error ? <p className="text-sm text-destructive">{error}</p> : null}
+        <Button
+          type="submit"
+          disabled={submitting || otp.length !== 6}
+          className="w-full h-11 text-base"
+        >
+          {submitting ? "Verifying…" : "Verify and log in"}
+        </Button>
+        <button
+          type="button"
+          onClick={() => {
+            setStage("password");
+            setOTP("");
+            setError(null);
+          }}
+          className="block mx-auto text-xs text-muted-foreground hover:text-foreground"
+        >
+          ← Use a different email
+        </button>
+      </form>
+    );
+  }
+
   return (
     <div className="space-y-5">
       <OAuthButtons next={oauthNext} />
-      <form onSubmit={onSubmit} className="space-y-5">
-      <div className="space-y-1.5">
-        <Label htmlFor="login-email">Email</Label>
-        <Input
-          id="login-email"
-          type="email"
-          autoComplete="email"
-          required
-          value={email}
-          onChange={(e) => setEmail(e.target.value)}
-        />
-      </div>
-      <div className="space-y-1.5">
-        <div className="flex items-center justify-between">
-          <Label htmlFor="login-password">Password</Label>
-          {showForgotLink ? (
-            <Link
-              href={forgotPasswordHref}
-              className="text-xs text-muted-foreground hover:text-foreground"
-            >
-              Forgot?
-            </Link>
-          ) : null}
+      <form onSubmit={onPasswordSubmit} className="space-y-5">
+        <div className="space-y-1.5">
+          <Label htmlFor="login-email">Email</Label>
+          <Input
+            id="login-email"
+            type="email"
+            autoComplete="email"
+            required
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+          />
         </div>
-        <Input
-          id="login-password"
-          type="password"
-          autoComplete="current-password"
-          required
-          value={password}
-          onChange={(e) => setPassword(e.target.value)}
-        />
-      </div>
-      {error ? <p className="text-sm text-destructive">{error}</p> : null}
-      <Button type="submit" disabled={submitting} className="w-full h-11 text-base">
-        {submitting ? "Logging in…" : "Log in"}
-      </Button>
+        <div className="space-y-1.5">
+          <div className="flex items-center justify-between">
+            <Label htmlFor="login-password">Password</Label>
+            {showForgotLink ? (
+              <Link
+                href={forgotPasswordHref}
+                className="text-xs text-muted-foreground hover:text-foreground"
+              >
+                Forgot?
+              </Link>
+            ) : null}
+          </div>
+          <Input
+            id="login-password"
+            type="password"
+            autoComplete="current-password"
+            required
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+          />
+        </div>
+        {error ? <p className="text-sm text-destructive">{error}</p> : null}
+        <Button
+          type="submit"
+          disabled={submitting}
+          className="w-full h-11 text-base"
+        >
+          {submitting ? "Logging in…" : "Log in"}
+        </Button>
       </form>
     </div>
   );