feat(mfa): offer passkey enrollment during the login-time MFA setup (#63)

* feat(mfa): offer passkey enrollment during the login-time MFA setup

AuthorizerMFASetup hardcoded passkey: false everywhere it was rendered
with loginContext set (login/signup/OAuth/passkey-primary), and
force-hid the option whenever loginContext was present at all -
because webauthn_registration_options/verify required a bearer token
that doesn't exist until the MFA gate is satisfied. The backend
(authorizerdev/authorizer, authorizerdev/authorizer-js#47) now
supports authenticating that ceremony via the MFA session cookie
instead, so passkey is a real option here.

Also, using the new mfaGate signal on the OAuth/magic-link return
path: route to AuthorizerVerifyOtp for an already-configured factor
instead of always showing the setup screen, and let
AuthorizerPasskeyLogin's verify step render the same challenge form
(previously told the user to sign in with a password instead).

Removed a stale useEffect in AuthorizerVerifyOtp that flagged "Email
or Phone Number is required" on mount even for the legitimate
session-only resolution path these two flows now exercise.

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

* chore(release): bump authorizer-js to 3.3.0-rc.2; v2.2.0-rc.1

Author: lakhansamani

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.2.0-rc.0",
+  "version": "2.2.0-rc.1",
   "license": "MIT",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
@@ -91,7 +91,7 @@
     "typescript": "^5.7.2"
   },
   "dependencies": {
-    "@authorizerdev/authorizer-js": "^3.3.0-rc.1",
+    "@authorizerdev/authorizer-js": "^3.3.0-rc.2",
     "@storybook/preset-scss": "^1.0.3",
     "validator": "^13.11.0"
   }

package.json

@@ -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';
@@ -26,6 +27,7 @@ type MfaOfferData = {
   email: string;
   phone_number: string;
   totpEnrollment: TotpEnrollment | null;
+  passkey: boolean;
   emailOtp: boolean;
   smsOtp: boolean;
   state?: string;
@@ -36,6 +38,7 @@ const initMfaOfferData: MfaOfferData = {
   email: '',
   phone_number: '',
   totpEnrollment: null,
+  passkey: false,
   emailOtp: false,
   smsOtp: false,
 };
@@ -45,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 });
@@ -68,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 });
   };
@@ -124,6 +148,7 @@ export const AuthorizerBasicAuthLogin: FC<{
           email: data.email || ``,
           phone_number: data.phone_number || ``,
           totpEnrollment: step.totpEnrollment,
+          passkey: step.passkey,
           emailOtp: step.emailOtp,
           smsOtp: step.smsOtp,
           state: urlProps?.state,
@@ -204,12 +229,13 @@ export const AuthorizerBasicAuthLogin: FC<{
       <AuthorizerMFASetup
         availableMfaMethods={{
           totp: !!mfaOfferData.totpEnrollment || config.is_totp_mfa_enabled,
-          passkey: false,
+          passkey: mfaOfferData.passkey,
           emailOtp: mfaOfferData.emailOtp,
           smsOtp: mfaOfferData.smsOtp,
         }}
         totpEnrollment={mfaOfferData.totpEnrollment || undefined}
         heading="Set up multi-factor authentication"
+        onBack={() => setMfaOfferData({ ...initMfaOfferData })}
         loginContext={{
           email: mfaOfferData.email,
           phone_number: mfaOfferData.phone_number,
@@ -241,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}
       />
@@ -282,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/AuthorizerBasicAuthLogin.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',
@@ -120,12 +123,13 @@ export const AuthorizerMFASetup: FC<{
     },
     {
       key: 'passkey',
-      available: !!availableMfaMethods.passkey && !loginContext,
+      available: !!availableMfaMethods.passkey,
       icon: <IconPasskey />,
       title: 'Passkey',
       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,15 +309,36 @@ 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 onSuccess={backToList} showCredentials />
+        <AuthorizerPasskeyRegister
+          // showCredentials calls webauthn_credentials, which requires a
+          // bearer token - never available yet during a login-time offer.
+          showCredentials={!loginContext}
+          mfaSetup={
+            loginContext
+              ? {
+                  email: loginContext.email,
+                  phoneNumber: loginContext.phone_number,
+                  state: loginContext.state,
+                }
+              : undefined
+          }
+          onSuccess={(data) => {
+            if (loginContext && data && (data as AuthTokenLike).access_token) {
+              loginContext.onComplete(data as AuthTokenLike);
+              return;
+            }
+            backToList();
+          }}
+        />
       </>
     );
   }
 
   return (
     <>
+      {onBack && <BackLink onClick={onBack} />}
       <p style={{ margin: '10px 0px', fontWeight: 'bold' }}>{heading}</p>
       {notice && (
         <Message
@@ -339,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
@@ -357,7 +389,7 @@ export const AuthorizerMFASetup: FC<{
                   onClick={() => handleSetup(m.key)}
                   style={{ width: 'auto' }}
                 >
-                  Set up
+                  {m.enabled ? 'Manage' : 'Set up'}
                 </StyledButton>
               </div>
             </li>