feat(mfa): passkey login + MFA setup components, shared BackLink

Author: lakhansamani

src/components/AuthorizerBasicAuthLogin.tsx

@@ -8,6 +8,7 @@ import { ButtonAppearance, MessageType, Views } from '../constants';
 import { useAuthorizer } from '../contexts/AuthorizerContext';
 import { StyledButton, StyledFooter, StyledLink } from '../styledComponents';
 import { Message } from './Message';
+import { PasswordInput } from './PasswordInput';
 import { AuthorizerVerifyOtp } from './AuthorizerVerifyOtp';
 import { OtpDataType } from '../types';
 import { AuthorizerMFASetup } from './AuthorizerMFASetup';
@@ -47,12 +48,20 @@ interface InputDataType {
   password: string | null;
 }
 
+export type BasicAuthLoginStep = 'form' | 'mfa-setup' | 'otp-verify' | 'locked';
+
 export const AuthorizerBasicAuthLogin: FC<{
   setView?: (v: Views) => void;
   onLogin?: (data: AuthToken | void) => void;
   urlProps?: Record<string, any>;
   roles?: string[];
-}> = ({ setView, onLogin, urlProps, roles }) => {
+  // Fired whenever this component switches between its own screens. See
+  // AuthorizerSignup's identical prop for why hosts need this: a successful
+  // login that still needs MFA setup/verification takes over the whole
+  // login surface - other login options (social buttons, passkey button)
+  // don't belong stacked on top of those screens.
+  onStepChange?: (step: BasicAuthLoginStep) => void;
+}> = ({ setView, onLogin, urlProps, roles, onStepChange }) => {
   const [error, setError] = useState(``);
   const [loading, setLoading] = useState(false);
   const [otpData, setOtpData] = useState<OtpDataType>({ ...initOtpData });
@@ -70,6 +79,19 @@ export const AuthorizerBasicAuthLogin: FC<{
   });
   const { setAuthData, config, authorizerRef } = useAuthorizer();
 
+  useEffect(() => {
+    if (!onStepChange) return;
+    if (locked) {
+      onStepChange('locked');
+    } else if (mfaOfferData.is_screen_visible) {
+      onStepChange('mfa-setup');
+    } else if (otpData.is_screen_visible) {
+      onStepChange('otp-verify');
+    } else {
+      onStepChange('form');
+    }
+  }, [locked, mfaOfferData.is_screen_visible, otpData.is_screen_visible]);
+
   const onInputChange = async (field: string, value: string) => {
     setFormData({ ...formData, [field]: value });
   };
@@ -213,6 +235,7 @@ export const AuthorizerBasicAuthLogin: FC<{
         }}
         totpEnrollment={mfaOfferData.totpEnrollment || undefined}
         heading="Set up multi-factor authentication"
+        onBack={() => setMfaOfferData({ ...initMfaOfferData })}
         loginContext={{
           email: mfaOfferData.email,
           phone_number: mfaOfferData.phone_number,
@@ -244,6 +267,7 @@ export const AuthorizerBasicAuthLogin: FC<{
           is_totp: otpData.is_totp || false,
           offerWebauthnVerify: otpData.offer_webauthn_verify || false,
           hasCodeFactor: otpData.has_code_factor || false,
+          onBack: () => setOtpData({ ...initOtpData }),
         }}
         urlProps={urlProps}
       />
@@ -285,28 +309,15 @@ export const AuthorizerBasicAuthLogin: FC<{
               </div>
             )}
           </div>
-          <div className="styled-form-group">
-            <label
-              className="form-input-label"
-              htmlFor="authorizer-login-password"
-            >
-              <span>* </span>Password
-            </label>
-            <input
-              name="password"
-              id="authorizer-login-password"
-              className={`form-input-field ${
-                errorData.password ? 'input-error-content' : ''
-              }`}
-              placeholder="********"
-              type="password"
-              value={formData.password || ''}
-              onChange={e => onInputChange('password', e.target.value)}
-            />
-            {errorData.password && (
-              <div className="form-input-error">{errorData.password}</div>
-            )}
-          </div>
+          <PasswordInput
+            id="authorizer-login-password"
+            name="password"
+            label="Password"
+            autoComplete="current-password"
+            value={formData.password || ''}
+            onChange={(value) => onInputChange('password', value)}
+            error={errorData.password}
+          />
           <br />
           <StyledButton
             type="submit"

src/components/AuthorizerMFASetup.tsx

@@ -11,23 +11,13 @@ import {
 } from '../icons/mfa';
 import { StyledButton } from '../styledComponents';
 import { Message } from './Message';
