feat: add auth

2026-05-30 02:34:22 +05:30
parent 3767a3a9b6
commit 6b6ce0813e
23 changed files with 2025 additions and 447 deletions
@@ -0,0 +1,77 @@
+"use client";
+
+import { useState } from "react";
+import { auth, AuthError } from "@/lib/auth";
+import { useAuth } from "./auth-provider";
+
+/**
+ * Persistent top ribbon shown when a logged-in user has not yet verified
+ * their email. Lets them re-trigger the verification mail without leaving
+ * the page.
+ *
+ * Renders nothing when:
+ *   - auth state is still loading
+ *   - user is logged out
+ *   - user.email_verified_at is set
+ *   - user dismissed it for this session (banner is meant to be persistent
+ *     across navigations but skippable per-tab; we keep the dismissed flag
+ *     in component state so a refresh brings it back)
+ */
+export function VerifyEmailBanner() {
+  const { user, loading } = useAuth();
+  const [sent, setSent] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [dismissed, setDismissed] = useState(false);
+
+  if (loading || !user || user.email_verified_at || dismissed) return null;
+
+  async function onResend() {
+    setError(null);
+    setBusy(true);
+    try {
+      await auth.resendVerification();
+      setSent(true);
+    } catch (err) {
+      setError(
+        err instanceof AuthError ? err.message : "Could not send verification email.",
+      );
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div className="w-full bg-amber-50 dark:bg-amber-950/40 text-amber-900 dark:text-amber-100 border-b border-amber-200/60 dark:border-amber-800/60">
+      <div className="max-w-5xl mx-auto px-4 py-2 flex flex-wrap items-center justify-between gap-3 text-sm">
+        <p>
+          {sent
+            ? "✓ Verification email sent — check your inbox."
+            : error
+              ? error
+              : `Verify your email (${user.email}) to secure your account.`}
+        </p>
+        <div className="flex items-center gap-2">
+          {!sent ? (
+            <button
+              type="button"
+              onClick={onResend}
+              disabled={busy}
+              className="font-medium underline-offset-2 hover:underline disabled:opacity-60"
+            >
+              {busy ? "Sending…" : "Resend email"}
+            </button>
+          ) : null}
+          <button
+            type="button"
+            onClick={() => setDismissed(true)}
+            aria-label="Dismiss"
+            className="opacity-70 hover:opacity-100"
+          >
+            ✕
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}