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>
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
|
||||
import { Box, Button, Checkbox, FormControlLabel, Paper, Tab, Tabs, TextField, Typography } from "@mui/material";
|
||||
import { Alert, Box, Button, Checkbox, FormControlLabel, Paper, Tab, Tabs, TextField, Typography } from "@mui/material";
|
||||
|
||||
import { useLocation, useNavigate } from "react-router-dom";
|
||||
|
||||
@@ -18,6 +18,7 @@ type AuthConfig = {
|
||||
microsoftEnabled: boolean;
|
||||
localEnabled: boolean;
|
||||
allowRegistration: boolean;
|
||||
requireEmailVerification: boolean;
|
||||
};
|
||||
|
||||
export default function LoginPage() {
|
||||
@@ -34,6 +35,9 @@ export default function LoginPage() {
|
||||
const [rememberMe, setRememberMe] = useState(() => getRememberMePref());
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [pendingToken, setPendingToken] = useState<string | null>(null);
|
||||
const [emailNotVerified, setEmailNotVerified] = useState(false);
|
||||
const [resendingVerification, setResendingVerification] = useState(false);
|
||||
const [verificationResent, setVerificationResent] = useState(false);
|
||||
|
||||
const nextPath = (location?.state?.from as string | undefined) ?? "/dashboard";
|
||||
|
||||
@@ -53,6 +57,8 @@ export default function LoginPage() {
|
||||
|
||||
async function submit(mode: "login" | "register") {
|
||||
setLoading(true);
|
||||
setEmailNotVerified(false);
|
||||
setVerificationResent(false);
|
||||
try {
|
||||
const url = mode === "register" ? "/auth/register" : "/auth/login";
|
||||
const res = await api.post<{ requiresTwoFactor?: boolean; pendingToken?: string }>(url, { email, password, rememberMe });
|
||||
@@ -61,13 +67,33 @@ export default function LoginPage() {
|
||||
return;
|
||||
}
|
||||
await completeLogin();
|
||||
if (mode === "register" && cfg?.requireEmailVerification) {
|
||||
toast(t("registerCheckEmailForVerification"), "info");
|
||||
}
|
||||
} catch (e: any) {
|
||||
toast(getApiErrorMessage(e, t("loginFailed")), "error");
|
||||
if (mode === "login" && e?.response?.data?.error === "email_not_verified") {
|
||||
setEmailNotVerified(true);
|
||||
} else {
|
||||
toast(getApiErrorMessage(e, t("loginFailed")), "error");
|
||||
}
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function resendVerification() {
|
||||
setResendingVerification(true);
|
||||
try {
|
||||
await api.post("/auth/resend-verification-email", { email });
|
||||
setVerificationResent(true);
|
||||
toast(t("verificationEmailResent"), "success");
|
||||
} catch (e: any) {
|
||||
toast(getApiErrorMessage(e, t("verifyEmailFailed")), "error");
|
||||
} finally {
|
||||
setResendingVerification(false);
|
||||
}
|
||||
}
|
||||
|
||||
const allowReg = cfg?.allowRegistration ?? false;
|
||||
|
||||
return (
|
||||
@@ -106,6 +132,18 @@ export default function LoginPage() {
|
||||
|
||||
{tab === 0 && (
|
||||
<Box component="form" onSubmit={(e) => { e.preventDefault(); void submit("login"); }} sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}>
|
||||
{cfg?.requireEmailVerification && emailNotVerified && (
|
||||
<Alert
|
||||
severity="warning"
|
||||
action={
|
||||
<Button color="inherit" size="small" disabled={resendingVerification || verificationResent} onClick={() => void resendVerification()}>
|
||||
{verificationResent ? t("verificationEmailResent") : t("resendVerificationEmail")}
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
{t("emailNotVerified")}
|
||||
</Alert>
|
||||
)}
|
||||
<TextField label={t("profileEmail")} value={email} onChange={(e) => setEmail(e.target.value)} autoComplete="email" fullWidth />
|
||||
<TextField label={t("profileCurrentPassword")} value={password} onChange={(e) => setPassword(e.target.value)} autoComplete={allowReg ? "new-password" : "current-password"} type="password" fullWidth />
|
||||
|
||||
|
||||
Reference in New Issue
Block a user