From 1f2e9b6965caa5068bde708d5730fb8db68d2c91 Mon Sep 17 00:00:00 2001 From: matiasperrone-exo Date: Wed, 24 Jun 2026 18:25:08 +0000 Subject: [PATCH 01/22] feat: Add Login UI MFA Flow --- package.json | 4 +- resources/js/base_actions.js | 34 + resources/js/login/actions.js | 39 +- .../login/components/email_error_actions.js | 60 + .../js/login/components/email_input_form.js | 61 + .../components/existing_account_actions.js | 47 + resources/js/login/components/help_links.js | 78 + .../js/login/components/otp_help_links.js | 20 + .../js/login/components/otp_input_form.js | 117 ++ .../login/components/password_input_form.js | 193 ++ .../js/login/components/recovery_code_form.js | 84 + .../third_party_identity_providers.js | 36 + .../js/login/components/two_factor_form.js | 149 ++ resources/js/login/constants.js | 32 + resources/js/login/login.js | 1793 +++++++++-------- resources/js/login/login.module.scss | 29 + resources/js/shared/HTMLRender.jsx | 27 + resources/views/auth/login.blade.php | 17 + yarn.lock | 14 +- 19 files changed, 1966 insertions(+), 868 deletions(-) create mode 100644 resources/js/login/components/email_error_actions.js create mode 100644 resources/js/login/components/email_input_form.js create mode 100644 resources/js/login/components/existing_account_actions.js create mode 100644 resources/js/login/components/help_links.js create mode 100644 resources/js/login/components/otp_help_links.js create mode 100644 resources/js/login/components/otp_input_form.js create mode 100644 resources/js/login/components/password_input_form.js create mode 100644 resources/js/login/components/recovery_code_form.js create mode 100644 resources/js/login/components/third_party_identity_providers.js create mode 100644 resources/js/login/components/two_factor_form.js create mode 100644 resources/js/login/constants.js create mode 100644 resources/js/shared/HTMLRender.jsx diff --git a/package.json b/package.json index ccf4660e..729fca9c 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "clean": "find . -name \"node_modules\" -type d -prune -exec rm -rf '{}' + && yarn", "build-dev": "./node_modules/.bin/webpack --config webpack.dev.js", "build": "./node_modules/.bin/webpack --config webpack.prod.js", - "serve": "webpack-dev-server --open --port=8888 --https --config webpack.dev.js", + "serve": "webpack-dev-server --open --port=8888 --server-type https --config webpack.dev.js", "test": "jest --watch" }, "devDependencies": { @@ -81,6 +81,7 @@ "bootstrap-tagsinput": "^0.7.1", "chosen-js": "^1.8.7", "crypto-js": "^3.1.9-1", + "dompurify": "^3.4.11", "easymde": "^2.18.0", "font-awesome": "^4.7.0", "formik": "^2.2.9", @@ -95,6 +96,7 @@ "moment": "^2.29.4", "moment-timezone": "^0.5.21", "popper.js": "^1.14.3", + "prop-types": "^15.8.1", "pure": "^2.85.0", "pwstrength-bootstrap": "^3.0.10", "react-otp-input": "^3.1.1", diff --git a/resources/js/base_actions.js b/resources/js/base_actions.js index 18cd3b49..236d12aa 100644 --- a/resources/js/base_actions.js +++ b/resources/js/base_actions.js @@ -92,6 +92,40 @@ export const postRawRequest = (endpoint) => (params, headers = {}) => { }) } +// Like postRawRequest, but also surfaces the final URL the browser landed on after the +// XHR transparently followed any 3xx redirects (res.xhr.responseURL) and the HTTP status. +// Used by flows that complete via a server-side redirect (e.g. 2FA verify) so the SPA can +// navigate the top window to the post-login destination. +export const postRawRequestFull = (endpoint) => (params, headers = {}, queryParams = {}) => { + let url = URI(endpoint); + + if (!isObjectEmpty(queryParams)) + url = url.query(queryParams); + + let key = url.toString(); + + cancel(key); + + let req = http.post(url.toString()); + + schedule(key, req); + + return req.set(headers).send(params).timeout({ + response: 60000, + deadline: 60000, + }).then((res) => { + end(key); + return Promise.resolve({ + response: res.body, + status: res.status, + finalUrl: (res.xhr && res.xhr.responseURL) ? res.xhr.responseURL : null, + }); + }).catch((error) => { + end(key); + return Promise.reject(error); + }) +} + export const putRawRequest = (endpoint) => (payload = null, params={}, headers = {}) => { let url = URI(endpoint); diff --git a/resources/js/login/actions.js b/resources/js/login/actions.js index d0d20ad9..aaea626c 100644 --- a/resources/js/login/actions.js +++ b/resources/js/login/actions.js @@ -1,4 +1,4 @@ -import {postRawRequest} from '../base_actions' +import {postRawRequest, postRawRequestFull } from '../base_actions' export const verifyAccount = (email, token) => { @@ -27,3 +27,40 @@ export const resendVerificationEmail = (email, token) => { return postRawRequest(window.RESEND_VERIFICATION_EMAIL_ENDPOINT)(params, {'X-CSRF-TOKEN': token}); } + +// verify / recovery complete login via a server-side redirect, so use the *Full helper to +// recover the final URL for top-window navigation. +export const verify2FA = (otpValue, method, trustDevice, token) => { + const params = { + otp_value: otpValue, + method: method, + trust_device: trustDevice ? 1 : 0 + }; + + return postRawRequestFull(window.VERIFY_2FA_ENDPOINT)(params, {'X-CSRF-TOKEN': token}); +} + +export const resend2FA = (method, token) => { + const params = { + method: method + }; + + return postRawRequestFull(window.RESEND_2FA_ENDPOINT)(params, {'X-CSRF-TOKEN': token}); +} + +export const verifyRecoveryCode = (recoveryCode, token) => { + const params = { + recovery_code: recoveryCode + }; + + return postRawRequestFull(window.RECOVERY_2FA_ENDPOINT)(params, {'X-CSRF-TOKEN': token}); +} + +export const authenticateWithPassword = (formData, token) => { + const params = Object.fromEntries(formData.entries()); + return postRawRequestFull(window.FORM_ACTION_ENDPOINT)(params, {'X-CSRF-TOKEN': token}); +} + +export const cancelLogin = (token) => { + return postRawRequest(window.CANCEL_LOGIN_ENDPOINT)({}, {'X-CSRF-TOKEN': token}); +} diff --git a/resources/js/login/components/email_error_actions.js b/resources/js/login/components/email_error_actions.js new file mode 100644 index 00000000..4e67ce3b --- /dev/null +++ b/resources/js/login/components/email_error_actions.js @@ -0,0 +1,60 @@ +import React from "react"; +import Grid from "@material-ui/core/Grid"; +import Button from "@material-ui/core/Button"; +import styles from "../login.module.scss"; + +const EmailErrorActions = ({ + emitOtpAction, + createAccountAction, + onValidateEmail, + disableInput, +}) => { + return ( + + + + + + + + + + + + + + ); +}; + +export default EmailErrorActions; diff --git a/resources/js/login/components/email_input_form.js b/resources/js/login/components/email_input_form.js new file mode 100644 index 00000000..ab26ff47 --- /dev/null +++ b/resources/js/login/components/email_input_form.js @@ -0,0 +1,61 @@ +import React from "react"; +import Paper from "@material-ui/core/Paper"; +import TextField from "@material-ui/core/TextField"; +import Button from "@material-ui/core/Button"; +import styles from "../login.module.scss"; +import HTMLRender from "../../shared/HTMLRender"; + +const EmailInputForm = ({ + value, + onValidateEmail, + onHandleUserNameChange, + disableInput, + emailError, +}) => { + return ( + <> + + + {emailError == "" && ( + + )} + + {emailError != "" && ( + + {emailError} + + )} + + ); +}; + +export default EmailInputForm; diff --git a/resources/js/login/components/existing_account_actions.js b/resources/js/login/components/existing_account_actions.js new file mode 100644 index 00000000..649d31fd --- /dev/null +++ b/resources/js/login/components/existing_account_actions.js @@ -0,0 +1,47 @@ +import React from "react"; +import Grid from "@material-ui/core/Grid"; +import Button from "@material-ui/core/Button"; +import Link from "@material-ui/core/Link"; +import styles from "../login.module.scss"; + +const ExistingAccountActions = ({ + emitOtpAction, + forgotPasswordAction, + userName, + disableInput, +}) => { + let forgotPasswordActionHref = forgotPasswordAction; + + if (userName) { + forgotPasswordActionHref = `${forgotPasswordAction}?email=${encodeURIComponent(userName)}`; + } + + return ( + + + + + + e.preventDefault() : undefined} + href={forgotPasswordActionHref} + target="_self" + variant="body2" + > + Reset your password + + + + ); +}; + +export default ExistingAccountActions; diff --git a/resources/js/login/components/help_links.js b/resources/js/login/components/help_links.js new file mode 100644 index 00000000..c4668e00 --- /dev/null +++ b/resources/js/login/components/help_links.js @@ -0,0 +1,78 @@ +import React, { useMemo } from "react"; +import Link from "@material-ui/core/Link"; +import styles from "../login.module.scss"; + +const HelpLinks = ({ + userName, + showEmitOtpAction, + forgotPasswordAction, + showForgotPasswordAction, + showVerifyEmailAction, + verifyEmailAction, + showHelpAction, + helpAction, + appName, + emitOtpAction, +}) => { + const actions = useMemo(() => { + let forgotPasswordActionHref = forgotPasswordAction; + if (userName) { + const separator = forgotPasswordAction.includes("?") ? "&" : "?"; + forgotPasswordActionHref = `${forgotPasswordAction}${separator}email=${encodeURIComponent(userName)}`; + } + + return [ + { + show: showEmitOtpAction, + href: "#", + onClick: emitOtpAction, + label: "Get A Single-use Code emailed to you", + }, + { + show: showForgotPasswordAction, + href: forgotPasswordActionHref, + label: "Reset your password", + }, + { + show: showVerifyEmailAction, + href: verifyEmailAction, + label: `Verify ${appName}`, + }, + { + show: showHelpAction, + href: helpAction, + label: "Having trouble?", + }, + ].filter((action) => action.show); + }, [ + showEmitOtpAction, + showForgotPasswordAction, + showVerifyEmailAction, + showHelpAction, + userName, + forgotPasswordAction, + verifyEmailAction, + helpAction, + appName, + emitOtpAction, + ]); + + return ( + <> +
+ {actions.map((action, index) => ( + + {action.label} + + ))} + + ); +}; + +export default HelpLinks; diff --git a/resources/js/login/components/otp_help_links.js b/resources/js/login/components/otp_help_links.js new file mode 100644 index 00000000..2e51b26e --- /dev/null +++ b/resources/js/login/components/otp_help_links.js @@ -0,0 +1,20 @@ +import React from "react"; +import Link from "@material-ui/core/Link"; +import styles from "../login.module.scss"; + +const OTPHelpLinks = ({ emitOtpAction }) => { + return ( + <> +
+

Didn't receive it ?

+

+ Check your spam folder or{" "} + + resend email. + +

+ + ); +}; + +export default OTPHelpLinks; diff --git a/resources/js/login/components/otp_input_form.js b/resources/js/login/components/otp_input_form.js new file mode 100644 index 00000000..77bd83d2 --- /dev/null +++ b/resources/js/login/components/otp_input_form.js @@ -0,0 +1,117 @@ +import React, { useMemo } from "react"; +import { Turnstile } from "@marsidev/react-turnstile"; +import Button from "@material-ui/core/Button"; +import Link from "@material-ui/core/Link"; +import OtpInput from "react-otp-input"; +import styles from "../login.module.scss"; +import HTMLRender from "../../shared/HTMLRender"; + +const OTPInputForm = ({ + disableInput, + formAction, + onAuthenticate, + otpCode, + otpError, + otpLength, + onCodeChange, + userNameValue, + csrfToken, + shouldShowCaptcha, + captchaPublicKey, + onChangeCaptchaProvider, + onExpireCaptchaProvider, + onErrorCaptchaProvider, + onReset, + loginAttempts, +}) => { + const showCaptcha = shouldShowCaptcha(); + const handleSubmit = (ev) => { + if (!onAuthenticate(ev.target)) + { + ev.preventDefault(); + } + } + + return ( +
+
+ Enter the single-use code sent to your email: +
+
+ } + shouldAutoFocus={true} + hasErrored={!!otpError} + errorStyle={{ border: "1px solid #e5424d" }} + data-testid="otp_code" + /> +
+ {otpError && ( + + {otpError} + + )} +
+ +
+
+

+ + Sign in using a different e-mail + +

+
+
After you login you will be e-mailed a link to
+
set a password and complete your account.
+
+
+ + + + + + + {showCaptcha && captchaPublicKey && ( + + )} + + ); +}; + +export default OTPInputForm; diff --git a/resources/js/login/components/password_input_form.js b/resources/js/login/components/password_input_form.js new file mode 100644 index 00000000..d68b4258 --- /dev/null +++ b/resources/js/login/components/password_input_form.js @@ -0,0 +1,193 @@ +import React, { useRef } from "react"; +import { Turnstile } from "@marsidev/react-turnstile"; +import TextField from "@material-ui/core/TextField"; +import Button from "@material-ui/core/Button"; +import Grid from "@material-ui/core/Grid"; +import FormControlLabel from "@material-ui/core/FormControlLabel"; +import Checkbox from "@material-ui/core/Checkbox"; +import Visibility from "@material-ui/icons/Visibility"; +import VisibilityOff from "@material-ui/icons/VisibilityOff"; +import InputAdornment from "@material-ui/core/InputAdornment"; +import IconButton from "@material-ui/core/IconButton"; +import ExistingAccountActions from "./existing_account_actions"; +import styles from "../login.module.scss"; +import HTMLRender from "../../shared/HTMLRender"; + +const PasswordInputForm = ({ + formAction, + onAuthenticate, + disableInput, + showPassword, + passwordValue, + passwordError, + onUserPasswordChange, + handleClickShowPassword, + handleMouseDownPassword, + userNameValue, + csrfToken, + shouldShowCaptcha, + captchaPublicKey, + onChangeCaptchaProvider, + onExpireCaptchaProvider, + onErrorCaptchaProvider, + handleEmitOtpAction, + forgotPasswordAction, + loginAttempts, + maxLoginFailedAttempts, + userIsActive, + helpAction, +}) => { + const formRef = useRef(null); + const handleContinue = () => onAuthenticate(formRef.current); + const onEnterSubmit = (ev) => { + if (ev.key === "Enter") { + ev.preventDefault(); + handleContinue(); + } + } + + const ErrorMessage = () => { + const attempts = parseInt(loginAttempts, 10); + const maxAttempts = parseInt(maxLoginFailedAttempts, 10); + const attemptsLeft = maxAttempts - attempts; + + if (!passwordError) return null; + + if (attempts > 0 && attempts < maxAttempts && userIsActive) { + return ( +

+ Incorrect password. You have {attemptsLeft} more attempt + {attemptsLeft !== 1 ? "s" : ""} before your account is locked. +

+ ); + } + + if (attempts > 0 && attempts === maxAttempts && userIsActive) { + return ( +

+ Incorrect password. You have reached the maximum ({maxAttempts}) + login attempts. Your account will be locked after another failed + login. +

+ ); + } + + if (attempts > 0 && attempts === maxAttempts && !userIsActive) { + return ( +

+ Your account has been locked due to multiple failed login + attempts. Please contact support to + unlock it. +

+ ); + } + + return ( + + {passwordError} + + ); + }; + + return ( +
ev.preventDefault()} + target="_self" + > + + + {showPassword ? : } + + + ), + }} + /> + + + + + + + + } + label="Remember me" + /> + + + + + + + + {shouldShowCaptcha() && captchaPublicKey && ( + + )} + + + ); +}; + +export default PasswordInputForm; diff --git a/resources/js/login/components/recovery_code_form.js b/resources/js/login/components/recovery_code_form.js new file mode 100644 index 00000000..49ace5f6 --- /dev/null +++ b/resources/js/login/components/recovery_code_form.js @@ -0,0 +1,84 @@ +import React from 'react'; +import TextField from '@material-ui/core/TextField'; +import Button from '@material-ui/core/Button'; +import Link from '@material-ui/core/Link'; +import styles from '../login.module.scss'; +import HTMLRender from '../../shared/HTMLRender'; + +const RecoveryCodeForm = ({ + recoveryCode, + recoveryError, + onRecoveryCodeChange, + onVerify, + onBackToOtp, + onCancel, + disableInput + }) => { + + const handleSubmit = (ev) => { + ev.preventDefault(); + onVerify(); + }; + + const handleBack = (ev) => { + ev.preventDefault(); + onBackToOtp(); + }; + + const handleCancel = (ev) => { + ev.preventDefault(); + onCancel(); + }; + + return ( +
+
Enter a recovery code
+

+ Enter one of the recovery codes you saved when you enabled two-step verification. +

+ + {recoveryError && ( + + {recoveryError} + + )} +
+ +
+
+
+
+ + Back to verification code + + {" ยท "} + + Cancel + +
+
+ + ); +} + +export default RecoveryCodeForm; diff --git a/resources/js/login/components/third_party_identity_providers.js b/resources/js/login/components/third_party_identity_providers.js new file mode 100644 index 00000000..ee37915c --- /dev/null +++ b/resources/js/login/components/third_party_identity_providers.js @@ -0,0 +1,36 @@ +import React from 'react'; +import DividerWithText from '../../components/divider_with_text'; +import Button from '@material-ui/core/Button'; +import {handleThirdPartyProvidersVerbiage} from '../../utils'; +import styles from '../login.module.scss'; +import '../third_party_identity_providers.scss'; + +const ThirdPartyIdentityProviders = ({ thirdPartyProviders, formAction, disableInput, allowNativeAuth }) => { + return ( + <> + {allowNativeAuth && or} + { + thirdPartyProviders.map((provider) => { + const verbiage = `${handleThirdPartyProvidersVerbiage(provider.name)} with ${provider.label}`; + return ( + + ); + }) + } +

If you have a login, you may still choose to use a social login with the same email address to + access your account.

+ + ); +} + +export default ThirdPartyIdentityProviders; diff --git a/resources/js/login/components/two_factor_form.js b/resources/js/login/components/two_factor_form.js new file mode 100644 index 00000000..fe29f3f6 --- /dev/null +++ b/resources/js/login/components/two_factor_form.js @@ -0,0 +1,149 @@ +import React, {useState, useEffect} from 'react'; +import Button from '@material-ui/core/Button'; +import Link from '@material-ui/core/Link'; +import FormControlLabel from '@material-ui/core/FormControlLabel'; +import Checkbox from '@material-ui/core/Checkbox'; +import OtpInput from 'react-otp-input'; +import {formatTime} from '../../utils'; +import styles from '../login.module.scss'; +import HTMLRender from '../../shared/HTMLRender'; + +// Cooldown applied to the resend action to avoid hammering the resend endpoint +// (the backend also rate-limits server-side). +const RESEND_COOLDOWN_SECONDS = 30; + +const TwoFactorForm = ({ + otpCode, + otpError, + otpLength, + otpLifetime, + codeVersion, + onCodeChange, + onVerify, + trustDevice, + onTrustDeviceChange, + onResend, + onUseRecovery, + onCancel, + disableInput + }) => { + + const [secondsLeft, setSecondsLeft] = useState(otpLifetime || 0); + const [cooldown, setCooldown] = useState(0); + + // Reset the expiry countdown whenever a fresh code is issued (initial render or resend). + useEffect(() => { + setSecondsLeft(otpLifetime || 0); + }, [otpLifetime, codeVersion]); + + // Single 1s ticker drives both the code-expiry countdown and the resend cooldown. + useEffect(() => { + const timer = setInterval(() => { + setSecondsLeft(prev => (prev > 0 ? prev - 1 : 0)); + setCooldown(prev => (prev > 0 ? prev - 1 : 0)); + }, 1000); + return () => clearInterval(timer); + }, []); + + const expired = secondsLeft <= 0; + + const handleSubmit = (ev) => { + ev.preventDefault(); + onVerify(); + }; + + const handleResend = (ev) => { + ev.preventDefault(); + if (cooldown > 0 || disableInput) return; + setCooldown(RESEND_COOLDOWN_SECONDS); + const result = onResend(); + if (result && typeof result.then === 'function') { + result.then(() => setSecondsLeft(otpLifetime || 0)).catch(() => {}); + } + }; + + const handleRecovery = (ev) => { + ev.preventDefault(); + onUseRecovery(); + }; + + const handleCancel = (ev) => { + ev.preventDefault(); + onCancel(); + }; + + return ( +
+
Enter the single-use code sent to your email:
+
+ } + shouldAutoFocus={true} + hasErrored={!!otpError} + errorStyle={{border: '1px solid #e5424d'}} + data-testid="two_factor_code" + /> +
+ {otpError && + + {otpError} + + } +

