feat(auth): add configurable email verification enforcement

Auth:RequireEmailVerification (default off) gates whether local register requires confirming email before login. OAuth new-user paths are untouched -- Google/Microsoft already assert a verified email. Adds verify-email and resend-verification-email endpoints, mirroring the existing reset-password enumeration-avoidance and rate-limiting patterns, plus a login-embedded resend affordance and a verify-email landing page on the frontend. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-13 01:22:26 +02:00
parent 0ca2f2b261
commit 904f3a8ec8
9 changed files with 528 additions and 3 deletions
@@ -0,0 +1,75 @@
+import React, { useEffect, useState } from "react";
+
+import { Alert, Box, Button, CircularProgress, Paper, Typography } from "@mui/material";
+
+import { useNavigate } from "react-router-dom";
+
+import { api, getApiErrorMessage } from "../api";
+import { useI18n } from "../i18n/I18nProvider";
+
+type Status = "verifying" | "success" | "error";
+
+export default function VerifyEmailPage() {
+  const { t } = useI18n();
+  const navigate = useNavigate();
+
+  const [status, setStatus] = useState<Status>("verifying");
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const userId = params.get("userId") || "";
+    const token = params.get("token") || "";
+
+    if (!userId || !token) {
+      setStatus("error");
+      setErrorMessage(t("missingVerifyLinkInfo"));
+      return;
+    }
+
+    api
+      .post("/auth/verify-email", { userId, token })
+      .then(() => setStatus("success"))
+      .catch((e: any) => {
+        setStatus("error");
+        setErrorMessage(getApiErrorMessage(e, t("verifyEmailFailed")));
+      });
+  }, [t]);
+
+  return (
+    <Box
+      sx={{
+        minHeight: "100vh",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        p: 2,
+        background:
+          "radial-gradient(1200px 700px at 20% 0%, rgba(79,140,255,0.14), transparent 55%), radial-gradient(900px 600px at 80% 20%, rgba(245,158,11,0.10), transparent 55%)",
+      }}
+    >
+      <Paper sx={{ width: "min(520px, 100%)", p: 3 }}>
+        <Typography variant="h5" sx={{ fontWeight: 900, mb: 0.5 }}>
+          {t("verifyEmailTitle")}
+        </Typography>
+
+        <Box sx={{ display: "flex", flexDirection: "column", gap: 1.5, mt: 2 }}>
+          {status === "verifying" && (
+            <Box sx={{ display: "flex", alignItems: "center", gap: 1.5 }}>
+              <CircularProgress size={20} />
+              <Typography sx={{ color: "text.secondary" }}>{t("verifyEmailVerifying")}</Typography>
+            </Box>
+          )}
+          {status === "success" && <Alert severity="success">{t("verifyEmailSuccess")}</Alert>}
+          {status === "error" && <Alert severity="error">{errorMessage}</Alert>}
+
+          <Box sx={{ display: "flex", justifyContent: "flex-end", mt: 1 }}>
+            <Button variant="contained" onClick={() => navigate("/login")}>
+              {t("backToLogin")}
+            </Button>
+          </Box>
+        </Box>
+      </Paper>
+    </Box>
+  );
+}