@visns-studio/visns-components 6.6.3 → 6.15.0

package/src/components/auth/ClientOTPVerify.jsx

@@ -1,50 +1,327 @@
 import '../styles/global.css';
 
-import React, { useState, useEffect } from 'react';
-import { useNavigate, useLocation } from 'react-router-dom';
+import React, { useEffect, useMemo, useState } from 'react';
 import { toast } from 'react-toastify';
 import { Lock, ArrowLeft } from 'lucide-react';
 
 import CustomFetch from '../Fetch';
+import useOptionalRouter from './useOptionalRouter';
+import ClientAuthFrame from './ClientAuthFrame';
+import { resolveClientPaths } from './authEndpoints';
+import {
+    OTP_LENGTH,
+    clampOtp,
+    isCompleteOtp,
+    maskContact,
+    normaliseAuthError,
+    resendLabelFor,
+    syncCsrfFromResponse,
+} from './authHelpers';
+import { resolveClientProtocol, verifyContactFor } from './clientAuthProtocols';
 
 import styles from '../styles/ClientAuth.module.scss';
 
+/**
+ * Client portal sign-in, step two: enter the code that was sent.
+ *
+ * Four things here are configurable rather than assumed, each because it
+ * blocked the Next.js portal's adoption in 6.7.0:
+ *
+ *   - the WIRE PROTOCOL (`protocol`). The verify body used to be a hardcoded
+ *     `{email, uuid, otp, previous_url}` and success used to mean
+ *     `body.success`. ThroughLife's login-otp wants
+ *     `{contact, otp_code, minimal_response}` and signals success with
+ *     `error: ''` — under the old code a correct code read as a wrong one.
+ *   - the CHALLENGE (`challenge`). This screen used to demand a `uuid` from
+ *     router state and bounce back to step one without one. The contact
+ *     protocol has no uuid at all, so what a challenge must contain is the
+ *     protocol's business (`requiresChallengeId`), and where it comes from is
+ *     the consumer's.
+ *   - the SESSION (`onAuthenticated`). The bearer token that login-otp returns
+ *     never left the component, so a consumer had nothing to put in its
+ *     cookie. It is handed over now, alongside the user and the raw response.
+ *   - NAVIGATION (`onNavigate`, `onBack`), because react-router is not a given.
+ *
+ * With none of those passed, this renders and behaves exactly as 6.6.3 did.
+ */
+
+const DEFAULT_COPY = {
+    title: 'Verification Code',
+    subtitle: 'Please enter the 6-digit code sent to your email address:',
+    fieldLabel: 'Verification Code',
+    placeholder: 'Enter 6-digit code',
+    /** `showContactField` only. `{contact}` is the masked destination. */
+    contactFieldLabel: 'Contact',
+    sentTo: 'Code sent to: {contact}',
+    resendPrompt: "Didn't receive the code?",
+    resend: 'Resend Code',
+    /** The link's own label while a resend request is in flight. */
+    resendingLabel: 'Sending…',
+    /** `{seconds}` is substituted while a cooldown is running. */
+    resendIn: 'Resend in {seconds}s',
+    back: 'Back to Login',
+    devOtpLabel: 'DEV MODE - OTP',
+    devOtpAction: 'Auto-fill OTP',
+    /** Client-side validation. */
+    invalidLength: 'Please enter a valid 6-digit code',
+    /** Fallbacks when the server declines without saying why. */
+    invalidCode: 'Invalid verification code',
+    resendFailed:
+        'Could not resend verification code. Please try again later.',
+    verifying: 'Verifying code...',
+    resending: 'Resending verification code...',
+    resent: 'Verification code resent to your email',
+    success: 'Login successful!',
+};
+
+/**
+ * Button labels — the 6.6.3 strings. An app wanting the portal's wording asks
+ * for it: labels={{ submit: 'Login', submitting: 'Please wait...' }}.
+ */
+const DEFAULT_LABELS = {
+    submit: 'Verify',
+    submitting: 'Verifying...',
+};
+
+/** Simple `{token}` substitution, so copy stays one readable string. */
+const fill = (template, values) =>
+    String(template ?? '').replace(/\{(\w+)\}/g, (match, key) =>
+        Object.prototype.hasOwnProperty.call(values, key)
+            ? String(values[key])
+            : match
+    );
+
 const ClientOTPVerify = ({
     logo,
     setSystemAuth,
     setUserProfile,
+    /** Endpoint map — `urls.verify` and `urls.login` (for the resend). */
     urls = {},
+    /** Route paths; `/client/*` unless overridden. See authEndpoints.js. */
+    paths,
+    /**
+     * Wire protocol: `'uuid'` (default, unchanged) or `'contact'` for
+     * ThroughLife's `/api/auth/*`. An object of overrides is accepted too.
+     */
+    protocol,
+    /**
+     * The challenge from step one, as ClientLogin's `onChallengeIssued` hands
+     * it over. Supplying it is what lets this screen render outside a router —
+     * without it, router state is read instead (the 6.6.3 hand-off).
+     */
+    challenge: challengeProp,
+    /** Merged over DEFAULT_COPY. */
+    copy: copyOverrides,
+    /** Merged over DEFAULT_LABELS. */
+    labels: labelOverrides,
+    /**
+     * Seconds to keep Resend disabled after a successful send. 60 is what the
+     * component has always done; the portal's own page has no cooldown at all,
+     * so pass 0 for parity with it.
+     */
+    resendCooldown = 60,
+    /** Show the server's `masked_contact` instead of the raw identifier. */
+    showMaskedContact = false,
+    /**
+     * Render a disabled contact field above the code field, echoing who is
+     * signing in, with the masked destination captioned beneath it — the
+     * layout the portal's own OTP step used before it adopted this component.
+     * The destination moves out of the sub-line when this is on, so it is
+     * never said twice.
+     */
+    showContactField = false,
+    /** Development-only OTP panel with an auto-fill button. */
+    showDevOtp = false,
+    /** Return to step one with the contact field still filled in. */
+    backKeepsContact = false,
+    /** Overrides the protocol's request-body key for the identifier. */
+    contactField,
+    /**
+     * `contact` protocol only: ask for the whitelisted user payload, which is
+     * small enough to live in a cookie. Pass false for the full model.
+     */
+    minimalResponse = true,
+    /**
+     * Called on a successful verification with `(user, token, rawResponse)`.
+     *
+     * WHEN THIS IS PRESENT THE COMPONENT DOES NOTHING ELSE: no setUserProfile,
+     * no setSystemAuth, no navigation. The consumer owns the session and where
+     * the browser goes, which is the only way an app can write its own cookie
+     * from the bearer token this screen receives. An app that wants the
+     * library's own behaviour simply does not pass it.
+     *
+     * `token` is null under the `uuid` protocol, whose backend sets a cookie
+     * server-side and returns no bearer token.
+     */
+    onAuthenticated,
+    /**
+     * The back link's action. When present it replaces the navigation to step
+     * one entirely — a single-page consumer clears its challenge state here.
+     * Receives the challenge, so it can restore what was typed.
+     */
+    onBack,
+    /**
+     * Navigation, when this screen still owns it. `(path, options) => void`.
+     * Falls back to react-router's navigate, then to a plain page load.
+     */
+    onNavigate,
+    /** Notified with the normalised message when a request is declined. */
+    onError,
+    /**
+     * 'card' (default, unchanged) or 'split' — the two-pane brand layout. See
+     * ClientAuthFrame; every field, hint and panel below is identical either
+     * way, including the contact field and the dev-OTP panel.
+     */
+    layout = 'card',
+    /** Split layout: the brand panel's photograph. */
+    loginBg,
+    /** Split layout: {eyebrow, name, tagline, footer}. */
+    branding,
 }) => {
-    const navigate = useNavigate();
-    const location = useLocation();
+    const { navigate, location } = useOptionalRouter();
+
+    const routes = resolveClientPaths(paths);
+    const wire = resolveClientProtocol(protocol);
+    const copy = { ...DEFAULT_COPY, ...(copyOverrides || {}) };
+    const labels = { ...DEFAULT_LABELS, ...(labelOverrides || {}) };
+    const field = contactField || wire.contactField;
+
+    /**
+     * The challenge, from the prop when there is one and from router state
+     * otherwise. The router-state branch reads the individual keys 6.6.3 wrote
+     * as well as the whole `challenge` object 6.8.0 writes, so a half-upgraded
+     * app — new verify screen, old login screen still in the bundle — still
+     * finds what it needs.
+     */
+    const challenge = useMemo(() => {
+        if (challengeProp) {
+            return challengeProp;
+        }
+
+        const state = location?.state;
+
+        if (!state) {
+            return null;
+        }
+
+        if (state.challenge) {
+            return state.challenge;
+        }
+
+        const rawContact = state.email ?? null;
+
+        if (!rawContact) {
+            return null;
+        }
+
+        return {
+            contact: state.contact ?? rawContact,
+            rawContact,
+            challengeId: state.uuid ?? null,
+            maskedContact: state.maskedContact ?? state.masked_contact ?? '',
+            contactMethod: state.contactMethod ?? state.contact_method ?? '',
+            devOtp: state.otp ?? null,
+            message: '',
+            previousUrl: state.previousUrl ?? '',
+        };
+    }, [challengeProp, location?.state]);
+
     const [isLoading, setIsLoading] = useState(false);
+    // Raised on a successful verification and never lowered: everything after
+    // that point leads somewhere else.
+    const [isLeaving, setIsLeaving] = useState(false);
+    const [verificationCode, setVerificationCode] = useState('');
+    const [codeClass, setCodeClass] = useState('');
+    const [resendDisabled, setResendDisabled] = useState(false);
+    const [isResending, setIsResending] = useState(false);
+    const [countdown, setCountdown] = useState(0);
+    // A resend under the contact protocol replaces the challenge (new masked
+    // contact, new dev OTP) without any navigation to carry it.
+    const [refreshed, setRefreshed] = useState(null);
+
+    // Anything in flight, or the screen on its way out. Every control keys off
+    // this, so no action here can be started twice.
+    const isBusy = isLoading || isLeaving;
+
+    const live = refreshed || challenge;
+    const rawContact = live?.rawContact ?? live?.contact ?? null;
+    const previousUrl = live?.previousUrl ?? '';
+    const devOtp = live?.devOtp ?? null;
+
+    /**
+     * Is there a challenge to answer at all?
+     *
+     * Under `uuid` a challenge without its id is useless, which is why the old
+     * code demanded one. Under `contact` there is no id in the contract, so
+     * demanding one bounced every user straight back to step one — the portal's
+     * first blocker. The protocol decides.
+     */
+    const hasChallenge = Boolean(
+        rawContact && (!wire.requiresChallengeId || live?.challengeId)
+    );
 
-    // Get data from location state
-    const email = location.state?.email || null;
-    const uuid = location.state?.uuid || null;
-    const previousUrl = location.state?.previousUrl || '';
-    const devOtp = location.state?.otp || null; // For development testing
+    /** Move, by whichever mechanism this app actually has. */
+    const go = (path, options) => {
+        if (typeof onNavigate === 'function') {
+            onNavigate(path, options);
 
-    // If no email or uuid, redirect to client login
+            return;
+        }
+
+        if (navigate) {
+            navigate(path, options);
+
+            return;
+        }
+
+        if (typeof window !== 'undefined') {
+            window.location.href = path;
+        }
+    };
+
+    /**
+     * Back to step one. With `onBack` the consumer owns it; otherwise the
+     * navigation happens here, carrying the identifier when
+     * `backKeepsContact` is set so retyping a mobile number to correct a
+     * mistyped code is not a second chore.
+     */
+    const handleBack = () => {
+        if (isBusy) {
+            return;
+        }
+
+        if (typeof onBack === 'function') {
+            onBack(live);
+
+            return;
+        }
+
+        go(
+            routes.login,
+            backKeepsContact ? { state: { email: rawContact } } : undefined
+        );
+    };
+
+    // Arriving without a usable challenge means there is nothing to answer.
+    // Only ever navigates when this screen owns navigation: a consumer holding
+    // the challenge in its own state renders step one instead of this, and
+    // must not be bounced by a screen it did not ask to mount.
     useEffect(() => {
-        if (!email || !uuid) {
-            const loginUrl = '/client/login';
-            navigate(loginUrl);
+        if (hasChallenge || challengeProp || typeof onBack === 'function') {
+            return;
         }
-    }, [email, uuid, navigate]);
+
+        go(routes.login);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [hasChallenge, challengeProp, routes.login]);
 
     // Auto-fill OTP in development mode
     useEffect(() => {
         if (process.env.NODE_ENV === 'development' && devOtp) {
-            setVerificationCode(devOtp);
+            setVerificationCode(clampOtp(devOtp, OTP_LENGTH));
         }
     }, [devOtp]);
 
-    const [verificationCode, setVerificationCode] = useState('');
-    const [codeClass, setCodeClass] = useState('');
-    const [resendDisabled, setResendDisabled] = useState(false);
-    const [countdown, setCountdown] = useState(0);
-
     useEffect(() => {
         let timer;
         if (countdown > 0) {
@@ -55,62 +332,130 @@ const ClientOTPVerify = ({
         return () => clearTimeout(timer);
     }, [countdown]);
 
+    /** What the code was sent to, as the screen should say it. */
+    const destination = showMaskedContact
+        ? live?.maskedContact || maskContact(rawContact)
+        : rawContact;
+
+    /**
+     * The masked form, for the "Code sent to: …" line under the contact field.
+     * Unlike `destination` this does not consult `showMaskedContact`: that prop
+     * chooses what the sub-line says, and in this layout the sub-line has been
+     * replaced by the field, whose caption is masked either way.
+     */
+    const maskedDestination = live?.maskedContact || maskContact(rawContact);
+
+    /** The dev panel only ever appears outside production. */
+    const canShowDevOtp =
+        showDevOtp && devOtp && process.env.NODE_ENV !== 'production';
+
     const handleChange = (e) => {
-        if (e) {
-            const value = e.target.value;
-            // Only allow digits and limit to 6 characters
-            if (/^\d*$/.test(value) && value.length <= 6) {
-                setVerificationCode(value);
-                setCodeClass('');
-            }
+        if (!e) {
+            return;
         }
+
+        setVerificationCode(clampOtp(e.target.value, OTP_LENGTH));
+        setCodeClass('');
     };
 
-    const handleResendCode = async () => {
-        if (resendDisabled) return;
+    const report = (error, fallback) => {
+        const message = normaliseAuthError(error, fallback);
 
-        setResendDisabled(true);
-        setCountdown(60); // 60 seconds cooldown
+        toast.error(message);
 
-        toast.info('Resending verification code...', { autoClose: 2000 });
+        if (typeof onError === 'function') {
+            onError(message);
+        }
+
+        return message;
+    };
+
+    const handleResendCode = async () => {
+        if (isBusy || resendDisabled || isResending) return;
+
+        // Two separate reasons the link can be inert: the request is in flight
+        // (always), and the cooldown is running (only when one is configured).
+        // Keeping them apart is what lets `resendCooldown={0}` work — the old
+        // code parked `resendDisabled` on a countdown that, set to 0 while
+        // already 0, never re-rendered to clear it.
+        setIsResending(true);
+
+        if (resendCooldown > 0) {
+            setResendDisabled(true);
+            setCountdown(resendCooldown);
+        }
+
+        toast.info(copy.resending, { autoClose: 2000 });
 
         try {
-            const loginUrl = urls.login;
-            const result = await CustomFetch(loginUrl, 'POST', {
-                email: email,
-                resend: true,
-            });
-
-            if (result.data && result.data.success) {
-                toast.success(
-                    result.data.message ||
-                        'Verification code resent to your email'
-                );
-
-                // Update UUID with the new one
-                if (result.data.uuid) {
-                    navigate('/client/verify', {
-                        state: {
-                            email: email,
-                            uuid: result.data.uuid,
-                            previousUrl: previousUrl,
-                            ...(process.env.NODE_ENV === 'development' && {
-                                otp: result.data.otp,
-                            }),
-                        },
-                        replace: true, // Replace current entry in history
-                    });
-                }
-            } else {
-                toast.error(
-                    (result.data && result.data.message) ||
-                        'Could not resend verification code. Please try again later.'
-                );
+            const result = await CustomFetch(
+                urls.login,
+                'POST',
+                wire.requestBody({
+                    contact: live?.contact ?? rawContact,
+                    contactField: field,
+                    previousUrl,
+                    resend: true,
+                })
+            );
+
+            setIsResending(false);
+
+            const body = result.data;
+
+            if (!wire.isSuccess(body)) {
+                report(body, copy.resendFailed);
                 setResendDisabled(false);
                 setCountdown(0);
+
+                return;
+            }
+
+            const read = wire.readChallenge(body);
+
+            toast.success(read.message || copy.resent);
+
+            // A fresh challenge, held locally. The 6.6.3 code re-navigated to
+            // carry it, which only worked because a uuid was the only thing
+            // that changed and a router was always present.
+            const next = {
+                ...live,
+                challengeId: read.challengeId ?? live?.challengeId ?? null,
+                maskedContact: read.maskedContact || live?.maskedContact || '',
+                contactMethod: read.contactMethod || live?.contactMethod || '',
+                devOtp:
+                    process.env.NODE_ENV !== 'production'
+                        ? read.devOtp ?? live?.devOtp ?? null
+                        : null,
+            };
+
+            setRefreshed(next);
+            setVerificationCode('');
+            setCodeClass('');
+
+            // Router state, when that is where this screen's challenge came
+            // from. Local state alone is enough to keep working, but the 6.6.3
+            // screen replaced the history entry so a reload mid-challenge
+            // found the NEW id rather than the spent one — and that is still
+            // worth doing wherever it is possible.
+            if (!challengeProp && navigate && read.challengeId) {
+                navigate(routes.verify, {
+                    replace: true,
+                    state: {
+                        email: rawContact,
+                        contact: next.contact,
+                        uuid: next.challengeId,
+                        challenge: next,
+                        maskedContact: next.maskedContact,
+                        contactMethod: next.contactMethod,
+                        previousUrl,
+                        ...(next.devOtp ? { otp: next.devOtp } : {}),
+                    },
+                });
             }
         } catch (error) {
-            toast.error(String(error));
+            setIsResending(false);
+            report(error, copy.resendFailed);
             setResendDisabled(false);
             setCountdown(0);
         }
@@ -119,74 +464,165 @@ const ClientOTPVerify = ({
     const handleSubmit = async (e) => {
         e.preventDefault();
 
-        if (!verificationCode.trim() || verificationCode.length !== 6) {
+        if (isBusy) {
+            return;
+        }
+
+        if (!isCompleteOtp(verificationCode, OTP_LENGTH)) {
             setCodeClass('inputError');
-            toast.error('Please enter a valid 6-digit code');
+            toast.error(copy.invalidLength);
             return;
         }
 
         setIsLoading(true);
-        toast.info('Verifying code...', { autoClose: 2000 });
+        toast.info(copy.verifying, { autoClose: 2000 });
 
         try {
-            const verifyUrl = urls.verify;
-            const result = await CustomFetch(verifyUrl, 'POST', {
-                email: email,
-                uuid: uuid,
-                otp: verificationCode,
-                previous_url: previousUrl,
-            });
+            const result = await CustomFetch(
+                urls.verify,
+                'POST',
+                wire.verifyBody({
+                    // Which form of the identifier goes on the wire is the
+                    // protocol's call: ThroughLife's login-otp wants the value
+                    // as typed, even though request-otp got the completed one.
+                    contact: verifyContactFor(wire, live),
+                    contactField: field,
+                    code: verificationCode,
+                    challengeId: live?.challengeId ?? null,
+                    previousUrl,
+                    minimalResponse,
+                })
+            );
+
+            const body = result.data;
+
+            // Cleared only on failure: every success path leads off this
+            // screen, and a button that snaps back to "Verify" in between
+            // invites a second submit against a code that has just been spent.
+            if (!wire.isSuccess(body)) {
+                setIsLoading(false);
+                setCodeClass('inputError');
+                report(body, copy.invalidCode);
 
-            setIsLoading(false);
+                return;
+            }
+
+            const session = wire.readSession(body);
+
+            // Same hazard as the staff 2FA screen: under the uuid protocol
+            // this continues into the portal without a reload, so a rotated
+            // token has to reach the meta tag before the consumer's callbacks
+            // start making requests. Inert under the contact protocol, whose
+            // backend authenticates with a bearer token and sends no
+            // csrf_token at all.
+            syncCsrfFromResponse(body);
+
+            toast.success(session.message || copy.success);
+
+            // From here the screen is a waiting room. Raised before the
+            // callback, so a consumer that navigates synchronously inside
+            // `onAuthenticated` still never shows a live-looking form.
+            setIsLeaving(true);
+
+            // The consumer owns the session and the destination. This is the
+            // only path on which the bearer token reaches an app that has to
+            // write it into a cookie.
+            if (typeof onAuthenticated === 'function') {
+                onAuthenticated(session.user, session.token, body);
 
-            // Check if the result contains an error message
-            if (!result.data || !result.data.success) {
-                setCodeClass('inputError');
-                toast.error(
-                    (result.data && result.data.message) ||
-                        'Invalid verification code'
-                );
                 return;
             }
 
-            // Successful verification
-            setUserProfile(result.data.user);
-            toast.success(result.data.message || 'Login successful!');
+            if (typeof setUserProfile === 'function') {
+                setUserProfile(session.user);
+            }
+
+            if (typeof setSystemAuth === 'function') {
+                setSystemAuth(true);
+            }
 
-            // Set authentication state first
-            setSystemAuth(true);
+            if (session.redirectUrl && typeof window !== 'undefined') {
+                window.location.href = session.redirectUrl;
 
-            if (result.data.redirect_url && result.data.redirect_url !== '') {
-                window.location.href = result.data.redirect_url;
-            } else {
-                // Use replace: true to avoid back button issues
-                navigate('/client/portal', { replace: true });
+                return;
             }
+
+            // Use replace: true to avoid back button issues
+            go(routes.portal, { replace: true });
         } catch (error) {
             setIsLoading(false);
             setCodeClass('inputError');
-            toast.error(String(error));
+            report(error, copy.invalidCode);
         }
     };
 
     return (
-        <div className={styles.container}>
-            <div className={styles.loginBox}>
-                <img src={logo} alt="Client Portal" className={styles.logo} />
-
-                <h1 className={styles.title}>Verification Code</h1>
+        <ClientAuthFrame
+            layout={layout}
+            styles={styles}
+            loginBg={loginBg}
+            branding={branding}
+        >
+            <img src={logo} alt="Client Portal" className={styles.logo} />
+
+                <h1 className={styles.title}>{copy.title}</h1>
                 <p className={styles.subtitle}>
-                    Please enter the 6-digit code sent to your email address:{' '}
-                    <span className={styles.emailHighlight}>{email}</span>
+                    {copy.subtitle}
+                    {/* The destination moves into the contact field's caption
+                        when there is one, rather than being said twice. */}
+                    {showContactField ? null : (
+                        <>
+                            {' '}
+                            <span className={styles.emailHighlight}>
+                                {destination}
+                            </span>
+                        </>
+                    )}
                 </p>
 
                 <form onSubmit={handleSubmit}>
+                    {/* A read-only echo of who is signing in, above the code
+                        field. It carries no information the screen does not
+                        already have, which is exactly why it is opt-in — but
+                        on a page reached by typing a contact and then waiting
+                        for a text, seeing that contact still there is what
+                        makes the second step read as the same errand as the
+                        first. Matches the portal's pre-replatform layout. */}
+                    {showContactField ? (
+                        <div className={styles.formGroup}>
+                            <label
+                                htmlFor="otpContact"
+                                className={styles.inputLabel}
+                            >
+                                {copy.contactFieldLabel}
+                            </label>
+                            <input
+                                id="otpContact"
+                                type="text"
+                                name="contact"
+                                value={rawContact || ''}
+                                className={`${styles.input} ${styles.disabledInput}`}
+                                disabled
+                                readOnly
+                                // Never submitted: the verify body is built by
+                                // the protocol from the challenge, not read
+                                // off the form.
+                                tabIndex={-1}
+                            />
+                            <p className={styles.contactInfo}>
+                                {fill(copy.sentTo, {
+                                    contact: maskedDestination,
+                                })}
+                            </p>
+                        </div>
+                    ) : null}
+
                     <div className={styles.formGroup}>
                         <label
                             htmlFor="verificationCode"
                             className={styles.inputLabel}
                         >
-                            Verification Code
+                            {copy.fieldLabel}
                         </label>
                         <input
                             id="verificationCode"
@@ -197,26 +633,50 @@ const ClientOTPVerify = ({
                             className={`${styles.input} ${styles.otpInput} ${
                                 codeClass === 'inputError' ? styles.error : ''
                             }`}
-                            placeholder="Enter 6-digit code"
+                            placeholder={copy.placeholder}
                             autoComplete="one-time-code"
                             inputMode="numeric"
-                            maxLength="6"
+                            maxLength={OTP_LENGTH}
+                            disabled={isBusy}
                         />
                         <span className={styles.inputIcon}>
                             <Lock strokeWidth={2} size={18} />
                         </span>
+
+                        {/* Never in production: `canShowDevOtp` checks
+                            NODE_ENV as well as the opt-in prop, so a build that
+                            leaves the prop on cannot print a live code. */}
+                        {canShowDevOtp ? (
+                            <div className={styles.devOtp}>
+                                <strong>
+                                    {copy.devOtpLabel}: {devOtp}
+                                </strong>
+                                <button
+                                    type="button"
+                                    onClick={() =>
+                                        setVerificationCode(
+                                            clampOtp(devOtp, OTP_LENGTH)
+                                        )
+                                    }
+                                    className={styles.devOtpFill}
+                                    disabled={isBusy}
+                                >
+                                    {copy.devOtpAction}
+                                </button>
+                            </div>
+                        ) : null}
                     </div>
 
                     <button
                         className={styles.button}
                         type="submit"
-                        disabled={isLoading}
+                        disabled={isBusy}
                     >
-                        {isLoading ? 'Verifying...' : 'Verify'}
+                        {isBusy ? labels.submitting : labels.submit}
                     </button>
 
                     <div className={styles.linkText}>
-                        Didn't receive the code?{' '}
+                        {copy.resendPrompt}{' '}
                         <a
                             href="#"
                             onClick={(e) => {
@@ -224,14 +684,26 @@ const ClientOTPVerify = ({
                                 handleResendCode();
                             }}
                             className={
-                                resendDisabled
+                                isBusy || resendDisabled || isResending
                                     ? styles.disabled
                                     : styles.resendLink
                             }
+                            // An <a> cannot be `disabled`; this is what tells
+                            // assistive tech the link is currently inert, and
+                            // the handler refuses to run regardless.
+                            aria-disabled={
+                                isBusy || resendDisabled || isResending
+                            }
                         >
-                            {resendDisabled
-                                ? `Resend in ${countdown}s`
-                                : 'Resend Code'}
+                            {resendLabelFor({
+                                isResending,
+                                countdown,
+                                labels: {
+                                    resending: copy.resendingLabel,
+                                    resendIn: copy.resendIn,
+                                    resend: copy.resend,
+                                },
+                            })}
                         </a>
                     </div>
 
@@ -240,17 +712,17 @@ const ClientOTPVerify = ({
                             href="#"
                             onClick={(e) => {
                                 e.preventDefault();
-                                navigate('/client/login');
+                                handleBack();
                             }}
                             className={styles.backLink}
+                            aria-disabled={isBusy}
                         >
-                            <ArrowLeft strokeWidth={2} size={16} /> Back to
-                            Login
+                            <ArrowLeft strokeWidth={2} size={16} />{' '}
+                            {copy.back}
                         </a>
                     </div>
                 </form>
-            </div>
-        </div>
+        </ClientAuthFrame>
     );
 };