+ {expired + ? 'Your verification code has expired. Please request a new one.' + : `Code expires in ${formatTime(secondsLeft)}.`} +

+
+ + } + label="Trust this device for 30 days" + /> +
+
+ +
+
+

+ Didn't receive it? Check your spam folder or{" "} + 0 || disableInput) ? styles.disabled_link : ''}> + {cooldown > 0 ? `resend code (${cooldown}s)` : 'resend code'} + . +

+ {/* "Use a different method" is intentionally hidden in Phase I (email_otp only). */} +
+
+ + Cancel + + + Use a recovery code instead + +
+
+
+ ); +} + +export default TwoFactorForm; diff --git a/resources/js/login/constants.js b/resources/js/login/constants.js new file mode 100644 index 00000000..7fd2cdf7 --- /dev/null +++ b/resources/js/login/constants.js @@ -0,0 +1,32 @@ +export const HTTP_CODES = { + OK: 200, + BAD_REQUEST: 400, + UNAUTHORIZED: 401, + FORBIDDEN: 403, + NOT_FOUND: 404, + PRECONDITION_FAILED: 412, + TOO_MANY_REQUESTS: 429, + INTERNAL_SERVER_ERROR: 500, +}; + +export const MFA_METHODS = { + EMAIL_OTP: "email_otp", + TOTP: "totp", +}; + +export const FLOW = { + PASSWORD: "password", + MFA: "2fa", + RECOVERY: "recovery", + OTP: "otp", +}; + +export const OTP_LENGTH_DEFAULT = 6; +export const OTP_TTL_DEFAULT = 300; +export const MFA_METHOD_DEFAULT = MFA_METHODS.EMAIL_OTP; +export const CAPTCHA_FIELD = 'cf-turnstile-response'; + +export const MFA_ERROR_CODE = { + MFA_SESSION_EXPIRED: "mfa_session_expired", + MFA_CHALLENGE_REQUIRED: "mfa_required", +}; diff --git a/resources/js/login/login.js b/resources/js/login/login.js index ee061b9a..789898a7 100644 --- a/resources/js/login/login.js +++ b/resources/js/login/login.js @@ -1,937 +1,1000 @@ -import React from 'react'; +import React from "react"; import { Turnstile } from "@marsidev/react-turnstile"; -import ReactDOM from 'react-dom'; -import Avatar from '@material-ui/core/Avatar'; -import Button from '@material-ui/core/Button'; -import CssBaseline from '@material-ui/core/CssBaseline'; -import TextField from '@material-ui/core/TextField'; -import Link from '@material-ui/core/Link'; -import Typography from '@material-ui/core/Typography'; -import Paper from '@material-ui/core/Paper'; -import Container from '@material-ui/core/Container'; -import Chip from '@material-ui/core/Chip'; -import FormControlLabel from '@material-ui/core/FormControlLabel'; -import Checkbox from '@material-ui/core/Checkbox'; -import {verifyAccount, emitOTP, resendVerificationEmail} from './actions'; -import {MuiThemeProvider, createTheme} from '@material-ui/core/styles'; -import DividerWithText from '../components/divider_with_text'; -import Visibility from '@material-ui/icons/Visibility'; -import VisibilityOff from '@material-ui/icons/VisibilityOff'; -import InputAdornment from '@material-ui/core/InputAdornment'; -import IconButton from '@material-ui/core/IconButton'; -import { emailValidator } from '../validator'; -import Grid from '@material-ui/core/Grid'; +import ReactDOM from "react-dom"; +import Avatar from "@material-ui/core/Avatar"; +import Button from "@material-ui/core/Button"; +import CssBaseline from "@material-ui/core/CssBaseline"; +import Typography from "@material-ui/core/Typography"; +import Container from "@material-ui/core/Container"; +import Chip from "@material-ui/core/Chip"; +import { MuiThemeProvider, createTheme } from "@material-ui/core/styles"; +import { + verifyAccount, + emitOTP, + resendVerificationEmail, + verify2FA, + resend2FA, + verifyRecoveryCode, + authenticateWithPassword, + cancelLogin, +} from "./actions"; +import { emailValidator } from "../validator"; import CustomSnackbar from "../components/custom_snackbar"; -import Banner from '../components/banner/banner'; -import OtpInput from 'react-otp-input'; -import {handleErrorResponse, handleThirdPartyProvidersVerbiage} from '../utils'; - -import styles from './login.module.scss' +import Banner from "../components/banner/banner"; +import { handleErrorResponse } from "../utils"; + +import EmailInputForm from "./components/email_input_form"; +import PasswordInputForm from "./components/password_input_form"; +import OTPInputForm from "./components/otp_input_form"; +import HelpLinks from "./components/help_links"; +import OTPHelpLinks from "./components/otp_help_links"; +import EmailErrorActions from "./components/email_error_actions"; +import ThirdPartyIdentityProviders from "./components/third_party_identity_providers"; +import TwoFactorForm from "./components/two_factor_form"; +import RecoveryCodeForm from "./components/recovery_code_form"; + +import styles from "./login.module.scss"; import "./third_party_identity_providers.scss"; +import { + FLOW, + HTTP_CODES, + MFA_ERROR_CODE, + OTP_LENGTH_DEFAULT, + OTP_TTL_DEFAULT, + MFA_METHOD_DEFAULT, +} from "./constants"; -const EmailInputForm = ({ value, onValidateEmail, onHandleUserNameChange, disableInput, emailError }) => { - - return ( - <> - - - {emailError == "" && - - } - - { emailError != "" && -

- } - - ); -} - -const PasswordInputForm = ({ - formAction, - onAuthenticate, - disableInput, - showPassword, - passwordValue, - passwordError, - onUserPasswordChange, - handleClickShowPassword, - handleMouseDownPassword, - userNameValue, - csrfToken, - shouldShowCaptcha, - captchaPublicKey, - onChangeCaptchaProvider, - onExpireCaptchaProvider, - onErrorCaptchaProvider, - handleEmitOtpAction, - forgotPasswordAction, - loginAttempts, - maxLoginFailedAttempts, - userIsActive, - helpAction - }) => { - return ( -
- - - {showPassword ? : } - - - ) - }} - /> - {(() => { - const attempts = parseInt(loginAttempts, 10); - const maxAttempts = parseInt(maxLoginFailedAttempts, 10); - const attemptsLeft = maxAttempts - attempts; - - if (!passwordError) return null; - - if (attempts > 0 && attempts < maxAttempts && userIsActive) { - return ( - <> -

- Incorrect password. You have {attemptsLeft} more attempt{attemptsLeft !== 1 ? 's' : ''} before your account is locked. -

- - ); - } - - if (attempts > 0 && attempts === maxAttempts && userIsActive) { - return ( - <> -

- Incorrect password. You have reached the maximum ({maxAttempts}) login attempts. Your account will be locked after another failed login. -

- - ); - } - - if (attempts > 0 && attempts === maxAttempts && !userIsActive) { - return ( - <> -

- Your account has been locked due to multiple failed login attempts. Please contact support to unlock it. -

- - ); - } - - return

; - })()} - - - - - - - } - label="Remember me" - /> - - - - - - - - {shouldShowCaptcha() && captchaPublicKey && - - } - - - ); -} - -const OTPInputForm = ({ - disableInput, - formAction, - onAuthenticate, - otpCode, - otpError, - otpLength, - onCodeChange, - userNameValue, - csrfToken, - shouldShowCaptcha, - captchaPublicKey, - onChangeCaptchaProvider, - onExpireCaptchaProvider, - onErrorCaptchaProvider, - onReset, - loginAttempts - }) => { - return ( - <> -
-
Enter the single-use code sent to your email:
-
- } - shouldAutoFocus={true} - hasErrored={!otpError} - errorStyle={{border: '1px solid #e5424d'}} - data-testid="otp_code" - /> -
- {otpError && -

- } -
- -
-
-

- - Sign in using a different e-mail - -

-
-
After you login you will be e-mailed a link to
-
set a password and complete your account.
-
-
- - - - - - - {shouldShowCaptcha() && captchaPublicKey && - - } - - - ); -} +class LoginPage extends React.Component { + constructor(props) { + super(props); + this.state = { + user_name: props.userName, + user_password: "", + otpCode: "", + user_pic: props.user_pic ?? null, + user_fullname: props.user_fullname ?? null, + user_verified: props.user_verified ?? false, + user_active: props.user_active ?? null, + email_verified: props.email_verified ?? null, + errors: { + email: "", + otp: props.authError ?? "", + password: props.authError ?? "", + twofactor: "", + recovery: "", + }, + notification: { + message: null, + severity: "info", + }, + captcha_value: "", + showPassword: false, + disableInput: false, + authFlow: props.flow, + allowNativeAuth: props.allowNativeAuth, + showInfoBanner: props.showInfoBanner, + infoBannerContent: props.infoBannerContent, + // Two-factor state (populated from the flash redirect when a challenge is required). + otpLength: props.otpLength ?? OTP_LENGTH_DEFAULT, + otpLifetime: props.otpLifetime ?? OTP_TTL_DEFAULT, + mfaMethod: props.mfaMethod ?? MFA_METHOD_DEFAULT, + trustDevice: false, + twoFactorCode: "", + recoveryCode: "", + codeVersion: 0, + }; -const HelpLinks = ({ - userName, - showEmitOtpAction, - forgotPasswordAction, - showForgotPasswordAction, - showVerifyEmailAction, - verifyEmailAction, - showHelpAction, - helpAction, - appName, - emitOtpAction - }) => { - if (userName) { - forgotPasswordAction = `${forgotPasswordAction}?email=${encodeURIComponent(userName)}`; + if (props.authError != "" && !this.state.user_fullname) { + this.state.user_fullname = props.userName; } - return ( - <> -
- { - showEmitOtpAction && - - Get A Single-use Code emailed to you - - } - { - showForgotPasswordAction && - - Reset your password - - } - { - showVerifyEmailAction && - - Verify {appName} - - } - {showHelpAction && - - Having trouble? - - } - - ); -} - -const OTPHelpLinks = ({ emitOtpAction }) => { - return ( - <> -
-

Didn't receive it ?

-

Check your spam folder or resend email. -

- - ); -} - -const EmailErrorActions = ({ emitOtpAction, createAccountAction, onValidateEmail, disableInput }) => { - return ( - - - - - - - - - - - - - - ); -} - -const ExistingAccountActions = ({emitOtpAction, forgotPasswordAction, userName, disableInput}) => { - if (userName) { - forgotPasswordAction = `${forgotPasswordAction}?email=${encodeURIComponent(userName)}`; + if ( + this.state.errors.password && + this.state.errors.password.includes("is not yet verified") + ) { + this.state.errors.password = + this.state.errors.password + + `Or have another verification email sent to you.`; } - return ( - - - - - - - Reset your password - - - + this.onHandleUserNameChange = this.onHandleUserNameChange.bind(this); + this.onValidateEmail = this.onValidateEmail.bind(this); + this.handleDelete = this.handleDelete.bind(this); + this.onAuthenticate = this.onAuthenticate.bind(this); + this.onChangeCaptchaProvider = this.onChangeCaptchaProvider.bind(this); + this.onExpireCaptchaProvider = this.onExpireCaptchaProvider.bind(this); + this.onErrorCaptchaProvider = this.onErrorCaptchaProvider.bind(this); + this.onUserPasswordChange = this.onUserPasswordChange.bind(this); + this.onOTPCodeChange = this.onOTPCodeChange.bind(this); + this.shouldShowCaptcha = this.shouldShowCaptcha.bind(this); + this.handleClickShowPassword = this.handleClickShowPassword.bind(this); + this.handleMouseDownPassword = this.handleMouseDownPassword.bind(this); + this.handleEmitOtpAction = this.handleEmitOtpAction.bind(this); + this.resendVerificationEmail = this.resendVerificationEmail.bind(this); + this.handleSnackbarClose = this.handleSnackbarClose.bind(this); + this.showAlert = this.showAlert.bind(this); + this.onTwoFactorCodeChange = this.onTwoFactorCodeChange.bind(this); + this.onRecoveryCodeChange = this.onRecoveryCodeChange.bind(this); + this.onTrustDeviceChange = this.onTrustDeviceChange.bind(this); + this.onVerify2FA = this.onVerify2FA.bind(this); + this.onResend2FA = this.onResend2FA.bind(this); + this.onVerifyRecovery = this.onVerifyRecovery.bind(this); + this.onUseRecovery = this.onUseRecovery.bind(this); + this.onBackToOtp = this.onBackToOtp.bind(this); + this.resetToPasswordFlow = this.resetToPasswordFlow.bind(this); + } + + showAlert(message, severity) { + this.setState({ + ...this.state, + notification: { + message: message, + severity: severity, + }, + }); + } + + emitOtpAction() { + let user_fullname = this.state.user_fullname + ? this.state.user_fullname + : this.state.user_name; + + emitOTP(this.state.user_name, this.props.token).then( + (payload) => { + let { response } = payload; + this.setState({ + ...this.state, + authFlow: FLOW.OTP, + errors: { + email: "", + otp: "", + password: "", + }, + user_verified: true, + user_fullname: user_fullname, + }); + }, + (error) => { + let { response, status, message } = error; + if (status == 412) { + const { message, errors } = response.body; + this.showAlert(errors[0], "error"); + return; + } + this.showAlert("Oops... Something went wrong!", "error"); + }, ); -} + return false; + } -const ThirdPartyIdentityProviders = ({ thirdPartyProviders, formAction, disableInput, allowNativeAuth }) => { + handleEmitOtpAction(ev) { + ev.preventDefault(); + return this.emitOtpAction(); + } + + shouldShowCaptcha() { return ( - <> - {allowNativeAuth && or} - { - thirdPartyProviders.map((provider) => { - const verbiage = `${handleThirdPartyProvidersVerbiage(provider.name)} with ${provider.label}`; - return ( - - ); - }) - } -

If you have a login, you may still choose to use a social login with the same email address to - access your account.

- + typeof this.props.maxLoginAttempts2ShowCaptcha !== "undefined" && + typeof this.props.loginAttempts !== "undefined" && + this.props.loginAttempts >= this.props.maxLoginAttempts2ShowCaptcha ); -} + } -const otp_flow = 'otp'; -const password_flow = 'password'; - -class LoginPage extends React.Component { + handleAuthenticateValidation() { - constructor(props) { - super(props); - this.state = { - user_name: props.userName, - user_password: '', - otpCode: '', - user_pic: props.hasOwnProperty('user_pic') ? props.user_pic : null, - user_fullname: props.hasOwnProperty('user_fullname') ? props.user_fullname : null, - user_verified: props.hasOwnProperty('user_verified') ? props.user_verified : false, - user_active: props.hasOwnProperty('user_active') ? props.user_active : null, - email_verified: props.hasOwnProperty('email_verified') ? props.email_verified : null, - errors: { - email: '', - otp: props.authError != '' ? props.authError : '', - password: props.authError != '' ? props.authError : '', - }, - notification: { - message: null, - severity: 'info' - }, - captcha_value: '', - showPassword: false, + switch (this.state.authFlow) { + case FLOW.OTP: + if (this.state.otpCode == "") { + this.setState({ + ...this.state, disableInput: false, - authFlow: props.flow, - allowNativeAuth: props.allowNativeAuth, - showInfoBanner: props.showInfoBanner, - infoBannerContent: props.infoBannerContent, - } - - if (props.authError != '' && !this.state.user_fullname) { - this.state.user_fullname = props.userName; + errors: { ...this.state.errors, otp: "Single-use code is empty" }, + }); + return false; } - - if (this.state.errors.password && this.state.errors.password.includes("is not yet verified")) { - this.state.errors.password = this.state.errors.password + `Or have another verification email sent to you.`; + break; + default: + if (this.state.user_password == "") { + this.setState({ + ...this.state, + disableInput: false, + errors: { ...this.state.errors, password: "Password is empty" }, + }); + return false; } - this.onHandleUserNameChange = this.onHandleUserNameChange.bind(this); - this.onValidateEmail = this.onValidateEmail.bind(this); - this.handleDelete = this.handleDelete.bind(this); - this.onAuthenticate = this.onAuthenticate.bind(this); - this.onChangeCaptchaProvider = this.onChangeCaptchaProvider.bind(this); - this.onExpireCaptchaProvider = this.onExpireCaptchaProvider.bind(this); - this.onErrorCaptchaProvider = this.onErrorCaptchaProvider.bind(this); - this.onUserPasswordChange = this.onUserPasswordChange.bind(this); - this.onOTPCodeChange = this.onOTPCodeChange.bind(this); - this.shouldShowCaptcha = this.shouldShowCaptcha.bind(this); - this.handleClickShowPassword = this.handleClickShowPassword.bind(this); - this.handleMouseDownPassword = this.handleMouseDownPassword.bind(this); - this.handleEmitOtpAction = this.handleEmitOtpAction.bind(this); - this.resendVerificationEmail = this.resendVerificationEmail.bind(this); - this.handleSnackbarClose = this.handleSnackbarClose.bind(this); - this.showAlert = this.showAlert.bind(this); - } - - showAlert(message, severity) { - this.setState({ + if (this.state.captcha_value == "" && this.shouldShowCaptcha()) { + this.setState({ ...this.state, - notification: { - message: message, - severity: severity - } - }); + disableInput: false, + errors: { ...this.state.errors, password: "you must check CAPTCHA" }, + }); + return false; + } } - emitOtpAction() { - let user_fullname = this.state.user_fullname ? this.state.user_fullname : this.state.user_name; - - emitOTP(this.state.user_name, this.props.token).then((payload) => { - let {response} = payload; - this.setState({ - ...this.state, - authFlow: otp_flow, - errors: { - email: '', - otp: '', - password: '' - }, - user_verified: true, - user_fullname: user_fullname, - }); - }, (error) => { - let {response, status, message} = error; - if(status == 412){ - const {message, errors} = response.body; - this.showAlert(errors[0], 'error'); - return; - } - this.showAlert('Oops... Something went wrong!', 'error'); - }); - return false; + return true; + } + + handleAuthenticatePasswordOk(payload) { + const { response, status, finalUrl } = payload || {}; + const { error_code, otp_length, otp_lifetime } = response || {}; + + switch (error_code) { + case MFA_ERROR_CODE.MFA_CHALLENGE_REQUIRED: + this.setState((prevState) => ({ + ...prevState, + authFlow: FLOW.MFA, + disableInput: false, + otpLength: otp_length ?? prevState.otpLength, + otpLifetime: otp_lifetime ?? prevState.otpLifetime, + })); + break; + default: + { + const redirect = finalUrl && status === HTTP_CODES.OK; + if (redirect) { + window.location.href = finalUrl; + } else { + this.showAlert("Oops... Something went wrong!", "error"); + this.setState((prevState) => ({ + ...prevState, + disableInput: false, + })); + } + } } - - handleEmitOtpAction(ev) { - ev.preventDefault(); - return this.emitOtpAction(); + } + + handleAuthenticatePasswordError(error) { + let { response, status, message } = error; + this.setState((prevState) => ({ ...prevState, disableInput: false })); + if (status === HTTP_CODES.UNAUTHORIZED) { + this.showAlert("Invalid username or password.", "error"); + } else { + this.showAlert("Oops... Something went wrong!", "error"); } + } - shouldShowCaptcha() { - return ( - this.props.hasOwnProperty('maxLoginAttempts2ShowCaptcha') && - this.props.hasOwnProperty('loginAttempts') && - this.props.loginAttempts >= this.props.maxLoginAttempts2ShowCaptcha - ) - } + handleAuthenticatePasswordFlow(form) { + const formData = new FormData(form); - onAuthenticate(ev) { - if (this.state.authFlow === otp_flow) { - if (this.state.otpCode == '') { - this.setState({...this.state, disableInput: false, errors: {...this.state.errors, otp: 'Single-use code is empty'}}); - ev.preventDefault(); - return false; - } - } else if (this.state.user_password == '') { - this.setState({...this.state, disableInput: false, errors: {...this.state.errors, password: 'Password is empty'}}); - ev.preventDefault(); - return false; - } + authenticateWithPassword(formData, this.props.token) + .then( + (payload) => { + this.handleAuthenticatePasswordOk(payload); + }, + (error) => this.handleAuthenticatePasswordError(error) + ); + } - if (this.state.captcha_value == '' && this.shouldShowCaptcha()) { - this.setState({...this.state, disableInput: false, errors: {...this.state.errors, password: 'you must check CAPTCHA'}}); - ev.preventDefault(); - return false; - } - this.setState({ ...this.state, disableInput: true }); - return true; + onAuthenticate(form) { + + if (!this.handleAuthenticateValidation()) { + return false; } - onChangeCaptchaProvider(value) { - this.setState({ ...this.state, captcha_value: value }); + this.setState({ ...this.state, disableInput: true }); + + + if (this.state.authFlow === FLOW.PASSWORD) { + this.handleAuthenticatePasswordFlow(form); + return false; } - onExpireCaptchaProvider() { - this.setState({ ...this.state, captcha_value: '' }); + return true; + } + + onChangeCaptchaProvider(value) { + this.setState({ ...this.state, captcha_value: value }); + } + + onExpireCaptchaProvider() { + this.setState({ ...this.state, captcha_value: "" }); + } + + onErrorCaptchaProvider() { + this.setState({ ...this.state, captcha_value: "" }); + } + + onHandleUserNameChange(ev) { + let { value, id } = ev.target; + this.setState({ ...this.state, user_name: value }); + } + + onUserPasswordChange(ev) { + let { errors } = this.state; + let { value, id } = ev.target; + if (value == "") + // clean error + errors[id] = ""; + this.setState({ + ...this.state, + user_password: value, + errors: { ...errors }, + }); + } + + onOTPCodeChange(value) { + this.setState({ ...this.state, otpCode: value }); + } + + onTwoFactorCodeChange(value) { + this.setState({ + ...this.state, + twoFactorCode: value, + errors: { ...this.state.errors, twofactor: "" }, + }); + } + + onRecoveryCodeChange(ev) { + let { value } = ev.target; + this.setState({ + ...this.state, + recoveryCode: value, + errors: { ...this.state.errors, recovery: "" }, + }); + } + + onTrustDeviceChange(ev) { + this.setState({ ...this.state, trustDevice: ev.target.checked }); + } + + /** + * Resets client-side MFA state and returns the user to the password screen. + */ + resetToPasswordFlow() { + this.setState({ + ...this.state, + authFlow: FLOW.PASSWORD, + disableInput: false, + twoFactorCode: "", + user_name: "", + user_password: "", + user_pic: "", + user_fullname: "", + user_verified: false, + recoveryCode: "", + trustDevice: false, + errors: { + ...this.state.errors, + twofactor: "", + recovery: "", + email: "", + otp: "", + password: "", + }, + }); + cancelLogin(this.props.token); + } + + /** + * Shared error handling for the 2FA verify / recovery AJAX calls. + * @param {*} error superagent error + * @param {string} field 'twofactor' | 'recovery' + */ + handleMfaError(error, field) { + const status = error ? error.status : undefined; + const body = error && error.response ? error.response.body : null; + const code = body ? body.error_code : null; + + if ( + status === HTTP_CODES.UNAUTHORIZED && + code === MFA_ERROR_CODE.MFA_SESSION_EXPIRED + ) { + this.resetToPasswordFlow(); + this.showAlert( + "Your verification session has expired. Please sign in again.", + "warning", + ); + return; } - onErrorCaptchaProvider() { - this.setState({ ...this.state, captcha_value: '' }); + if (status === HTTP_CODES.TOO_MANY_REQUESTS) { + const msg = + body && body.error_message + ? body.error_message + : "Too many attempts. Please try again later."; + this.setState({ + ...this.state, + disableInput: false, + errors: { ...this.state.errors, [field]: msg }, + }); + return; } - onHandleUserNameChange(ev) { - let { value, id } = ev.target; - this.setState({ ...this.state, user_name: value }); + if (status === HTTP_CODES.UNAUTHORIZED) { + const msg = + field === "recovery" + ? "Invalid recovery code. Please try again." + : "Invalid or expired verification code. Please try again."; + this.setState({ + ...this.state, + disableInput: false, + errors: { ...this.state.errors, [field]: msg }, + }); + return; } - onUserPasswordChange(ev) { - let {errors} = this.state; - let {value, id} = ev.target; - if (value == "") // clean error - errors[id] = ''; - this.setState({...this.state, user_password: value, errors: {...errors}}); + if (status === HTTP_CODES.PRECONDITION_FAILED) { + this.setState({ + ...this.state, + disableInput: false, + errors: { ...this.state.errors, [field]: "Please enter a valid code." }, + }); + return; } - onOTPCodeChange(value) { - this.setState({...this.state, otpCode: value}); + /** + * No HTTP status: the XHR likely followed a (possibly cross-origin) success redirect + * it could not read. The IDP session may already be established, so reload and let + * the server route us to the right place; a genuine network error just re-shows login. + */ + if (typeof status === "undefined" || status === 0) { + window.location.reload(); + return; } - onValidateEmail(ev) { + this.setState({ ...this.state, disableInput: false }); + this.showAlert("Oops... Something went wrong!", "error"); + } + + onVerify2FA() { + if (this.state.disableInput) return; + const { twoFactorCode, trustDevice, mfaMethod } = this.state; + if (twoFactorCode === "") { + this.setState({ + ...this.state, + errors: { + ...this.state.errors, + twofactor: "Verification code is empty", + }, + }); + return; + } + this.setState({ + ...this.state, + disableInput: true, + errors: { ...this.state.errors, twofactor: "" }, + }); + + verify2FA(twoFactorCode, mfaMethod, trustDevice, this.props.token).then( + (payload) => { + // Success: the backend redirected (302) and the XHR followed it; navigate the top + // window to the final destination to resume the normal redirect / OIDC flow. + window.location.href = payload.finalUrl || window.location.href; + }, + (error) => { + this.handleMfaError(error, "twofactor"); + }, + ); + } - ev.preventDefault(); - let {user_name} = this.state; - user_name = user_name?.trim(); + onResend2FA() { + const promise = resend2FA(this.state.mfaMethod, this.props.token); - if (user_name == '') { - return false; + promise.then( + (payload) => { + const { response } = payload; + this.setState({ + ...this.state, + otpLength: + response && response.otp_length + ? response.otp_length + : this.state.otpLength, + otpLifetime: + response && response.otp_lifetime + ? response.otp_lifetime + : this.state.otpLifetime, + codeVersion: this.state.codeVersion + 1, + errors: { ...this.state.errors, twofactor: "" }, + }); + this.showAlert( + "A new verification code has been sent to your email.", + "success", + ); + }, + (error) => { + const status = error ? error.status : undefined; + const body = error && error.response ? error.response.body : null; + const code = body ? body.error_code : null; + + if ( + status === HTTP_CODES.UNAUTHORIZED && + code === MFA_ERROR_CODE.MFA_SESSION_EXPIRED + ) { + this.resetToPasswordFlow(); + this.showAlert( + "Your verification session has expired. Please sign in again.", + "warning", + ); + return; } - if (!emailValidator(user_name)) { - return false; + if (status === HTTP_CODES.TOO_MANY_REQUESTS) { + const msg = + body && body.error_message + ? body.error_message + : "Too many attempts. Please try again later."; + this.showAlert(msg, "warning"); + return; } - this.setState({ ...this.state, disableInput: true }); - - verifyAccount(user_name, this.props.token).then((payload) => { - let { response } = payload; - - let error = ''; - if (response.is_active === false) { - error = `Your user account is currently locked. Please contact support for further assistance.`; - } else if (response.is_active === true && response.is_verified === false) { - error = 'Your email has not been verified. Please check your inbox or resend the verification email.'; - } - - this.setState({ - ...this.state, - user_pic: response.pic, - user_fullname: response.full_name, - user_verified: true, - user_active: response.is_active, - email_verified: response.is_verified, - authFlow: response.has_password_set ? password_flow : otp_flow, - errors: { - email: error, - otp: '', - password: '' - }, - disableInput: false - }, function () { - //Once the state is updated, it's now possible to trigger emitOtpAction. - //No need to wait for the component to update. - if (!response.has_password_set && response.is_verified !== false) { - this.emitOtpAction(); - } - }); - }, (error) => { - - let { response, status, message } = error; - - let newErrors = {}; - - newErrors['password'] = ''; - newErrors['email'] = " "; - - if (status == 429) { - newErrors['email'] = "Too many requests. Try it later."; - } + this.showAlert( + "Oops... Something went wrong while resending the code.", + "error", + ); + }, + ); - this.setState({ - ...this.state, - user_pic: null, - user_fullname: null, - user_verified: false, - errors: newErrors, - disableInput: false - }); - }); - return true; + // Returned so the form can reset its expiry countdown once the resend resolves. + return promise; + } + + onVerifyRecovery() { + if (this.state.disableInput) return; + const { recoveryCode } = this.state; + if (recoveryCode === "") { + this.setState({ + ...this.state, + errors: { ...this.state.errors, recovery: "Recovery code is empty" }, + }); + return; } - - resendVerificationEmail(ev) { - ev.preventDefault(); - let {user_name} = this.state; - user_name = user_name?.trim(); - - if (!user_name) { - this.showAlert( - 'Something went wrong while trying to resend the verification email. Please try again later.', - 'error'); - return; - } - - resendVerificationEmail(user_name, this.props.token).then((payload) => { - this.showAlert( - 'We\'ve sent you a verification email. Please check your inbox and click the link to verify your account.', - 'success'); - }, (error) => { - handleErrorResponse(error, (title, messageLines, type) => { - const message = (messageLines ?? []).join(', ') - this.showAlert(`${title}: ${message}`, type); - }); - }); + this.setState({ + ...this.state, + disableInput: true, + errors: { ...this.state.errors, recovery: "" }, + }); + + verifyRecoveryCode(recoveryCode, this.props.token).then( + (payload) => { + window.location.href = payload.finalUrl || window.location.href; + }, + (error) => { + this.handleMfaError(error, "recovery"); + }, + ); + } + + onUseRecovery() { + this.setState({ + ...this.state, + authFlow: FLOW.RECOVERY, + errors: { ...this.state.errors, recovery: "" }, + }); + } + + onBackToOtp() { + this.setState({ + ...this.state, + authFlow: FLOW.MFA, + errors: { ...this.state.errors, twofactor: "" }, + }); + } + + onValidateEmail(ev) { + ev.preventDefault(); + let { user_name } = this.state; + user_name = user_name?.trim(); + + if (user_name == "") { + return false; + } + if (!emailValidator(user_name)) { + return false; } + this.setState({ ...this.state, disableInput: true }); + + verifyAccount(user_name, this.props.token).then( + (payload) => { + let { response } = payload; + + let error = ""; + if (response.is_active === false) { + error = `Your user account is currently locked. Please contact support for further assistance.`; + } else if ( + response.is_active === true && + response.is_verified === false + ) { + error = + "Your email has not been verified. Please check your inbox or resend the verification email."; + } - handleDelete(ev) { - ev.preventDefault(); - this.setState({ + this.setState( + { ...this.state, - user_name: null, - user_pic: null, - user_fullname: null, - user_verified: false, - user_active: null, - email_verified: null, - authFlow: "password", + user_pic: response.pic, + user_fullname: response.full_name, + user_verified: true, + user_active: response.is_active, + email_verified: response.is_verified, + authFlow: response.has_password_set ? FLOW.PASSWORD : FLOW.OTP, errors: { - email: '', - otp: '', - password: '' + email: error, + otp: "", + password: "", + }, + disableInput: false, + }, + function () { + //Once the state is updated, it's now possible to trigger emitOtpAction. + //No need to wait for the component to update. + if (!response.has_password_set && response.is_verified !== false) { + this.emitOtpAction(); } - }); - return false; - } - - handleClickShowPassword(ev) { - ev.preventDefault(); - this.setState({ ...this.state, showPassword: !this.state.showPassword }) - } + }, + ); + }, + (error) => { + let { response, status, message } = error; - handleMouseDownPassword(ev) { - ev.preventDefault(); - } + let newErrors = {}; - existingUserCanContinue() { - const { user_active, email_verified } = this.state; - return user_active !== false && email_verified !== false; - } + newErrors["password"] = ""; + newErrors["email"] = " "; - getSignUpSignInTitle() { - const { errors, user_active } = this.state; + if (status == HTTP_CODES.TOO_MANY_REQUESTS) { + newErrors["email"] = "Too many requests. Try it later."; + } - if (errors.email && this.existingUserCanContinue()) { - return 'Create an account for:'; - } - return 'Sign in'; + this.setState({ + ...this.state, + user_pic: null, + user_fullname: null, + user_verified: false, + errors: newErrors, + disableInput: false, + }); + }, + ); + return true; + } + + resendVerificationEmail(ev) { + ev.preventDefault(); + let { user_name } = this.state; + user_name = user_name?.trim(); + + if (!user_name) { + this.showAlert( + "Something went wrong while trying to resend the verification email. Please try again later.", + "error", + ); + return; } - handleSnackbarClose() { - this.setState({ - ...this.state, - notification: { - message: null, - severity: 'info' - } + resendVerificationEmail(user_name, this.props.token).then( + (payload) => { + this.showAlert( + "We've sent you a verification email. Please check your inbox and click the link to verify your account.", + "success", + ); + }, + (error) => { + handleErrorResponse(error, (title, messageLines, type) => { + const message = (messageLines ?? []).join(", "); + this.showAlert(`${title}: ${message}`, type); }); - }; + }, + ); + } + + handleDelete(ev) { + ev.preventDefault(); + this.setState({ + ...this.state, + user_name: null, + user_pic: null, + user_fullname: null, + user_verified: false, + user_active: null, + email_verified: null, + authFlow: "password", + errors: { + email: "", + otp: "", + password: "", + }, + }); + return false; + } + + handleClickShowPassword(ev) { + ev.preventDefault(); + this.setState({ ...this.state, showPassword: !this.state.showPassword }); + } + + handleMouseDownPassword(ev) { + ev.preventDefault(); + } + + existingUserCanContinue() { + const { user_active, email_verified } = this.state; + return user_active !== false && email_verified !== false; + } + + isMfaFlow() { + return ( + this.state.authFlow === FLOW.MFA || this.state.authFlow === FLOW.RECOVERY + ); + } - componentDidUpdate(prevProps, prevState) { - if (this.state.user_verified && this.existingUserCanContinue() && prevState.authFlow !== this.state.authFlow) { - this.setState({ - ...this.state, - captcha_value: '', - }); - } + getSignUpSignInTitle() { + const { errors, user_active } = this.state; + + if (errors.email && this.existingUserCanContinue()) { + return "Create an account for:"; + } + return "Sign in"; + } + + handleSnackbarClose() { + this.setState({ + ...this.state, + notification: { + message: null, + severity: "info", + }, + }); + } + + componentDidUpdate(prevProps, prevState) { + if ( + this.state.user_verified && + this.existingUserCanContinue() && + prevState.authFlow !== this.state.authFlow + ) { + this.setState({ + ...this.state, + captcha_value: "", + }); } + } + + render() { + const showTwoFactorForm = this.state.authFlow === FLOW.MFA; + const showRecoveryForm = this.state.authFlow === FLOW.RECOVERY; + const isPasswordFlow = + !showTwoFactorForm && + !showRecoveryForm && + !this.isMfaFlow() && + this.state.user_verified && + this.existingUserCanContinue() && + this.state.authFlow === FLOW.PASSWORD; + const isOtpFlow = + !showTwoFactorForm && + !showRecoveryForm && + !this.isMfaFlow() && + this.state.user_verified && + this.existingUserCanContinue() && + this.state.authFlow === FLOW.OTP; + const showDefaultFlow = !showTwoFactorForm && !showRecoveryForm && !isPasswordFlow && !isOtpFlow; + const createAccountAction = this.props.createAccountAction + + (this.state.user_name ? `?email=${encodeURIComponent(this.state.user_name)}` : ""); - render() { - return ( - - - {this.state.showInfoBanner && } - -
- - {this.props.appName} - - - {this.getSignUpSignInTitle()} - {this.state.user_fullname && - } - variant="outlined" - className={styles.valid_user_name_chip} - label={this.state.user_name} - onDelete={this.handleDelete}/> - } - - {(!this.state.user_verified || !this.existingUserCanContinue()) && - <> - {this.state.allowNativeAuth && - - } - {this.state.errors.email === '' && - this.props.thirdPartyProviders.length > 0 && - - } - { - // we already had an interaction and got an user error... - this.state.errors.email !== '' && - <> - {this.existingUserCanContinue() && - - } - { - this.state.user_active === true && this.state.email_verified === false && - - } - - - } - - } - {this.state.user_verified && this.existingUserCanContinue() && this.state.authFlow === password_flow && - // proceed to ask for password ( 2nd step ) - <> - - - - } - {this.state.user_verified && this.existingUserCanContinue() && this.state.authFlow === otp_flow && - // proceed to ask for password ( 2nd step ) - <> - - - - } - + + {this.state.showInfoBanner && ( + + )} + +
+ + + {this.props.appName} + + + + {this.getSignUpSignInTitle()} + {this.state.user_fullname && ( + + } + variant="outlined" + className={styles.valid_user_name_chip} + label={this.state.user_name} + onDelete={this.handleDelete} + /> + )} + + {showTwoFactorForm && ( + + )} + {showRecoveryForm && ( + + )} + {isPasswordFlow && ( + // proceed to ask for password ( 2nd step ) + <> + + + + )} + {isOtpFlow && ( + // proceed to ask for password ( 2nd step ) + <> + + + + )} + {showDefaultFlow && ( + <> + {this.state.allowNativeAuth && ( + + )} + {this.state.errors.email === "" && + this.props.thirdPartyProviders.length > 0 && ( + + )} + { + // we already had an interaction and got an user error... + this.state.errors.email !== "" && ( + <> + {this.existingUserCanContinue() && ( + -
- - - ); - } + )} + {this.state.user_active === true && + this.state.email_verified === false && ( + + )} + + + ) + } + + )} + +
+ + + ); + } } // Or Create your Own theme: const theme = createTheme({ - palette: { - primary: { - main: '#3fa2f7' - }, + palette: { + primary: { + main: "#3fa2f7", }, - overrides: { - MuiButton: { - containedPrimary: { - color: 'white', - textTransform: 'none' - } - } - } + }, + overrides: { + MuiButton: { + containedPrimary: { + color: "white", + textTransform: "none", + }, + }, + }, }); ReactDOM.render( - - - , - document.querySelector('#root') + + + , + document.querySelector("#root"), ); diff --git a/resources/js/login/login.module.scss b/resources/js/login/login.module.scss index fb0257d1..cbd0b254 100644 --- a/resources/js/login/login.module.scss +++ b/resources/js/login/login.module.scss @@ -88,6 +88,28 @@ p > a { margin-top: 20px; } } + + .info_message { + margin-top: 8px; + color: $text-color-dark; + } + + .countdown { + margin-top: 10px; + font-size: 0.85rem; + color: $hint-text-color; + } + + .trust_device_row { + margin-top: 10px; + margin-bottom: 10px; + text-align: left; + } + + .disabled_link { + pointer-events: none; + opacity: 0.5; + } } } @@ -133,4 +155,11 @@ p > a { .otp_p { margin: 0; padding: 0; +} + +.box { + display: flex; + justify-content: space-between; + margin-bottom: 10px; + flex-direction: row; } \ No newline at end of file diff --git a/resources/js/shared/HTMLRender.jsx b/resources/js/shared/HTMLRender.jsx new file mode 100644 index 00000000..98062c02 --- /dev/null +++ b/resources/js/shared/HTMLRender.jsx @@ -0,0 +1,27 @@ +/* eslint-disable react/no-danger */ +import PropTypes from "prop-types"; +import DOMPurify from "dompurify"; + +const HTMLRender = ({ children, className, style, component = "div" }) => { + const html = DOMPurify.sanitize(children || ""); + const Component = component; + + return ( + + ); +}; + +HTMLRender.propTypes = { + children: PropTypes.string, + className: PropTypes.string, + style: PropTypes.shape({ + [PropTypes.string]: PropTypes.string + }), + component: PropTypes.elementType +}; + +export default HTMLRender; diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php index d2ca52ee..4c8e617d 100644 --- a/resources/views/auth/login.blade.php +++ b/resources/views/auth/login.blade.php @@ -34,6 +34,11 @@ accountVerifyAction : '{{URL::action("UserController@getAccount")}}', emitOtpAction : '{{URL::action("UserController@emitOTP")}}', resendVerificationEmailAction: '{{ URL::action("UserController@resendVerificationEmail") }}', + verify2faAction: '{{ URL::action("UserController@verify2FA") }}', + resend2faAction: '{{ URL::action("UserController@resend2FA") }}', + cancelLogin: '{{ URL::action("UserController@cancelLogin") }}', + recovery2faAction: '{{ URL::action("UserController@verify2FARecovery") }}', + mfaMethod: '{{ Session::has("mfa_method") ? Session::get("mfa_method") : "email_otp" }}', authError: authError, captchaPublicKey: '{{ Config::get("services.turnstile.key") }}', flow: 'password', @@ -84,9 +89,21 @@ config.flow = '{{Session::get('flow')}}'; @endif + @if(Session::has('otp_length')) + config.otpLength = {{Session::get("otp_length")}}; + @endif + @if(Session::has('otp_lifetime')) + config.otpLifetime = {{Session::get("otp_lifetime")}}; + @endif + window.VERIFY_ACCOUNT_ENDPOINT = config.accountVerifyAction; window.EMIT_OTP_ENDPOINT = config.emitOtpAction; window.RESEND_VERIFICATION_EMAIL_ENDPOINT = config.resendVerificationEmailAction; + window.VERIFY_2FA_ENDPOINT = config.verify2faAction; + window.RESEND_2FA_ENDPOINT = config.resend2faAction; + window.CANCEL_LOGIN_ENDPOINT = config.cancelLogin; + window.RECOVERY_2FA_ENDPOINT = config.recovery2faAction; + window.FORM_ACTION_ENDPOINT = config.formAction; {!! script_to('assets/login.js') !!} @append \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 542300dc..e3e0ae0f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2047,6 +2047,11 @@ dependencies: "@types/estree" "*" +"@types/trusted-types@^2.0.7": + version "2.0.7" + resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.7.tgz#baccb07a970b91707df3a3e8ba6896c57ead2d11" + integrity sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw== + "@types/ws@^8.5.5": version "8.18.1" resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.18.1.tgz#48464e4bf2ddfd17db13d845467f6070ffea4aa9" @@ -3645,6 +3650,13 @@ domexception@^2.0.1: dependencies: webidl-conversions "^5.0.0" +dompurify@^3.4.11: + version "3.4.11" + resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.4.11.tgz#29c8ba496475f279ef4015784068452fb14a0680" + integrity sha512-zhlUV12GsaRzMsf9q5M254YhA4+VuF0fG+QFqu6aYpoGlKtz+w8//jBcGVYBgQkR5GHjUomejY84AV+/uPbWdw== + optionalDependencies: + "@types/trusted-types" "^2.0.7" + dotenv-defaults@^1.0.2: version "1.1.1" resolved "https://registry.yarnpkg.com/dotenv-defaults/-/dotenv-defaults-1.1.1.tgz#032c024f4b5906d9990eb06d722dc74cc60ec1bd" @@ -6558,7 +6570,7 @@ prompts@^2.0.1: kleur "^3.0.3" sisteransi "^1.0.5" -prop-types@^15.5.6, prop-types@^15.5.7, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2: +prop-types@^15.5.6, prop-types@^15.5.7, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== From cc97f0f1648854f44397ae08d72802226dfe527a Mon Sep 17 00:00:00 2001 From: smarcet Date: Thu, 23 Jul 2026 14:35:55 -0300 Subject: [PATCH 02/22] fix: rename HTMLRender.jsx to .js so webpack can resolve it webpack.common.js has no .jsx resolve extension configured, so the bare '../../shared/HTMLRender' import used by every login form component failed to resolve, breaking the build for this whole tree. --- resources/js/shared/{HTMLRender.jsx => HTMLRender.js} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename resources/js/shared/{HTMLRender.jsx => HTMLRender.js} (100%) diff --git a/resources/js/shared/HTMLRender.jsx b/resources/js/shared/HTMLRender.js similarity index 100% rename from resources/js/shared/HTMLRender.jsx rename to resources/js/shared/HTMLRender.js From 0eca371cb867fda6acf21b6c9af35ff514580de4 Mon Sep 17 00:00:00 2001 From: smarcet Date: Thu, 23 Jul 2026 14:36:11 -0300 Subject: [PATCH 03/22] fix: revert password submit to native form POST The backend login strategies (DefaultLoginStrategy, DisplayResponseUserAgentStrategy) answer wrong-password and mfa_required with a 302 redirect plus flashed/persisted session state, meant to be consumed by a native top-level form submit - the same mechanism already used by the OTP and MFA screens. Converting the password step to AJAX (postRawRequestFull) broke that contract: the hidden XHR redirect-follow GET consumed the one-shot flash before the SPA could show it, silently dropping the wrong-password message, resetting login_attempts (disabling the server-side captcha escalation), and losing native password-manager save/update prompts. Reverts PasswordInputForm to the same native-submit adapter OTPInputForm already uses, and removes the now-dead AJAX path: handleAuthenticatePasswordFlow/Ok/Error, authenticateWithPassword, window.FORM_ACTION_ENDPOINT, and the MFA_CHALLENGE_REQUIRED constant (confirmed unused end-to-end - the server never emits mfa_required as JSON to browser clients either, only via session state under the 'flow' key). Also removes disabled={disableInput} from the password TextField and the 'remember' FormControlLabel. Under native submission, React's synchronous setState(disableInput: true) inside the same onSubmit handler commits the disabled attribute to the DOM before the browser constructs the form's data set - and the HTML spec excludes disabled controls from that set. The result was a silently dropped password field ('The password field is required.', confirmed live against the backend). OTPInputForm was never affected because it only disables its submit Button, never the field carrying the actual submitted value - the fix here matches that pattern. --- resources/js/login/actions.js | 5 -- .../login/components/password_input_form.js | 24 +++---- resources/js/login/constants.js | 1 - resources/js/login/login.js | 66 ++----------------- resources/views/auth/login.blade.php | 1 - 5 files changed, 16 insertions(+), 81 deletions(-) diff --git a/resources/js/login/actions.js b/resources/js/login/actions.js index aaea626c..76c6d2bc 100644 --- a/resources/js/login/actions.js +++ b/resources/js/login/actions.js @@ -56,11 +56,6 @@ export const verifyRecoveryCode = (recoveryCode, token) => { return postRawRequestFull(window.RECOVERY_2FA_ENDPOINT)(params, {'X-CSRF-TOKEN': token}); } -export const authenticateWithPassword = (formData, token) => { - const params = Object.fromEntries(formData.entries()); - return postRawRequestFull(window.FORM_ACTION_ENDPOINT)(params, {'X-CSRF-TOKEN': token}); -} - export const cancelLogin = (token) => { return postRawRequest(window.CANCEL_LOGIN_ENDPOINT)({}, {'X-CSRF-TOKEN': token}); } diff --git a/resources/js/login/components/password_input_form.js b/resources/js/login/components/password_input_form.js index d68b4258..f89786b9 100644 --- a/resources/js/login/components/password_input_form.js +++ b/resources/js/login/components/password_input_form.js @@ -1,4 +1,4 @@ -import React, { useRef } from "react"; +import React from "react"; import { Turnstile } from "@marsidev/react-turnstile"; import TextField from "@material-ui/core/TextField"; import Button from "@material-ui/core/Button"; @@ -37,14 +37,15 @@ const PasswordInputForm = ({ userIsActive, helpAction, }) => { - const formRef = useRef(null); - const handleContinue = () => onAuthenticate(formRef.current); - const onEnterSubmit = (ev) => { - if (ev.key === "Enter") { + // Native form submission (same adapter as OTPInputForm): password managers key + // their save/update prompt off the browser's real submit event, and the backend + // login strategies respond with a redirect + flashed session state that only a + // top-level navigation consumes correctly. + const handleSubmit = (ev) => { + if (!onAuthenticate(ev.target)) { ev.preventDefault(); - handleContinue(); } - } + }; const ErrorMessage = () => { const attempts = parseInt(loginAttempts, 10); @@ -93,8 +94,7 @@ const PasswordInputForm = ({
ev.preventDefault()} + onSubmit={handleSubmit} target="_self" > @@ -133,8 +131,7 @@ const PasswordInputForm = ({ +   + + + + ); +}; + +export default RecoveryCodeDisplay; diff --git a/resources/js/components/recovery_code_modal.js b/resources/js/components/recovery_code_modal.js new file mode 100644 index 00000000..f0a09c01 --- /dev/null +++ b/resources/js/components/recovery_code_modal.js @@ -0,0 +1,64 @@ +import React, {useEffect, useState} from "react"; +import Box from "@material-ui/core/Box"; +import Button from "@material-ui/core/Button"; +import Dialog from "@material-ui/core/Dialog"; +import DialogActions from "@material-ui/core/DialogActions"; +import DialogContent from "@material-ui/core/DialogContent"; +import DialogTitle from "@material-ui/core/DialogTitle"; +import Typography from "@material-ui/core/Typography"; +import WarningRoundedIcon from "@material-ui/icons/WarningRounded"; +import RecoveryCodeDisplay from "./recovery_code_display"; + +import styles from "./recovery_codes.module.scss"; + +const ACK_DELAY_SECONDS = 5; + +const RecoveryCodeModal = ({open, codes, email, appName, onAcknowledge}) => { + const [secondsLeft, setSecondsLeft] = useState(ACK_DELAY_SECONDS); + + useEffect(() => { + if (!open) return undefined; + + setSecondsLeft(ACK_DELAY_SECONDS); + const interval = setInterval(() => { + setSecondsLeft((prev) => (prev > 0 ? prev - 1 : 0)); + }, 1000); + + return () => clearInterval(interval); + }, [open]); + + return ( + + Save Your Recovery Codes + + + + + These codes will not be shown again. Copy or download them now and store them somewhere safe. + + + {codes && } + + + + + + ); +}; + +export default RecoveryCodeModal; diff --git a/resources/js/components/recovery_codes.module.scss b/resources/js/components/recovery_codes.module.scss new file mode 100644 index 00000000..c4437a1e --- /dev/null +++ b/resources/js/components/recovery_codes.module.scss @@ -0,0 +1,43 @@ +.recovery_codes_panel { + margin-top: 15px; +} + +.codes_grid { + margin: 8px 0; + padding: 12px; + background-color: #f5f5f5; + border-radius: 4px; +} + +.code { + font-family: monospace; + font-size: 1rem; + letter-spacing: 1px; +} + +.warning_banner { + display: flex; + align-items: flex-start; + margin-bottom: 16px; + padding: 10px 14px; + background-color: #fdecea; + border-left: 4px solid #f44336; + border-radius: 4px; +} + +.warning_icon { + color: #f44336; + margin-right: 10px; + margin-top: 1px; + flex-shrink: 0; +} + +.low_code_warning { + display: flex; + align-items: center; + justify-content: space-between; + margin-top: 8px; + padding: 8px 12px; + background-color: #fff3e0; + border-radius: 4px; +} diff --git a/resources/js/components/recovery_codes_panel.js b/resources/js/components/recovery_codes_panel.js new file mode 100644 index 00000000..986c70f7 --- /dev/null +++ b/resources/js/components/recovery_codes_panel.js @@ -0,0 +1,144 @@ +import React, {useState} from "react"; +import Box from "@material-ui/core/Box"; +import Button from "@material-ui/core/Button"; +import Grid from "@material-ui/core/Grid"; +import IconButton from "@material-ui/core/IconButton"; +import Link from "@material-ui/core/Link"; +import TextField from "@material-ui/core/TextField"; +import Typography from "@material-ui/core/Typography"; +import CloseIcon from "@material-ui/icons/Close"; +import {regenerateRecoveryCodes} from "../profile/actions"; +import {handleErrorResponse} from "../utils"; +import RecoveryCodeModal from "./recovery_code_modal"; +import { + RECOVERY_CODES_LOW_WARNING_DISMISSED_KEY, + DEFAULT_RECOVERY_CODES_LOW_THRESHOLD, +} from "../shared/recovery_codes"; + +import styles from "./recovery_codes.module.scss"; + +const RecoveryCodesPanel = ({ + recoveryCodesRemaining, + recoveryCodesTotal, + lowCodeThreshold = DEFAULT_RECOVERY_CODES_LOW_THRESHOLD, + email, + appName, + initialCodes = null + }) => { + const [regenerating, setRegenerating] = useState(false); + const [currentPassword, setCurrentPassword] = useState(""); + const [loading, setLoading] = useState(false); + const [remaining, setRemaining] = useState(recoveryCodesRemaining); + const [total, setTotal] = useState(recoveryCodesTotal); + const [codes, setCodes] = useState(initialCodes); + const [warningDismissed, setWarningDismissed] = useState( + sessionStorage.getItem(RECOVERY_CODES_LOW_WARNING_DISMISSED_KEY) === "1" + ); + + const handleRegenerate = () => { + setLoading(true); + regenerateRecoveryCodes(currentPassword).then(({response}) => { + setLoading(false); + setRegenerating(false); + setCurrentPassword(""); + setCodes(response.recovery_codes); + setRemaining(response.recovery_codes.length); + setTotal(response.recovery_codes.length); + }).catch((err) => { + setLoading(false); + handleErrorResponse(err); + }); + }; + + const handleAcknowledge = () => { + setCodes(null); + }; + + const dismissLowCodeWarning = () => { + sessionStorage.setItem(RECOVERY_CODES_LOW_WARNING_DISMISSED_KEY, "1"); + setWarningDismissed(true); + }; + + const showLowCodeWarning = !warningDismissed && remaining < lowCodeThreshold; + + return ( + <> + + + Recovery Codes: {remaining} of {total} remaining + + { + showLowCodeWarning && + + + You're running low on recovery codes. Regenerate them to avoid getting locked out. + + + + + + } + { + !regenerating && + { + e.preventDefault(); + setRegenerating(true); + }}> + Regenerate Codes + + } + { + regenerating && + + setCurrentPassword(e.target.value)} + onKeyDown={(e) => { + // This panel lives inside the profile page's own ; + // it must not let Enter bubble up and submit that form too. + if (e.key === "Enter") { + e.preventDefault(); + if (currentPassword && !loading) handleRegenerate(); + } + }} + // Detaches this input from the ancestor (the profile page + // wraps everything in one big form) so the browser's native + // "Enter submits the enclosing form" / password-manager-driven + // auto-submit can never fire a GET on it, regardless of the + // onKeyDown handler above. + inputProps={{form: "recovery-codes-detached-form", autoComplete: "off"}} + data-testid="recovery-codes-current-password" + /> +   + +   + { + e.preventDefault(); + setRegenerating(false); + setCurrentPassword(""); + }}> + Cancel + + + } + + + + ); +}; + +export default RecoveryCodesPanel; diff --git a/resources/js/components/two_factor_section.js b/resources/js/components/two_factor_section.js new file mode 100644 index 00000000..ece17eff --- /dev/null +++ b/resources/js/components/two_factor_section.js @@ -0,0 +1,68 @@ +import React, {useState} from "react"; +import Button from "@material-ui/core/Button"; +import Typography from "@material-ui/core/Typography"; +import {enableTwoFactor} from "../profile/actions"; +import {handleErrorResponse} from "../utils"; +import RecoveryCodesPanel from "./recovery_codes_panel"; + +const DEFAULT_METHOD = "email_otp"; + +const TwoFactorSection = ({ + twoFactorEnabled, + recoveryCodesRemaining, + recoveryCodesTotal, + recoveryCodesLowThreshold, + email, + appName + }) => { + const [enabled, setEnabled] = useState(twoFactorEnabled); + const [loading, setLoading] = useState(false); + const [remaining, setRemaining] = useState(recoveryCodesRemaining); + const [total, setTotal] = useState(recoveryCodesTotal); + const [enrollmentCodes, setEnrollmentCodes] = useState(null); + + const handleEnable = () => { + setLoading(true); + enableTwoFactor(DEFAULT_METHOD).then(({response}) => { + setLoading(false); + setRemaining(response.recovery_codes.length); + setTotal(response.recovery_codes.length); + setEnrollmentCodes(response.recovery_codes); + setEnabled(true); + }).catch((err) => { + setLoading(false); + handleErrorResponse(err); + }); + }; + + if (!enabled) { + return ( + <> + + Two-factor authentication is not enabled for your account. + + + + ); + } + + return ( + + ); +}; + +export default TwoFactorSection; diff --git a/resources/js/login/components/email_input_form.js b/resources/js/login/components/email_input_form.js index ab26ff47..d074bb23 100644 --- a/resources/js/login/components/email_input_form.js +++ b/resources/js/login/components/email_input_form.js @@ -50,7 +50,7 @@ const EmailInputForm = ({ )} {emailError != "" && ( - + {emailError} )} diff --git a/resources/js/login/components/otp_code_input.js b/resources/js/login/components/otp_code_input.js index 55c8e77b..cb5cbfc3 100644 --- a/resources/js/login/components/otp_code_input.js +++ b/resources/js/login/components/otp_code_input.js @@ -38,7 +38,7 @@ const OtpCodeInput = ({ /> {otpError && - + {otpError} } diff --git a/resources/js/login/components/password_input_form.js b/resources/js/login/components/password_input_form.js index f89786b9..96e5a1cc 100644 --- a/resources/js/login/components/password_input_form.js +++ b/resources/js/login/components/password_input_form.js @@ -56,7 +56,7 @@ const PasswordInputForm = ({ if (attempts > 0 && attempts < maxAttempts && userIsActive) { return ( -

+

Incorrect password. You have {attemptsLeft} more attempt {attemptsLeft !== 1 ? "s" : ""} before your account is locked.

@@ -65,7 +65,7 @@ const PasswordInputForm = ({ if (attempts > 0 && attempts === maxAttempts && userIsActive) { return ( -

+

Incorrect password. You have reached the maximum ({maxAttempts}) login attempts. Your account will be locked after another failed login. @@ -75,7 +75,7 @@ const PasswordInputForm = ({ if (attempts > 0 && attempts === maxAttempts && !userIsActive) { return ( -

+

Your account has been locked due to multiple failed login attempts. Please contact support to unlock it. @@ -84,7 +84,7 @@ const PasswordInputForm = ({ } return ( - + {passwordError} ); diff --git a/resources/js/login/components/recovery_code_form.js b/resources/js/login/components/recovery_code_form.js index 49ace5f6..50830e04 100644 --- a/resources/js/login/components/recovery_code_form.js +++ b/resources/js/login/components/recovery_code_form.js @@ -31,7 +31,7 @@ const RecoveryCodeForm = ({ }; return ( - +

Enter a recovery code

Enter one of the recovery codes you saved when you enabled two-step verification. @@ -52,7 +52,7 @@ const RecoveryCodeForm = ({ error={!!recoveryError} /> {recoveryError && ( - + {recoveryError} )} @@ -61,7 +61,8 @@ const RecoveryCodeForm = ({ disabled={disableInput || recoveryCode === ''} color="primary" type="submit" - target="_self"> + target="_self" + data-testid="verify-button"> VERIFY @@ -72,7 +73,7 @@ const RecoveryCodeForm = ({ Back to verification code {" ยท "} - + Cancel diff --git a/resources/js/login/components/two_factor_form.js b/resources/js/login/components/two_factor_form.js index 762f34c5..c06ff08e 100644 --- a/resources/js/login/components/two_factor_form.js +++ b/resources/js/login/components/two_factor_form.js @@ -64,7 +64,7 @@ const TwoFactorForm = ({ }; return ( - + + target="_self" + data-testid="verify-button"> VERIFY @@ -103,17 +104,18 @@ const TwoFactorForm = ({

Didn't receive it? Check your spam folder or{" "} 0 || disableInput) ? styles.disabled_link : ''}> + className={(cooldown > 0 || disableInput) ? styles.disabled_link : ''} + data-testid="resend-link"> {cooldown > 0 ? `resend code (${cooldown}s)` : 'resend code'} .

{/* "Use a different method" is intentionally hidden in Phase I (email_otp only). */}
- + Cancel - + Use a recovery code instead
diff --git a/resources/js/login/login.js b/resources/js/login/login.js index f04bd4e2..3aa2100c 100644 --- a/resources/js/login/login.js +++ b/resources/js/login/login.js @@ -31,8 +31,13 @@ import EmailErrorActions from "./components/email_error_actions"; import ThirdPartyIdentityProviders from "./components/third_party_identity_providers"; import TwoFactorForm from "./components/two_factor_form"; import RecoveryCodeForm from "./components/recovery_code_form"; +import { + RECOVERY_CODES_LOW_WARNING_DISMISSED_KEY, + DEFAULT_RECOVERY_CODES_LOW_THRESHOLD, +} from "../shared/recovery_codes"; import styles from "./login.module.scss"; +import recoveryCodesStyles from "../components/recovery_codes.module.scss"; import "./third_party_identity_providers.scss"; import { FLOW, @@ -93,6 +98,11 @@ class LoginPage extends React.Component { // change writes otp_lifetime atomically with flow, so props.otpLifetime // is only ever missing when there's no pending OTP to show a countdown for. passwordlessLifetime: props.otpLifetime ?? null, + // Set once a recovery-code login succeeds with a low remaining count, so + // the redirect can be held until the user acknowledges the warning - + // this is the only point where the SPA still controls the page (see + // onVerifyRecovery()/onContinueAfterLowRecoveryCodes() below). + lowRecoveryCodesWarning: null, }; if (props.authError != "" && !this.state.user_fullname) { @@ -130,6 +140,7 @@ class LoginPage extends React.Component { this.onVerify2FA = this.onVerify2FA.bind(this); this.onResend2FA = this.onResend2FA.bind(this); this.onVerifyRecovery = this.onVerifyRecovery.bind(this); + this.onContinueAfterLowRecoveryCodes = this.onContinueAfterLowRecoveryCodes.bind(this); this.onUseRecovery = this.onUseRecovery.bind(this); this.onBackToOtp = this.onBackToOtp.bind(this); this.resetToPasswordFlow = this.resetToPasswordFlow.bind(this); @@ -318,9 +329,13 @@ class LoginPage extends React.Component { onRecoveryCodeChange(ev) { let { value } = ev.target; + // Recovery codes are generated and hashed without the "-" separator; it is + // added only for on-screen readability (XXXX-XXXX). Strip any non-alphanumeric + // characters here so a code typed or pasted exactly as displayed still matches. + const normalized = value.replace(/[^A-Za-z0-9]/g, "").toUpperCase(); this.setState({ ...this.state, - recoveryCode: value, + recoveryCode: normalized, errors: { ...this.state.errors, recovery: "" }, }); } @@ -536,10 +551,26 @@ class LoginPage extends React.Component { verifyRecoveryCode(recoveryCode, this.props.token).then( (payload) => { - // See onVerify2FA() for rationale. const { response } = payload; - window.location.href = + const redirectUrl = (response && response.redirect_url) || window.location.href; + const remaining = response && response.recovery_codes_remaining; + const threshold = + (response && response.recovery_codes_low_threshold) ?? + DEFAULT_RECOVERY_CODES_LOW_THRESHOLD; + const alreadyDismissed = + sessionStorage.getItem(RECOVERY_CODES_LOW_WARNING_DISMISSED_KEY) === "1"; + + if (typeof remaining === "number" && remaining < threshold && !alreadyDismissed) { + this.setState({ + ...this.state, + lowRecoveryCodesWarning: { remaining, redirectUrl }, + }); + return; + } + + // See onVerify2FA() for rationale on using a real top-level navigation. + window.location.href = redirectUrl; }, (error) => { this.handleMfaError(error, "recovery"); @@ -547,6 +578,11 @@ class LoginPage extends React.Component { ); } + onContinueAfterLowRecoveryCodes() { + sessionStorage.setItem(RECOVERY_CODES_LOW_WARNING_DISMISSED_KEY, "1"); + window.location.href = this.state.lowRecoveryCodesWarning.redirectUrl; + } + onUseRecovery() { this.setState({ ...this.state, @@ -829,7 +865,7 @@ class LoginPage extends React.Component { onVerify={this.onVerify2FA} /> )} - {showRecoveryForm && ( + {showRecoveryForm && !this.state.lowRecoveryCodesWarning && ( )} + {showRecoveryForm && this.state.lowRecoveryCodesWarning && ( +
+ + You have {this.state.lowRecoveryCodesWarning.remaining} recovery + code{this.state.lowRecoveryCodesWarning.remaining === 1 ? "" : "s"} left. + Regenerate them from your profile after signing in to avoid getting + locked out. + + +
+ )} {isPasswordFlow && ( // proceed to ask for password ( 2nd step ) - <> +
- +
)} {isOtpFlow && ( // proceed to ask for password ( 2nd step ) @@ -1000,9 +1057,14 @@ const theme = createTheme({ }, }); -ReactDOM.render( - - - , - document.querySelector("#root"), -); +export { LoginPage }; + +const root = document.querySelector("#root"); +if (root) { + ReactDOM.render( + + + , + root, + ); +} diff --git a/resources/js/profile/actions.js b/resources/js/profile/actions.js index c1c6c2f0..0c9ea422 100644 --- a/resources/js/profile/actions.js +++ b/resources/js/profile/actions.js @@ -1,4 +1,4 @@ -import {deleteRawRequest, getRawRequest, putFile, putRawRequest} from "../base_actions"; +import {deleteRawRequest, getRawRequest, postRawRequestFull, putFile, putRawRequest} from "../base_actions"; import moment from "moment"; export const PAGE_SIZE = 10; @@ -87,6 +87,16 @@ export const revokeAllTokens = async () => { return deleteRawRequest(window.REVOKE_ALL_TOKENS_ENDPOINT)({'X-CSRF-TOKEN': window.CSFR_TOKEN}); } +export const regenerateRecoveryCodes = async (currentPassword) => { + const params = {current_password: currentPassword}; + return postRawRequestFull(window.REGENERATE_RECOVERY_CODES_ENDPOINT)(params, {'X-CSRF-TOKEN': window.CSFR_TOKEN}); +} + +export const enableTwoFactor = async (method) => { + const params = {method}; + return postRawRequestFull(window.ENABLE_TWO_FACTOR_ENDPOINT)(params, {'X-CSRF-TOKEN': window.CSFR_TOKEN}); +} + const normalizeEntity = (entity) => { entity.public_profile_show_photo = entity.public_profile_show_photo ? 1 : 0; entity.public_profile_show_fullname = entity.public_profile_show_fullname ? 1 : 0; diff --git a/resources/js/profile/profile.js b/resources/js/profile/profile.js index a530d04a..878f86a5 100644 --- a/resources/js/profile/profile.js +++ b/resources/js/profile/profile.js @@ -1,5 +1,6 @@ import React, {useState} from "react"; import ReactDOM from "react-dom"; +import Box from "@material-ui/core/Box"; import Button from "@material-ui/core/Button"; import Card from "@material-ui/core/Card"; import CardContent from "@material-ui/core/CardContent"; @@ -26,6 +27,7 @@ import Navbar from "../components/navbar/navbar"; import Divider from "@material-ui/core/Divider"; import Link from "@material-ui/core/Link"; import PasswordChangePanel from "../components/password_change_panel"; +import TwoFactorSection from "../components/two_factor_section"; import LoadingIndicator from "../components/loading_indicator"; import TopLogo from "../components/top_logo/top_logo"; import {handleErrorResponse} from "../utils"; @@ -35,13 +37,18 @@ import styles from "./profile.module.scss"; const ProfilePage = ({ appLogo, + appName, countries, csrfToken, initialValues, languages, menuConfig, passwordPolicy, - redirectUri + redirectUri, + twoFactorEnabled, + recoveryCodesRemaining, + recoveryCodesTotal, + recoveryCodesLowThreshold }) => { const [pic, setPic] = useState(null); const [loading, setLoading] = useState(false); @@ -754,11 +761,27 @@ const ProfilePage = ({ )} - - + + + + + + + Two-Factor Authentication + + + + { +const HTMLRender = ({ children, className, style, component = "div", ...rest }) => { const html = DOMPurify.sanitize(children || ""); const Component = component; @@ -12,6 +12,7 @@ const HTMLRender = ({ children, className, style, component = "div" }) => { style={style} className={className} dangerouslySetInnerHTML={{ __html: html }} + {...rest} /> ); }; diff --git a/resources/js/shared/recovery_codes.js b/resources/js/shared/recovery_codes.js new file mode 100644 index 00000000..c144f52b --- /dev/null +++ b/resources/js/shared/recovery_codes.js @@ -0,0 +1,5 @@ +// Shared between the profile page's RecoveryCodesPanel and the login page's +// post-MFA-recovery-login warning, so dismissing the low-code warning in +// either place suppresses it everywhere else for the rest of the session. +export const RECOVERY_CODES_LOW_WARNING_DISMISSED_KEY = "recovery_codes_low_warning_dismissed"; +export const DEFAULT_RECOVERY_CODES_LOW_THRESHOLD = 3; diff --git a/resources/js/signup/signup.js b/resources/js/signup/signup.js index 1d595e2a..93a98b2f 100644 --- a/resources/js/signup/signup.js +++ b/resources/js/signup/signup.js @@ -84,10 +84,12 @@ const SignUpPage = ({ return errors; }, onSubmit: (values) => { - const turnstileResponse = captcha.current?.getResponse(); - if (!turnstileResponse) { - setCaptchaConfirmation("Remember to check the captcha"); - return; + if (captchaPublicKey) { + const turnstileResponse = captcha.current?.getResponse(); + if (!turnstileResponse) { + setCaptchaConfirmation("Remember to check the captcha"); + return; + } } doHtmlFormPost(); }, diff --git a/resources/js/utils.js b/resources/js/utils.js index 7b35a202..5d5d711c 100644 --- a/resources/js/utils.js +++ b/resources/js/utils.js @@ -82,6 +82,18 @@ export const formatTime = (timeInSeconds) => { return res; } +export const downloadTextFile = (filename, content) => { + const blob = new Blob([content], {type: 'text/plain'}); + const url = URL.createObjectURL(blob); + const link = document.createElement('a'); + link.href = url; + link.download = filename; + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + URL.revokeObjectURL(url); +}; + export const decodeHtmlEntities = (text) => { const textarea = document.createElement('textarea'); textarea.innerHTML = text; diff --git a/resources/views/profile.blade.php b/resources/views/profile.blade.php index 335094e7..672081ba 100644 --- a/resources/views/profile.blade.php +++ b/resources/views/profile.blade.php @@ -103,7 +103,11 @@ initialValues: initialValues, languages: languages, menuConfig: menuConfig, - passwordPolicy: passwordPolicy + passwordPolicy: passwordPolicy, + twoFactorEnabled: {{ $two_factor_enabled ? 'true' : 'false' }}, + recoveryCodesRemaining: {{ (int) $recovery_codes_remaining }}, + recoveryCodesTotal: {{ (int) $recovery_codes_total }}, + recoveryCodesLowThreshold: {{ (int) $recovery_codes_low_threshold }} } window.GET_USER_ACTIONS_ENDPOINT = '{{URL::action("Api\UserActionApiController@getActionsByCurrentUser")}}'; @@ -112,6 +116,8 @@ window.REVOKE_ALL_TOKENS_ENDPOINT = '{{URL::action("Api\UserApiController@revokeAllMyTokens")}}'; window.SAVE_PROFILE_ENDPOINT = '{!!URL::action("Api\UserApiController@updateMe")!!}'; window.SAVE_PIC_ENDPOINT = '{!!URL::action("Api\UserApiController@updateMyPic")!!}'; + window.REGENERATE_RECOVERY_CODES_ENDPOINT = '{!!URL::action("Api\UserApiController@regenerateRecoveryCodes")!!}'; + window.ENABLE_TWO_FACTOR_ENDPOINT = '{!!URL::action("Api\UserApiController@enableTwoFactor")!!}'; window.CSFR_TOKEN = document.head.querySelector('meta[name="csrf-token"]').content; {!! script_to('assets/profile.js') !!} diff --git a/routes/web.php b/routes/web.php index ecbeda35..61d97573 100644 --- a/routes/web.php +++ b/routes/web.php @@ -197,6 +197,8 @@ Route::put('', "UserApiController@updateMe"); Route::put('pic', "UserApiController@updateMyPic"); Route::get('actions', "UserActionApiController@getActionsByCurrentUser"); + Route::post('recovery-codes/regenerate', "UserApiController@regenerateRecoveryCodes"); + Route::post('2fa/enable', "UserApiController@enableTwoFactor"); }); Route::get('access-tokens', ['middleware' => ['openstackid.currentuser.serveradmin.json'], 'uses' => 'ClientApiController@getAllAccessTokens']); diff --git a/start_local_server.sh b/start_local_server.sh index 0535f4b8..62d66591 100755 --- a/start_local_server.sh +++ b/start_local_server.sh @@ -2,11 +2,31 @@ set -e export DOCKER_SCAN_SUGGEST=false -docker compose run --rm app composer install -docker compose run --rm app php artisan doctrine:migrations:migrate --no-interaction -docker compose run --rm app php artisan db:seed --force -docker compose run --rm app php artisan idp:create-super-admin test@test.com 1Qaz2wsx! +# Install PHP deps without running post-autoload scripts (package:discover +# boots Laravel which triggers the OTEL exporter flush โ€” hangs if the +# collector isn't up yet). +docker compose run --rm app composer install --no-scripts + +# JS deps and build don't involve artisan, safe to run before the full stack. docker compose run --rm app yarn install docker compose run --rm app yarn build + +# Bring up the full stack so the OTEL collector is reachable before any +# artisan command runs. docker compose up -d -docker compose exec app /bin/bash \ No newline at end of file + +echo "Waiting for app container to be ready..." +until docker compose exec app true 2>/dev/null; do sleep 1; done + +# Now run artisan commands with every service available. +docker compose exec app php artisan package:discover --ansi +docker compose exec app php artisan doctrine:migrations:migrate --no-interaction +docker compose exec app php artisan db:seed --force +docker compose exec app php artisan idp:create-super-admin test@test.com 1Qaz2wsx! +docker compose exec app php artisan idp:create-raw-user e2e@test.com 1Qaz2wsx! + +# Install Playwright Chromium into the named volume (skipped automatically if +# already cached from a previous run). +docker compose --profile e2e run --rm playwright npx playwright install chromium + +docker compose exec app /bin/bash diff --git a/tests/RecoveryCodeRegenerationTest.php b/tests/RecoveryCodeRegenerationTest.php new file mode 100644 index 00000000..cec67de8 --- /dev/null +++ b/tests/RecoveryCodeRegenerationTest.php @@ -0,0 +1,237 @@ +withoutMiddleware(); + $this->be($this->admin()); + Session::start(); + } + + public function testRegenerateWithCorrectPasswordInvalidatesOldCodesAndReturnsNewOnes(): void + { + $admin = $this->admin(); + $this->createRecoveryCode($admin, 'OLD-CODE-' . uniqid(), false); + + $response = $this->regenerate(self::SEED_PASSWORD); + + $this->assertResponseStatus(200); + $payload = json_decode($response->getContent(), true); + $this->assertArrayHasKey('recovery_codes', $payload); + + $expectedCount = (int)config('auth.recovery_codes.count', 10); + $this->assertCount($expectedCount, $payload['recovery_codes']); + foreach ($payload['recovery_codes'] as $code) { + $this->assertMatchesRegularExpression('/^[A-Z0-9]+-[A-Z0-9]+$/', $code); + } + + EntityManager::clear(); + $remaining = EntityManager::getRepository(UserRecoveryCode::class) + ->findBy(['user' => $admin->getId(), 'used_at' => null]); + $this->assertCount( + $expectedCount, + $remaining, + 'old codes must be invalidated and replaced by exactly the configured count' + ); + } + + public function testRegenerateWithWrongPasswordFailsAndDoesNotTouchExistingCodes(): void + { + $admin = $this->admin(); + $plain = 'KEEP-ME-' . uniqid(); + $this->createRecoveryCode($admin, $plain, false); + + $response = $this->regenerate('this-is-not-the-password'); + + $this->assertResponseStatus(412); + + EntityManager::clear(); + $remaining = EntityManager::getRepository(UserRecoveryCode::class) + ->findBy(['user' => $admin->getId(), 'used_at' => null]); + $this->assertNotEmpty($remaining, 'existing codes must not be touched when the password confirmation fails'); + } + + public function testRegenerateRequiresCurrentPassword(): void + { + $response = $this->action('POST', 'Api\\UserApiController@regenerateRecoveryCodes', [], [], [], []); + + $this->assertResponseStatus(412); + } + + public function testRegenerateLogsAuditEvent(): void + { + $admin = $this->admin(); + + $this->regenerate(self::SEED_PASSWORD); + + EntityManager::clear(); + $entries = EntityManager::getRepository(TwoFactorAuditLog::class) + ->findBy(['user' => $admin->getId(), 'event_type' => TwoFactorAuditLog::EventRecoveryCodesGenerated]); + $this->assertNotEmpty($entries, 'a recovery_codes_generated audit entry must be recorded'); + } + + public function testEnableTwoFactorGeneratesRecoveryCodes(): void + { + $admin = $this->admin(); + + $response = $this->enableTwoFactor('email_otp'); + + $this->assertResponseStatus(200); + $payload = json_decode($response->getContent(), true); + $this->assertArrayHasKey('recovery_codes', $payload); + + $expectedCount = (int)config('auth.recovery_codes.count', 10); + $this->assertCount($expectedCount, $payload['recovery_codes']); + + EntityManager::clear(); + $reloaded = EntityManager::getRepository(User::class)->find($admin->getId()); + $this->assertTrue($reloaded->isTwoFactorEnabled(), '2FA must be enabled on the user after enrollment'); + + $remaining = EntityManager::getRepository(UserRecoveryCode::class) + ->findBy(['user' => $admin->getId(), 'used_at' => null]); + $this->assertCount($expectedCount, $remaining); + } + + public function testDisplayedRecoveryCodeRedeemsThroughVerifyRecoveryCode(): void + { + $admin = $this->admin(); + + $response = $this->regenerate(self::SEED_PASSWORD); + $this->assertResponseStatus(200); + $payload = json_decode($response->getContent(), true); + $displayedCode = $payload['recovery_codes'][0]; + $this->assertMatchesRegularExpression('/^[A-Z0-9]+-[A-Z0-9]+$/', $displayedCode); + + EntityManager::clear(); + $admin = EntityManager::getRepository(User::class)->find($admin->getId()); + $unusedBefore = EntityManager::getRepository(UserRecoveryCode::class) + ->findBy(['user' => $admin->getId(), 'used_at' => null]); + + // The hash was generated over the dash-less string; redeeming the code + // exactly as it was displayed (with its "-" separator) must still work. + // Goes through IAuthService, like the real login flow, because + // verifyRecoveryCode() takes a PESSIMISTIC_WRITE row lock that requires + // an open transaction. + $strategy = MFAChallengeStrategyFactory::create(User::MFAMethod_OTP); + app(IAuthService::class)->verifyMFARecoveryCode($admin, $strategy, $displayedCode); + + EntityManager::clear(); + $unusedAfter = EntityManager::getRepository(UserRecoveryCode::class) + ->findBy(['user' => $admin->getId(), 'used_at' => null]); + + $this->assertCount( + count($unusedBefore) - 1, + $unusedAfter, + 'the code redeemed exactly as displayed must be consumed exactly once' + ); + } + + public function testEnableTwoFactorRejectsWhenAlreadyEnabled(): void + { + $this->enableTwoFactor('email_otp'); + $this->assertResponseStatus(200); + + $response = $this->enableTwoFactor('email_otp'); + + $this->assertResponseStatus(412); + + EntityManager::clear(); + $admin = $this->admin(); + $this->assertTrue($admin->isTwoFactorEnabled(), '2FA must remain enabled after the rejected second call'); + } + + public function testEnableTwoFactorRejectsUnavailableMethod(): void + { + // sms_otp is a stub in Phase I (isPhoneNumberVerified() is hardcoded false), + // so enable2FA() must reject it regardless of the requesting user. + $response = $this->enableTwoFactor('sms_otp'); + + $this->assertResponseStatus(412); + } + + public function testEnableTwoFactorRequiresMethod(): void + { + $response = $this->action('POST', 'Api\\UserApiController@enableTwoFactor', [], [], [], []); + + $this->assertResponseStatus(412); + } + + public function testEnableTwoFactorLogsEnrollmentAuditEvent(): void + { + $admin = $this->admin(); + + $this->enableTwoFactor('email_otp'); + + EntityManager::clear(); + $entries = EntityManager::getRepository(TwoFactorAuditLog::class) + ->findBy(['user' => $admin->getId(), 'event_type' => TwoFactorAuditLog::EventEnrollmentChanged]); + $this->assertNotEmpty($entries, 'an enrollment_changed audit entry must be recorded'); + } + + private function enableTwoFactor(string $method) + { + return $this->action('POST', 'Api\\UserApiController@enableTwoFactor', [ + 'method' => $method, + ], [], [], []); + } + + private function admin(): User + { + $user = EntityManager::getRepository(User::class)->findOneBy(['identifier' => self::ADMIN_IDENTIFIER]); + $this->assertInstanceOf(User::class, $user, 'seeded admin user not found'); + return $user; + } + + private function regenerate(string $password) + { + return $this->action('POST', 'Api\\UserApiController@regenerateRecoveryCodes', [ + 'current_password' => $password, + ], [], [], []); + } + + private function createRecoveryCode(User $user, string $plain, bool $used): int + { + $code = new UserRecoveryCode(); + $code->setUser($user); + $code->setCodeHash(Hash::make($plain)); + if ($used) { + $code->markUsed(); + } + EntityManager::persist($code); + EntityManager::flush(); + return $code->getId(); + } +} diff --git a/tests/TurnstileProtectedControllersTest.php b/tests/TurnstileProtectedControllersTest.php index c6076f40..dffc0134 100644 --- a/tests/TurnstileProtectedControllersTest.php +++ b/tests/TurnstileProtectedControllersTest.php @@ -17,9 +17,12 @@ /** * Class TurnstileProtectedControllersTest * - * Smoke tests verifying that cf-turnstile-response is always required on the - * five auth endpoints that gate every submission behind Turnstile (unlike - * UserController::postLogin, which only activates the rule above a threshold). + * Smoke tests verifying that cf-turnstile-response is required on the five auth + * endpoints that gate every submission behind Turnstile. + * + * Requests MUST go over HTTPS (callSecure) because .env.testing sets + * SSL_ENABLED=true, which causes SSLMiddleware to redirect plain HTTP requests + * to HTTPS before reaching any controller. */ final class TurnstileProtectedControllersTest extends BrowserKitTestCase { @@ -37,8 +40,8 @@ private function sessionHasValidationError(string $field): bool private function postWithSession(string $url, array $data = []): void { - $this->call('GET', $url); - $this->call('POST', $url, array_merge(['_token' => Session::token()], $data)); + $this->callSecure('GET', $url); + $this->callSecure('POST', $url, array_merge(['_token' => Session::token()], $data)); } // ------------------------------------------------------------------------- diff --git a/tests/TwoFactorLoginFlowTest.php b/tests/TwoFactorLoginFlowTest.php index c7c934da..cff0ff0f 100644 --- a/tests/TwoFactorLoginFlowTest.php +++ b/tests/TwoFactorLoginFlowTest.php @@ -16,6 +16,7 @@ use App\libs\Auth\Models\TwoFactorAuditLog; use App\libs\Auth\Models\UserRecoveryCode; use App\libs\Auth\Models\UserTrustedDevice; +use App\Mail\OAuth2PasswordlessOTPMail; use App\Services\Auth\IDeviceTrustService; use App\Services\Auth\ITwoFactorAuditService; use Auth\AuthHelper; @@ -26,6 +27,7 @@ use Illuminate\Support\Facades\Config; use Illuminate\Support\Facades\DB; use Illuminate\Support\Facades\Hash; +use Illuminate\Support\Facades\Mail; use Illuminate\Support\Facades\Session; use App\libs\OAuth2\Repositories\IOAuth2OTPRepository; use Auth\Repositories\IUserRecoveryCodeRepository; @@ -363,6 +365,33 @@ public function testCancelClearsPasswordlessOtpSessionState(): void $this->assertNull(Session::get('user_is_active')); } + // ------------------------------------------------------------------------- + // email delivery + // ------------------------------------------------------------------------- + + public function testMFAChallengeQueuesEmailWithCorrectOTPCode(): void + { + $this->postLogin(self::ADMIN_EMAIL, self::SEED_PASSWORD); + + $dbCode = $this->latestOtpCode(self::ADMIN_EMAIL); + + Mail::assertQueued( + OAuth2PasswordlessOTPMail::class, + function (OAuth2PasswordlessOTPMail $mail) use ($dbCode): bool { + return $mail->email === self::ADMIN_EMAIL + && $mail->otp === $dbCode; + } + ); + } + + public function testResendMFAChallengeQueuesAdditionalEmail(): void + { + $this->postLogin(self::ADMIN_EMAIL, self::SEED_PASSWORD); + $this->resend(); + + Mail::assertQueued(OAuth2PasswordlessOTPMail::class, 2); + } + // ------------------------------------------------------------------------- // verify2FA // ------------------------------------------------------------------------- @@ -453,7 +482,12 @@ public function testOTPCodeRejectsReuseAfterSuccessfulVerification(): void public function testRecoveryCodeRejectsReuseAfterTransactionCommit(): void { $admin = $this->user(self::ADMIN_EMAIL); - $plain = 'RECOVERY-REUSE-TX-' . uniqid(); + // No "-" and all-uppercase: verifyRecoveryCode() now strips separators + // and uppercases the submitted code before Hash::check() (real codes are + // hashed dash-less and all-uppercase; the dash/case are display-only), + // so a fixture hashed with lowercase uniqid() hex would never match its + // own (normalized) submission. + $plain = 'RECOVERYREUSETX' . strtoupper(uniqid()); $this->createRecoveryCode($admin, $plain, false); // First use โ€” must succeed. @@ -574,7 +608,7 @@ public function testOTPRedeemRowLockBlocksConcurrentConnection(): void public function testRecoveryCodeRowLockBlocksConcurrentConnection(): void { $admin = $this->user(self::ADMIN_EMAIL); - $plain = 'RECOVERY-LOCK-' . uniqid(); + $plain = 'RECOVERYLOCK' . strtoupper(uniqid()); $codeId = $this->createRecoveryCode($admin, $plain, false); /** @var IUserRecoveryCodeRepository $recoveryRepo */ @@ -754,7 +788,7 @@ public function testRecoveryAuditFailureDoesNotBlockLogin(): void // Audit is best-effort: a failure emitting recovery_used must NOT 500 a // user whose recovery code is already burned and session established. $admin = $this->user(self::ADMIN_EMAIL); - $plain = 'RECOVERY-AUDIT-FAIL-' . uniqid(); + $plain = 'RECOVERYAUDITFAIL' . strtoupper(uniqid()); $this->createRecoveryCode($admin, $plain, false); $auditMock = \Mockery::mock(ITwoFactorAuditService::class); @@ -807,7 +841,7 @@ public function testDeviceTrustFailureDoesNotBlockLogin(): void public function testRecoveryCodeLoginSucceeds(): void { $admin = $this->user(self::ADMIN_EMAIL); - $plain = 'RECOVERY-PLAIN-123'; + $plain = 'RECOVERYPLAIN123'; $codeId = $this->createRecoveryCode($admin, $plain, false); $this->postLogin(self::ADMIN_EMAIL, self::SEED_PASSWORD); @@ -827,7 +861,7 @@ public function testRecoveryCodeLoginSucceeds(): void public function testUsedRecoveryCodeFails(): void { $admin = $this->user(self::ADMIN_EMAIL); - $plain = 'RECOVERY-USED-456'; + $plain = 'RECOVERYUSED456'; $this->createRecoveryCode($admin, $plain, true); // already used $this->postLogin(self::ADMIN_EMAIL, self::SEED_PASSWORD); diff --git a/tests/e2e/fixtures/index.ts b/tests/e2e/fixtures/index.ts new file mode 100644 index 00000000..f6d80a7c --- /dev/null +++ b/tests/e2e/fixtures/index.ts @@ -0,0 +1,87 @@ +import { test as base } from '@playwright/test'; +import { LoginPage } from '../pages/LoginPage'; +import { RegisterPage } from '../pages/RegisterPage'; + +type E2EFixtures = { + loginPage: LoginPage; + registerPage: RegisterPage; + authenticatedPage: LoginPage; +}; + +export const test = base.extend({ + page: async ({ page }, use) => { + // When running inside the Docker playwright container, APP_URL=http://nginx is + // injected by docker-compose. The PHP app bakes http://localhost:8001 into the + // page HTML (asset src attributes and window.*_ENDPOINT globals). Two problems: + // 1. Assets at http://localhost:8001/assets/** โ†’ unreachable from the container. + // 2. XHR to http://localhost:8001/** is cross-origin from http://nginx, so the + // browser omits session cookies โ†’ server returns 419 CSRF error. + // + // Fix A: route.continue rewrite for assets (scripts, images, CSS). + // Fix B: addInitScript intercepts window.*_ENDPOINT assignments before they are + // read by React, rewriting them to http://nginx so XHR is same-origin. + // + // From the host (APP_URL unset or http://localhost:*), no interception is needed. + const internalUrl = process.env.APP_URL; + if (internalUrl && !internalUrl.includes('localhost')) { + // Fix A: rewrite asset URLs. + await page.route(/^http:\/\/localhost(:\d+)?\//, (route) => { + const rewritten = route.request().url() + .replace(/^http:\/\/localhost(:\d+)?/, internalUrl); + route.continue({ url: rewritten }); + }); + + // Fix B: intercept window.*_ENDPOINT property assignments so every XHR + // made by React targets http://nginx (same origin), ensuring the session + // cookie is automatically included and CSRF validation succeeds. + const endpoints = [ + 'VERIFY_ACCOUNT_ENDPOINT', + 'EMIT_OTP_ENDPOINT', + 'RESEND_VERIFICATION_EMAIL_ENDPOINT', + 'VERIFY_2FA_ENDPOINT', + 'RESEND_2FA_ENDPOINT', + 'CANCEL_LOGIN_ENDPOINT', + 'RECOVERY_2FA_ENDPOINT', + 'FORM_ACTION_ENDPOINT', + ]; + await page.addInitScript(({ endpoints, internalUrl }) => { + for (const key of endpoints) { + let _val; + Object.defineProperty(window, key, { + configurable: true, + enumerable: true, + set(v) { + _val = typeof v === 'string' + ? v.replace(/http:\/\/localhost(:\d+)?/, internalUrl) + : v; + }, + get() { return _val; }, + }); + } + }, { endpoints, internalUrl }); + } + await use(page); + }, + + loginPage: async ({ page }, use) => { + await use(new LoginPage(page)); + }, + + registerPage: async ({ page }, use) => { + await use(new RegisterPage(page)); + }, + + // Pre-authenticated session using the raw E2E user (no group memberships, + // so MFA is never enforced and the login completes without a 2FA challenge). + // Override via TEST_USER_EMAIL / TEST_USER_PASSWORD env vars if needed. + authenticatedPage: async ({ page }, use) => { + const loginPage = new LoginPage(page); + await loginPage.login( + process.env.TEST_USER_EMAIL || 'e2e@test.com', + process.env.TEST_USER_PASSWORD || '1Qaz2wsx!' + ); + await use(loginPage); + }, +}); + +export { expect } from '@playwright/test'; diff --git a/tests/e2e/pages/LoginPage.ts b/tests/e2e/pages/LoginPage.ts new file mode 100644 index 00000000..d05b4be0 --- /dev/null +++ b/tests/e2e/pages/LoginPage.ts @@ -0,0 +1,67 @@ +import { type Page, type Locator } from '@playwright/test'; + +export class LoginPage { + readonly page: Page; + readonly emailInput: Locator; + readonly passwordInput: Locator; + // Email step: button has title="Continue" (text is ">") + readonly emailSubmitButton: Locator; + // Password step: button text is "Continue", type="button" (no title) + readonly passwordSubmitButton: Locator; + readonly rememberMeCheckbox: Locator; + readonly errorLabel: Locator; + readonly otpInput: Locator; + // Password step container + readonly passwordForm: Locator; + // Two-factor (MFA) step + readonly twoFactorForm: Locator; + readonly verifyButton: Locator; + readonly resendLink: Locator; + readonly cancelLink: Locator; + readonly useRecoveryLink: Locator; + // Recovery code step + readonly recoveryForm: Locator; + + constructor(page: Page) { + this.page = page; + this.emailInput = page.locator('#email'); + this.passwordInput = page.locator('#password'); + this.emailSubmitButton = page.locator('button[title="Continue"]'); + this.passwordSubmitButton = page.getByRole('button', { name: 'Continue' }); + this.rememberMeCheckbox = page.locator('#remember'); + this.errorLabel = page.locator('[data-testid="error-label"]'); + this.otpInput = page.locator('[data-testid="otp_code"]'); + this.passwordForm = page.locator('[data-testid="password-form"]'); + this.twoFactorForm = page.locator('[data-testid="two-factor-form"]'); + this.verifyButton = page.locator('[data-testid="verify-button"]'); + this.resendLink = page.locator('[data-testid="resend-link"]'); + this.cancelLink = page.locator('[data-testid="cancel-link"]'); + this.useRecoveryLink = page.locator('[data-testid="use-recovery-link"]'); + this.recoveryForm = page.locator('[data-testid="recovery-form"]'); + } + + async goto() { + await this.page.goto('/auth/login'); + } + + async fillEmail(email: string) { + await this.emailInput.fill(email); + await this.emailSubmitButton.click(); + } + + async fillPassword(password: string) { + await this.passwordInput.fill(password); + await this.passwordSubmitButton.click(); + } + + async login(email: string, password: string) { + await this.goto(); + await this.fillEmail(email); + await this.fillPassword(password); + } + + async fillOtp(code: string) { + await this.otpInput.fill(code); + await this.passwordSubmitButton.click(); + } +} diff --git a/tests/e2e/pages/RegisterPage.ts b/tests/e2e/pages/RegisterPage.ts new file mode 100644 index 00000000..1c03f16e --- /dev/null +++ b/tests/e2e/pages/RegisterPage.ts @@ -0,0 +1,57 @@ +import { type Page, type Locator } from '@playwright/test'; + +export class RegisterPage { + readonly page: Page; + readonly firstNameInput: Locator; + readonly lastNameInput: Locator; + readonly emailInput: Locator; + readonly passwordInput: Locator; + readonly passwordConfirmInput: Locator; + readonly codeOfConductCheckbox: Locator; + readonly submitButton: Locator; + // MUI FormHelperText error messages (not CSS-module classes, so not hashed) + readonly errorContainer: Locator; + // SweetAlert2 popup shown for server-side errors (e.g. duplicate email) + readonly swalPopup: Locator; + + constructor(page: Page) { + this.page = page; + this.firstNameInput = page.locator('[name="first_name"]'); + this.lastNameInput = page.locator('[name="last_name"]'); + this.emailInput = page.locator('[name="email"]'); + this.passwordInput = page.locator('[name="password"]'); + this.passwordConfirmInput = page.locator('[name="password_confirmation"]'); + this.codeOfConductCheckbox = page.locator('[name="agree_code_of_conduct"]'); + this.submitButton = page.locator('button[type="submit"]'); + this.errorContainer = page.locator('p.MuiFormHelperText-root.Mui-error').first(); + this.swalPopup = page.locator('.swal2-popup'); + } + + async goto() { + await this.page.goto('/auth/register'); + } + + // MUI Select does not render a native . +const getPasswordInput = () => screen.getByTestId('recovery-codes-current-password').querySelector('input'); + +describe('RecoveryCodesPanel', () => { + beforeEach(() => { + window.sessionStorage.clear(); + jest.clearAllMocks(); + }); + + it('shows the remaining/total count', () => { + render( + + ); + expect(screen.getByTestId('recovery-codes-count')).toHaveTextContent('Recovery Codes: 7 of 10 remaining'); + }); + + it('shows a dismissable low-code warning when remaining is below the threshold', () => { + render( + + ); + expect(screen.getByTestId('low-code-warning')).toBeInTheDocument(); + + fireEvent.click(screen.getByLabelText('dismiss')); + expect(screen.queryByTestId('low-code-warning')).not.toBeInTheDocument(); + }); + + it('does not show the low-code warning when there are enough codes', () => { + render( + + ); + expect(screen.queryByTestId('low-code-warning')).not.toBeInTheDocument(); + }); + + it('respects a custom lowCodeThreshold instead of the default of 3', () => { + // 4 remaining would NOT trigger the default threshold (3), but does with a custom threshold of 5. + render( + + ); + expect(screen.getByTestId('low-code-warning')).toBeInTheDocument(); + }); + + it('respects a custom lower threshold (2 remaining is not below a threshold of 2)', () => { + // With the default threshold (3) this would show the warning; a custom + // threshold of 2 must be honored instead of the hardcoded default. + render( + + ); + expect(screen.queryByTestId('low-code-warning')).not.toBeInTheDocument(); + }); + + it('opens the modal immediately when initialCodes is provided', () => { + const codes = ['AAAA-1111', 'BBBB-2222']; + render( + + ); + expect(screen.getByText('AAAA-1111')).toBeInTheDocument(); + }); + + it('regenerates codes after confirming the current password and opens the modal', async () => { + const newCodes = ['NEW1-CODE', 'NEW2-CODE']; + regenerateRecoveryCodes.mockResolvedValue({response: {recovery_codes: newCodes}}); + + render( + + ); + + fireEvent.click(screen.getByText('Regenerate Codes')); + fireEvent.change(getPasswordInput(), {target: {value: 'my-password'}}); + fireEvent.click(screen.getByTestId('confirm-regenerate-button')); + + expect(regenerateRecoveryCodes).toHaveBeenCalledWith('my-password'); + expect(await screen.findByText('NEW1-CODE')).toBeInTheDocument(); + expect(screen.getByTestId('recovery-codes-count')).toHaveTextContent('Recovery Codes: 2 of 2 remaining'); + }); + + it('shows an error and keeps the existing count when the password is wrong', async () => { + regenerateRecoveryCodes.mockRejectedValue({ + status: 412, + response: {body: {errors: ['current_password is not correct.']}}, + }); + + render( + + ); + + fireEvent.click(screen.getByText('Regenerate Codes')); + fireEvent.change(getPasswordInput(), {target: {value: 'wrong'}}); + fireEvent.click(screen.getByTestId('confirm-regenerate-button')); + + expect(regenerateRecoveryCodes).toHaveBeenCalledWith('wrong'); + await new Promise((resolve) => setImmediate(resolve)); + expect(screen.getByTestId('recovery-codes-count')).toHaveTextContent('Recovery Codes: 7 of 10 remaining'); + }); +}); diff --git a/tests/js/components/two_factor_section.test.js b/tests/js/components/two_factor_section.test.js new file mode 100644 index 00000000..e5e9dfef --- /dev/null +++ b/tests/js/components/two_factor_section.test.js @@ -0,0 +1,48 @@ +import React from 'react'; +import {render, screen, fireEvent} from '@testing-library/react'; +import TwoFactorSection from '../../../resources/js/components/two_factor_section'; +import {enableTwoFactor} from '../../../resources/js/profile/actions'; + +jest.mock('../../../resources/js/profile/actions'); +jest.mock('sweetalert2', () => jest.fn()); + +describe('TwoFactorSection', () => { + beforeEach(() => { + window.sessionStorage.clear(); + jest.clearAllMocks(); + }); + + it('shows the enable button when 2FA is not enabled', () => { + render( + + ); + expect(screen.getByTestId('enable-two-factor-button')).toBeInTheDocument(); + expect(screen.queryByTestId('recovery-codes-count')).not.toBeInTheDocument(); + }); + + it('shows the recovery codes panel when 2FA is already enabled', () => { + render( + + ); + expect(screen.queryByTestId('enable-two-factor-button')).not.toBeInTheDocument(); + expect(screen.getByTestId('recovery-codes-count')).toHaveTextContent('Recovery Codes: 7 of 10 remaining'); + }); + + it('enables 2FA and shows the enrollment codes in the modal', async () => { + const codes = ['AAAA-1111', 'BBBB-2222']; + enableTwoFactor.mockResolvedValue({response: {recovery_codes: codes}}); + + render( + + ); + + fireEvent.click(screen.getByTestId('enable-two-factor-button')); + + expect(enableTwoFactor).toHaveBeenCalledWith('email_otp'); + expect(await screen.findByText('AAAA-1111')).toBeInTheDocument(); + expect(screen.getByTestId('recovery-codes-count')).toHaveTextContent('Recovery Codes: 2 of 2 remaining'); + }); +}); diff --git a/tests/js/login/components/two-factor-form.test.js b/tests/js/login/components/two-factor-form.test.js new file mode 100644 index 00000000..d7278eec --- /dev/null +++ b/tests/js/login/components/two-factor-form.test.js @@ -0,0 +1,56 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import TwoFactorForm from '../../../../resources/js/login/components/two_factor_form'; + +// Suppress the 1-second interval so tests don't bleed real timers into each other. +beforeEach(() => jest.useFakeTimers()); +afterEach(() => jest.useRealTimers()); + +const baseProps = { + otpCode: '123456', + otpError: '', + otpLength: 6, + otpLifetime: 300, + codeVersion: 0, + disableInput: false, + trustDevice: false, + onCodeChange: jest.fn(), + onVerify: jest.fn(), + onTrustDeviceChange: jest.fn(), + onResend: jest.fn(), + onUseRecovery: jest.fn(), + onCancel: jest.fn(), +}; + +describe('TwoFactorForm', () => { + + it('renders countdown when otpLifetime > 0', () => { + render(); + // formatTime(300) โ†’ "5 minutes"; the paragraph reads "Code expires in 5 minutes." + expect(screen.getByText(/Code expires in 5 minutes\./)).toBeInTheDocument(); + expect(screen.queryByText(/has expired/)).not.toBeInTheDocument(); + }); + + it('renders expired state when otpLifetime is 0', () => { + render(); + expect( + screen.getByText(/Your verification code has expired\. Please request a new one\./) + ).toBeInTheDocument(); + expect(screen.queryByText(/Code expires in/)).not.toBeInTheDocument(); + }); + + it('VERIFY button is disabled when otpCode is empty', () => { + render(); + // MUI Button spreads unknown props to its root