+import { BackLink } from './BackLink';
 import { AuthorizerTOTPScanner } from './AuthorizerTOTPScanner';
 import { AuthorizerPasskeyRegister } from './AuthorizerPasskeyRegister';
 import { AuthorizerVerifyOtp } from './AuthorizerVerifyOtp';
 import { useAuthorizer } from '../contexts/AuthorizerContext';
 import { TotpEnrollment } from '../utils/mfaTriage';
 
-const BackLink: FC<{ onClick: () => void }> = ({ onClick }) => (
-  <button
-    type="button"
-    className="mfa-icon-button"
-    onClick={onClick}
-    style={{ border: 'none', background: 'none', padding: '4px 0' }}
-  >
-    &larr; All methods
-  </button>
-);
-
 export type MfaMethod = 'totp' | 'passkey' | 'email_otp' | 'sms_otp';
 
 // Which MFA methods the server offers. This shape is designed to map 1:1
@@ -76,12 +66,24 @@ export const AuthorizerMFASetup: FC<{
     state?: string;
     onComplete: (response: AuthTokenLike) => void;
   };
+  // When present, a "Back" link is shown on the top-level method list so the
+  // host can let the user leave MFA setup entirely (distinct from BackLink's
+  // existing "All methods" links, which only return from a method's
+  // sub-flow to this same list).
+  onBack?: () => void;
+  // Whether the signed-in user already has at least one passkey registered
+  // (the host knows this via webauthnCredentials - there's no per-user
+  // enrolment signal for TOTP/email-OTP/SMS-OTP available to the client, so
+  // only passkey can be accurately highlighted as already set up).
+  passkeyRegistered?: boolean;
 }> = ({
   availableMfaMethods,
   totpEnrollment,
   onSetupMethod,
   heading = 'Add a second step to sign in',
   loginContext,
+  onBack,
+  passkeyRegistered,
 }) => {
   const [selected, setSelected] = useState<MfaMethod | null>(null);
   const [notice, setNotice] = useState('');
@@ -110,6 +112,7 @@ export const AuthorizerMFASetup: FC<{
     description: string;
     disabled?: boolean;
     disabledReason?: string;
+    enabled?: boolean;
   }[] = [
     {
       key: 'totp',
@@ -126,6 +129,7 @@ export const AuthorizerMFASetup: FC<{
       description: 'Sign in with your fingerprint, face, or device PIN.',
       disabled: !passkeySupported,
       disabledReason: 'Not supported on this browser or device.',
+      enabled: !!passkeyRegistered,
     },
     {
       key: 'email_otp',
@@ -264,12 +268,11 @@ export const AuthorizerMFASetup: FC<{
   if (selected === 'totp' && effectiveTotpEnrollment) {
     return (
       <>
-        <BackLink onClick={backToList} />
+        <BackLink onClick={backToList} label="All methods" />
         <AuthorizerTOTPScanner
           {...effectiveTotpEnrollment}
           email={loginContext?.email}
           phone_number={loginContext?.phone_number}
-          setView={backToList}
           onLogin={(data) => {
             if (loginContext && data && (data as AuthTokenLike).access_token) {
               loginContext.onComplete(data as AuthTokenLike);
@@ -285,7 +288,7 @@ export const AuthorizerMFASetup: FC<{
   if (otpMethodPending) {
     return (
       <>
-        <BackLink onClick={() => setOtpMethodPending(null)} />
+        <BackLink onClick={() => setOtpMethodPending(null)} label="All methods" />
         <AuthorizerVerifyOtp
           email={loginContext?.email}
           phone_number={loginContext?.phone_number}
@@ -306,7 +309,7 @@ export const AuthorizerMFASetup: FC<{
   if (selected === 'passkey') {
     return (
       <>
-        <BackLink onClick={backToList} />
+        <BackLink onClick={backToList} label="All methods" />
         <p style={{ margin: '10px 0px', fontWeight: 'bold' }}>Add a passkey</p>
         <AuthorizerPasskeyRegister
           // showCredentials calls webauthn_credentials, which requires a
@@ -335,6 +338,7 @@ export const AuthorizerMFASetup: FC<{
 
   return (
     <>
+      {onBack && <BackLink onClick={onBack} />}
       <p style={{ margin: '10px 0px', fontWeight: 'bold' }}>{heading}</p>
       {notice && (
         <Message
@@ -359,10 +363,18 @@ export const AuthorizerMFASetup: FC<{
       ) : (
         <ul className="mfa-list" aria-label="Available multi-factor methods">
           {visibleMethods.map((m) => (
-            <li key={m.key} className="mfa-method">
+            <li
+              key={m.key}
+              className={`mfa-method${m.enabled ? ' mfa-method-enabled' : ''}`}
+            >
               <span className="mfa-method-icon">{m.icon}</span>
               <div className="mfa-method-body">
-                <p className="mfa-method-title">{m.title}</p>
+                <p className="mfa-method-title">
+                  {m.title}
+                  {m.enabled && (
+                    <span className="mfa-method-badge">Enabled</span>
+                  )}
+                </p>
                 <p className="mfa-method-desc">
                   {m.disabled && m.disabledReason
                     ? m.disabledReason
@@ -377,7 +389,7 @@ export const AuthorizerMFASetup: FC<{
                   onClick={() => handleSetup(m.key)}
                   style={{ width: 'auto' }}
                 >
-                  Set up
+                  {m.enabled ? 'Manage' : 'Set up'}
                 </StyledButton>
               </div>
             </li>

src/components/AuthorizerPasskeyLogin.tsx

@@ -1,4 +1,4 @@
-import { FC, useState } from 'react';
+import { FC, useEffect, useState } from 'react';
 import { AuthToken, isWebauthnSupported } from '@authorizerdev/authorizer-js';
 
 import '../styles/default.css';
@@ -46,12 +46,31 @@ const PasskeyIcon: FC = () => (
 
 export const AuthorizerPasskeyLogin: FC<{
   onLogin?: (data: AuthToken | void) => void;
-}> = ({ onLogin }) => {
+  // Fired whenever this component switches between its own button and its
+  // internal MFA offer/verify/locked screens. A passkey-primary login that
+  // needs a second factor takes over the whole login surface - hosts
+  // rendering other login options (social buttons, password form) alongside
+  // this component need this to hide them while an MFA screen is showing.
+  onStepChange?: (step: 'button' | 'mfa-setup' | 'mfa-verify' | 'locked') => void;
+}> = ({ onLogin, onStepChange }) => {
   const [error, setError] = useState(``);
   const [loading, setLoading] = useState(false);
   const [mfaStep, setMfaStep] = useState<AuthStep | null>(null);
   const { setAuthData, config, authorizerRef } = useAuthorizer();
 
+  useEffect(() => {
+    if (!onStepChange) return;
+    if (mfaStep?.kind === 'locked') {
+      onStepChange('locked');
+    } else if (mfaStep?.kind === 'offer') {
+      onStepChange('mfa-setup');
+    } else if (mfaStep?.kind === 'verify') {
+      onStepChange('mfa-verify');
+    } else {
+      onStepChange('button');
+    }
+  }, [mfaStep?.kind]);
+
   // When the org enforces MFA, passkey must never be offered as a
   // standalone primary-login path - it would let a user skip the org's
   // two-factor requirement entirely. The server refuses this independently
@@ -69,22 +88,17 @@ export const AuthorizerPasskeyLogin: FC<{
   // exact set of conditions AuthorizerRoot uses to decide whether
   // AuthorizerSocialLogin, AuthorizerBasicAuthLogin, or
   // AuthorizerMagicLinkLogin render anything on the login view.
-  const hasSocialLogin =
-    config.is_google_login_enabled ||
-    config.is_github_login_enabled ||
-    config.is_facebook_login_enabled ||
-    config.is_linkedin_login_enabled ||
-    config.is_apple_login_enabled ||
-    config.is_twitter_login_enabled ||
-    config.is_microsoft_login_enabled ||
-    config.is_twitch_login_enabled ||
-    config.is_roblox_login_enabled;
+  // Deliberately excludes hasSocialLogin: social login always renders above
+  // this button in every known composition (AuthorizerRoot, web/app's
+  // login.tsx), so it's never "below" the passkey button - counting it here
+  // produced a second, redundant "OR" stacked under the first one AND a
+  // dangling "OR" with nothing beneath when social was the only other method.
   const hasBasicAuthLogin =
     (config.is_basic_authentication_enabled ||
       config.is_mobile_basic_authentication_enabled) &&
     !config.is_magic_link_login_enabled;
   const hasAnotherLoginMethod =
-    hasSocialLogin || hasBasicAuthLogin || config.is_magic_link_login_enabled;
+    hasBasicAuthLogin || config.is_magic_link_login_enabled;
 
   // A cancelled ceremony or an account with no passkey surfaces as
   // NotAllowedError/AbortError (the browser deliberately does not distinguish
@@ -149,6 +163,7 @@ export const AuthorizerPasskeyLogin: FC<{
         }}
         totpEnrollment={mfaStep.totpEnrollment || undefined}
         heading="Set up multi-factor authentication"
+        onBack={() => setMfaStep(null)}
         loginContext={{
           onComplete: (data) => {
             setAuthData({
@@ -176,6 +191,7 @@ export const AuthorizerPasskeyLogin: FC<{
         is_totp={mfaStep.totp}
         offerWebauthnVerify={mfaStep.webauthn}
         hasCodeFactor={mfaStep.totp || mfaStep.email || mfaStep.mobile}
+        onBack={() => setMfaStep(null)}
         onLogin={(data) => {
           setAuthData({
             user: data?.user || null,