added time handling for email login's confirmation codes

public/locales/de-DE/translation.json

@@ -40,6 +40,7 @@
                     "description": "Wir haben einen Code an deine E-Mail gesendet. Gib ihn hier ein, um dich anzumelden.",
                     "continueAction": "Anmelden",
                     "allowLoginFromDifferentDevices": "Anmelden von anderen Geräten erlauben",
+                    "expiringSoon": "Dein Code läuft in weniger als einer Minute ab.",
                     "form": {
                         "code": {
                             "label": "Verifizierungscode",

public/locales/en-US/translation.json

@@ -40,6 +40,7 @@
                     "description": "We sent you a code to your email. Enter it below to login",
                     "continueAction": "Log in",
                     "allowLoginFromDifferentDevices": "Allow login from different devices",
+                    "expiringSoon": "Your code will expire in less than a minute.",
                     "form": {
                         "code": {
                             "label": "Verification Code",

src/route-widgets/LoginRoute/ConfirmCodeForm/ConfirmCodeForm.tsx

@@ -1,18 +1,23 @@
 import * as yup from "yup"
 import {AxiosError} from "axios"
-import {ReactElement, useState} from "react"
+import {ReactElement, useCallback, useMemo, useState} from "react"
 import {useFormik} from "formik"
 import {FaHashtag} from "react-icons/fa"
 import {MdChevronRight, MdMail} from "react-icons/md"
 import {useLoaderData} from "react-router-dom"
 import {useTranslation} from "react-i18next"
+import {useEffectOnce} from "react-use"
+import differenceInSeconds from "date-fns/differenceInSeconds"
+import inMilliseconds from "in-milliseconds"
 
 import {useMutation} from "@tanstack/react-query"
 import {
+	Alert,
 	Box,
 	FormControlLabel,
 	Grid,
 	InputAdornment,
+	Snackbar,
 	Switch,
 	TextField,
 	Typography,
@@ -28,12 +33,14 @@ import {
 import {VerifyLoginWithEmailData, verifyLoginWithEmail} from "~/apis"
 import {MultiStepFormElement} from "~/components"
 import {parseFastAPIError} from "~/utils"
+import {isDev} from "~/constants/development"
 import changeAllowEmailLoginFromDifferentDevices from "~/apis/change-allow-email-login-from-different-devices"
 
 import ResendMailButton from "./ResendMailButton"
 
 export interface ConfirmCodeFormProps {
 	onConfirm: (user: ServerUser) => void
+	onCodeExpired: () => void
 	email: string
 	sameRequestToken: string
 }
@@ -45,11 +52,15 @@ interface Form {
 
 export default function ConfirmCodeForm({
 	onConfirm,
+	onCodeExpired,
 	email,
 	sameRequestToken,
 }: ConfirmCodeFormProps): ReactElement {
 	const settings = useLoaderData() as ServerSettings
+	const expirationTime = isDev ? 9 : settings.emailLoginExpirationInSeconds
 	const {t} = useTranslation()
+	const requestDate = useMemo(() => new Date(), [])
+	const [isExpiringSoon, setIsExpiringSoon] = useState<boolean>(false)
 
 	const schema = yup.object().shape({
 		code: yup
@@ -117,8 +128,28 @@ export default function ConfirmCodeForm({
 			},
 		},
 	)
+	const checkExpiration = useCallback(() => {
+		const diff = differenceInSeconds(new Date(), requestDate)
+
+		if (diff >= expirationTime) {
+			onCodeExpired()
+		} else if (diff >= expirationTime - 60) {
+			setIsExpiringSoon(true)
+		}
+	}, [requestDate])
+
+	useEffectOnce(() => {
+		const preCheck = setInterval(checkExpiration, inMilliseconds.seconds(isDev ? 1 : 20))
+		const finalCheck = setTimeout(checkExpiration, inMilliseconds.seconds(expirationTime))
+
+		return () => {
+			clearInterval(preCheck)
+			clearTimeout(finalCheck)
+		}
+	})
 
 	return (
+		<>
 			<MultiStepFormElement>
 				<form onSubmit={formik.handleSubmit}>
 					<Grid
@@ -171,7 +202,9 @@ export default function ConfirmCodeForm({
 										fullWidth
 										name="code"
 										id="code"
-									label={t("routes.LoginRoute.forms.confirmCode.form.code.label")}
+										label={t(
+											"routes.LoginRoute.forms.confirmCode.form.code.label",
+										)}
 										value={formik.values.code}
 										onChange={event => {
 											formik.setFieldValue(
@@ -194,7 +227,12 @@ export default function ConfirmCodeForm({
 							</Grid>
 						</Grid>
 						<Grid item>
-						<Grid width="100%" container display="flex" justifyContent="space-between">
+							<Grid
+								width="100%"
+								container
+								display="flex"
+								justifyContent="space-between"
+							>
 								<Grid item>
 									<ResendMailButton
 										email={email}
@@ -216,5 +254,11 @@ export default function ConfirmCodeForm({
 					</Grid>
 				</form>
 			</MultiStepFormElement>
+			<Snackbar open={isExpiringSoon}>
+				<Alert severity="warning" variant="filled">
+					{t("routes.LoginRoute.forms.confirmCode.expiringSoon")}
+				</Alert>
+			</Snackbar>
+		</>
 	)
 }

src/route-widgets/LoginRoute/EmailForm.tsx

@@ -14,6 +14,7 @@ import {MultiStepFormElement, SimpleForm} from "~/components"
 import {useExtensionHandler} from "~/hooks"
 
 export interface EmailFormProps {
+	email: string
 	onLogin: (email: string, sameRequestToken: string) => void
 }
 
@@ -22,7 +23,7 @@ interface Form {
 	detail: string
 }
 
-export default function EmailForm({onLogin}: EmailFormProps): ReactElement {
+export default function EmailForm({onLogin, email: preFilledEmail}: EmailFormProps): ReactElement {
 	const {t} = useTranslation()
 
 	const $password = useRef<HTMLInputElement | null>(null)
@@ -40,7 +41,7 @@ export default function EmailForm({onLogin}: EmailFormProps): ReactElement {
 	const formik = useFormik<Form>({
 		validationSchema: schema,
 		initialValues: {
-			email: "",
+			email: preFilledEmail,
 			detail: "",
 		},
 		onSubmit: async (values, {setErrors}) => {

src/routes/LoginRoute.tsx

@@ -14,6 +14,7 @@ export default function LoginRoute(): ReactElement {
 	const {token, email: queryEmail} = useQueryParams<{token: string; email: string}>()
 	const {login, user} = useContext(AuthContext)
 
+	const [step, setStep] = useState<number>(0)
 	const [email, setEmail] = useState<string>("")
 	const [sameRequestToken, setSameRequestToken] = useState<string>("")
 
@@ -38,19 +39,24 @@ export default function LoginRoute(): ReactElement {
 			steps={[
 				<EmailForm
 					key="email_form"
+					email={email}
 					onLogin={(email, sameRequestToken) => {
 						setEmail(email)
+						setStep(1)
 						setSameRequestToken(sameRequestToken)
 					}}
 				/>,
 				<ConfirmCodeForm
-					key="confirm_code_form"
+					key={`confirm_code_form:${email}:${step}`}
-					onConfirm={login}
 					email={email}
 					sameRequestToken={sameRequestToken}
+					onConfirm={login}
+					onCodeExpired={() => {
+						setStep(0)
+					}}
 				/>,
 			]}
-			index={email === "" ? 0 : 1}
+			index={step}
 		/>
 	)
 }

src/server-types.ts

@@ -77,6 +77,7 @@ export interface ServerSettings {
 	emailLoginTokenChars: string
 	emailLoginTokenLength: number
 	emailResendWaitTime: number
+	emailLoginExpirationInSeconds: number
 	customAliasSuffixLength: number
 }