diff --git a/src/features/auth/approve-login.ts b/src/features/auth/approve-login.ts
index f411cb9..ef12d6e 100644
--- a/src/features/auth/approve-login.ts
+++ b/src/features/auth/approve-login.ts
@@ -26,6 +26,7 @@
  */
 
 import type { IHttpClient } from '@domain/interfaces/IHttpClient'
+import type { AvailableMfaMethod } from '@domain/interfaces/IAuthRepository'
 
 export const APPROVE_LOGIN_API = {
     SESSION: '/auth/approve-login/session',
@@ -51,6 +52,18 @@ export interface ApproveLoginPoll {
     refreshToken?: string
     expiresIn?: number
     role?: string
+    /**
+     * When the approved Layer-1 needs further tenant MFA steps, the server
+     * returns an `mfaSessionToken` (and, where available, the next step's
+     * `availableMethods`) instead of final tokens — so the web can continue
+     * into the existing MethodPicker / MfaStepRenderer flow.
+     */
+    mfaRequired?: boolean
+    mfaSessionToken?: string
+    availableMethods?: AvailableMfaMethod[]
+    completedMethods?: string[]
+    currentStep?: number
+    totalSteps?: number
 }
 
 /** How often to poll the session status, in milliseconds. */
diff --git a/src/features/auth/components/ApproveLoginPanel.tsx b/src/features/auth/components/ApproveLoginPanel.tsx
index a54d6c9..c6bad4d 100644
--- a/src/features/auth/components/ApproveLoginPanel.tsx
+++ b/src/features/auth/components/ApproveLoginPanel.tsx
@@ -27,6 +27,7 @@ import { formatApiError } from '@utils/formatApiError'
 import { useService } from '@app/providers'
 import { TYPES } from '@core/di/types'
 import type { IHttpClient } from '@domain/interfaces/IHttpClient'
+import type { Layer1Continuation } from '../login-shared/layer1Continuation'
 import {
     APPROVE_LOGIN_POLL_INTERVAL_MS,
     pollApproveLoginSession,
@@ -47,6 +48,13 @@ export interface ApproveLoginPanelProps {
     initialEmail?: string
     /** Called with tokens when the request is APPROVED on the other device. */
     onApproved: (result: ApproveLoginResult) => void
+    /**
+     * Called when the other device APPROVED Layer 1 but the tenant flow needs
+     * MORE steps: the server returned an `mfaSessionToken` (no final tokens).
+     * The host threads it into the existing MethodPicker / MfaStepRenderer
+     * continuation instead of stranding the user (parity with QrLoginPanel).
+     */
+    onMfaRequired?: (continuation: Layer1Continuation) => void
     /** Dismiss the panel (back to the main login form). */
     onCancel: () => void
 }
@@ -64,6 +72,7 @@ function formatTime(seconds: number): string {
 export default function ApproveLoginPanel({
     initialEmail = '',
     onApproved,
+    onMfaRequired,
     onCancel,
 }: ApproveLoginPanelProps) {
     const { t } = useTranslation()
@@ -79,6 +88,8 @@ export default function ApproveLoginPanel({
     // Keep the approved callback stable for the polling effect.
     const onApprovedRef = useRef(onApproved)
     onApprovedRef.current = onApproved
+    const onMfaRequiredRef = useRef(onMfaRequired)
+    onMfaRequiredRef.current = onMfaRequired
 
     const handleStart = useCallback(async () => {
         const trimmed = email.trim()
@@ -142,6 +153,22 @@ export default function ApproveLoginPanel({
                     expiresIn: poll.expiresIn,
                     role: poll.role,
                 })
+            } else if (
+                poll.status === 'APPROVED' &&
+                poll.mfaSessionToken &&
+                onMfaRequiredRef.current
+            ) {
+                // Approved Layer 1, but the tenant flow needs MORE steps. Hand the
+                // mfaSessionToken (+ next step's availableMethods, when present) up
+                // so the host continues into the existing MethodPicker /
+                // MfaStepRenderer flow — no dead-end (parity with QrLoginPanel).
+                onMfaRequiredRef.current({
+                    mfaSessionToken: poll.mfaSessionToken,
+                    availableMethods: poll.availableMethods,
+                    completedMethods: poll.completedMethods,
+                    currentStep: poll.currentStep,
+                    totalSteps: poll.totalSteps,
+                })
             } else if (poll.status === 'DENIED') {
                 setPhase('denied')
             } else if (poll.status === 'EXPIRED') {
diff --git a/src/features/auth/components/Layer1Shortcuts.tsx b/src/features/auth/components/Layer1Shortcuts.tsx
index d904a4e..1253c73 100644
--- a/src/features/auth/components/Layer1Shortcuts.tsx
+++ b/src/features/auth/components/Layer1Shortcuts.tsx
@@ -2,14 +2,18 @@
  * Layer1Shortcuts — the cross-device sign-in cluster shown on the initial
  * identity-entry screen, beside the email/password form.
  *
- * Three alternatives to typing a password here:
- *   • Passkey — discoverable WebAuthn, fully usernameless (no email typed).
- *   • Approve on another device — number-matching. The ApproveLoginPanel it
- *     opens collects the email itself, so it lives here as a peer affordance
- *     (an earlier note removed it for being "identifier-first"; since the panel
- *     self-collects the email, it's fine as a Layer-1 alternative).
- *   • Sign in with your phone — cross-device QR scan-to-login. The QrLoginPanel
- *     it opens needs no identifier (the scanning phone resolves the user).
+ * Two GROUPS, deliberately separated (F4):
+ *   1. No-typing sign-in (truly usernameless — no identifier needed):
+ *      • Passkey — discoverable WebAuthn, fully usernameless.
+ *      • Sign in with your phone — cross-device QR scan-to-login; the scanning
+ *        phone resolves the user, so nothing is typed here.
+ *   2. Approve from another device — number-matching APPROVE_LOGIN. This one is
+ *      genuinely NOT usernameless (the server needs an identifier to route the
+ *      push; the backend set supports_usernameless=false in V74), so it is split
+ *      OUT of the no-typing group under its own labelled section and labelled to
+ *      make the "enter your email" step explicit, instead of sitting silently
+ *      among the no-typing shortcuts where the later email prompt felt out of
+ *      place (the F4 report).
  *
  * Approve and QR render only when the caller wires `onApproveClick`/`onQrClick`;
  * the caller gates them to the initial identity-entry phase. When no login-config
@@ -21,6 +25,7 @@ import { Button, Divider, Stack, Typography } from '@mui/material'
 import { PhonelinkLock, QrCode2 } from '@mui/icons-material'
 import { useTranslation } from 'react-i18next'
 import PasskeyLoginButton from './PasskeyLoginButton'
+import type { Layer1Continuation } from '../login-shared/layer1Continuation'
 import {
     hasUsernamelessPasskey,
     type LoginConfig,
@@ -43,6 +48,12 @@ interface Layer1ShortcutsProps<T> {
      */
     fallbackAll?: boolean
     onPasskeySuccess: (login: T) => void
+    /**
+     * Passkey satisfied Layer 1 but the tenant flow needs MORE steps — the host
+     * continues into its MethodPicker / MfaStepRenderer flow. Forwarded to
+     * PasskeyLoginButton; optional so existing single-step callers are unaffected.
+     */
+    onPasskeyMfaRequired?: (continuation: Layer1Continuation) => void
     onPasskeyError: (message: string) => void
     /**
      * Open the "Approve on another device" (number-matching) panel. When
@@ -65,6 +76,7 @@ export default function Layer1Shortcuts<T = unknown>({
     config,
     fallbackAll = false,
     onPasskeySuccess,
+    onPasskeyMfaRequired,
     onPasskeyError,
     onApproveClick,
     onQrClick,
@@ -96,24 +108,26 @@ export default function Layer1Shortcuts<T = unknown>({
                 </Divider>
             )}
 
+            {/* Group 1 — no-typing sign-in (truly usernameless). */}
             <Stack spacing={1.5}>
                 {showPasskey && (
                     <PasskeyLoginButton<T>
                         onSuccess={onPasskeySuccess}
+                        onMfaRequired={onPasskeyMfaRequired}
                         onError={onPasskeyError}
                         disabled={disabled}
                         sx={passkeySx}
                     />
                 )}
 
-                {showApprove && (
+                {showQr && (
                     <Button
                         fullWidth
                         variant="outlined"
                         size="large"
-                        onClick={onApproveClick}
+                        onClick={onQrClick}
                         disabled={disabled}
-                        startIcon={<PhonelinkLock />}
+                        startIcon={<QrCode2 />}
                         sx={{
                             py: 1.5,
                             borderRadius: '12px',
@@ -123,18 +137,30 @@ export default function Layer1Shortcuts<T = unknown>({
                             ...passkeySx,
                         }}
                     >
-                        {t('approveLogin.button')}
+                        {t('qrLogin.button')}
                     </Button>
                 )}
+            </Stack>
 
-                {showQr && (
+            {/* Group 2 — approve from another device (needs your email). Split out
+                under its own labelled section so the later email prompt is expected,
+                not a surprise among the no-typing shortcuts (F4). */}
+            {showApprove && (
+                <Stack spacing={0.75} sx={{ mt: 1.5 }}>
+                    <Typography
+                        variant="caption"
+                        color="text.secondary"
+                        sx={{ textAlign: 'center' }}
+                    >
+                        {t('approveLogin.sectionLabel')}
+                    </Typography>
                     <Button
                         fullWidth
                         variant="outlined"
                         size="large"
-                        onClick={onQrClick}
+                        onClick={onApproveClick}
                         disabled={disabled}
-                        startIcon={<QrCode2 />}
+                        startIcon={<PhonelinkLock />}
                         sx={{
                             py: 1.5,
                             borderRadius: '12px',
@@ -144,10 +170,10 @@ export default function Layer1Shortcuts<T = unknown>({
                             ...passkeySx,
                         }}
                     >
-                        {t('qrLogin.button')}
+                        {t('approveLogin.buttonWithEmail')}
                     </Button>
-                )}
-            </Stack>
+                </Stack>
+            )}
         </>
     )
 }
diff --git a/src/features/auth/components/LoginPage.tsx b/src/features/auth/components/LoginPage.tsx
index 01e373b..b464e7e 100644
--- a/src/features/auth/components/LoginPage.tsx
+++ b/src/features/auth/components/LoginPage.tsx
@@ -44,6 +44,7 @@ import ConfigUnavailableBanner from '../login-shared/ConfigUnavailableBanner'
 import Layer1Shortcuts from './Layer1Shortcuts'
 import ApproveLoginPanel, { type ApproveLoginResult } from './ApproveLoginPanel'
 import QrLoginPanel, { type QrLoginResult } from './QrLoginPanel'
+import type { Layer1Continuation } from '../login-shared/layer1Continuation'
 import type { AvailableMfaMethod, MfaStepResponse, IAuthRepository } from '@domain/interfaces/IAuthRepository'
 import type { ITokenService } from '@domain/interfaces/ITokenService'
 import type { IHttpClient } from '@domain/interfaces/IHttpClient'
@@ -544,6 +545,35 @@ export default function LoginPage() {
         [completeTokenLogin],
     )
 
+    // A usernameless Layer-1 method (QR / approve / passkey) satisfied the first
+    // factor, but the tenant flow needs MORE steps: the server returned an
+    // mfaSessionToken (no final tokens). Continue into the EXISTING method-picker
+    // / TwoFactorDispatcher machinery instead of dead-ending (F1 = F3, and the
+    // passkey-success-into-MFA case). Closes whichever alt panel was open.
+    const handleLayer1MfaRequired = useCallback(
+        (continuation: Layer1Continuation) => {
+            setLoginError(null)
+            setShowApproveLogin(false)
+            setShowQrLogin(false)
+            setMfaSessionToken(continuation.mfaSessionToken)
+            setCompletedMfaMethods(continuation.completedMethods ?? [])
+            if (continuation.totalSteps) setFlowTotalSteps(continuation.totalSteps)
+            const methods = continuation.availableMethods ?? []
+            setAvailableMethods(methods)
+            const enrolled = methods.filter((m) => m.enrolled)
+            if (enrolled.length === 1) {
+                // Exactly one next factor → run it directly.
+                setTwoFactorMethod(enrolled[0].methodType)
+                setShowSecondaryAuth(true)
+            } else {
+                // Multiple (pick) or none-reported (server will drive the next
+                // step / the user can cancel) → show the picker.
+                setShowMethodPicker(true)
+            }
+        },
+        [],
+    )
+
     // Step/layer progress (parity with verify.fivucsas LoginMfaFlow). The DASHBOARD
     // login uses the PLATFORM login-config, which reports totalSteps=1 — MFA here is
     // dynamic per-user (not a configured layer), so we can't know upfront. We treat
@@ -601,6 +631,7 @@ export default function LoginPage() {
                     <CardContent sx={{ p: { xs: 3, sm: 4 } }}>
                         <ApproveLoginPanel
                             onApproved={handleApproveLoginApproved}
+                            onMfaRequired={handleLayer1MfaRequired}
                             onCancel={() => setShowApproveLogin(false)}
                         />
                     </CardContent>
@@ -642,6 +673,7 @@ export default function LoginPage() {
                     <CardContent sx={{ p: { xs: 3, sm: 4 } }}>
                         <QrLoginPanel
                             onApproved={handleQrLoginApproved}
+                            onMfaRequired={handleLayer1MfaRequired}
                             onCancel={() => setShowQrLogin(false)}
                         />
                     </CardContent>
@@ -1286,6 +1318,7 @@ export default function LoginPage() {
                                 config={loginConfig}
                                 fallbackAll
                                 onPasskeySuccess={handlePasskeySuccess}
+                                onPasskeyMfaRequired={handleLayer1MfaRequired}
                                 onPasskeyError={(msg) => setLoginError(msg)}
                                 onApproveClick={() => {
                                     setLoginError(null)
diff --git a/src/features/auth/components/PasskeyLoginButton.tsx b/src/features/auth/components/PasskeyLoginButton.tsx
index ebb764f..b6ec6ac 100644
--- a/src/features/auth/components/PasskeyLoginButton.tsx
+++ b/src/features/auth/components/PasskeyLoginButton.tsx
@@ -19,6 +19,8 @@ import { useTranslation } from 'react-i18next'
 import { useService } from '@app/providers'
 import { TYPES } from '@core/di/types'
 import type { IHttpClient } from '@domain/interfaces/IHttpClient'
+import type { AvailableMfaMethod } from '@domain/interfaces/IAuthRepository'
+import type { Layer1Continuation } from '../login-shared/layer1Continuation'
 import { mapWebAuthnError } from '../webauthn-utils'
 import {
     fetchPasskeyOptions,
@@ -28,8 +30,21 @@ import {
 } from '../passkey-login'
 
 export interface PasskeyLoginButtonProps<T = unknown> {
-    /** Called with the raw server login response after a successful assertion. */
+    /**
+     * Called with the raw server login response after a successful assertion
+     * that COMPLETES the login (final tokens present). When the passkey only
+     * satisfied Layer 1 and the tenant flow needs more steps, `onMfaRequired`
+     * is called instead (when wired).
+     */
     onSuccess: (loginResponse: T) => void
+    /**
+     * Called when the passkey satisfied Layer 1 but the tenant flow needs MORE
+     * steps: the server returned an `mfaSessionToken` (no final accessToken).
+     * The host threads it into the existing MethodPicker / MfaStepRenderer
+     * continuation. When omitted, a multi-step response falls through to
+     * `onSuccess` (prior behaviour).
+     */
+    onMfaRequired?: (continuation: Layer1Continuation) => void
     /** Surfaced when the ceremony or server call fails (already localized). */
     onError?: (message: string) => void
     /** Disable while a parent flow is busy (e.g. password submit in flight). */
@@ -38,8 +53,25 @@ export interface PasskeyLoginButtonProps<T = unknown> {
     sx?: Parameters<typeof Button>[0]['sx']
 }
 
+/**
+ * Shape of the fields a passkey-success response may carry when the tenant flow
+ * needs further steps. The server uses the standard login-success envelope
+ * (`twoFactorRequired` / `mfaSessionToken` / `availableMethods`), which the
+ * generic `T` does not expose — so we read them defensively off the raw object.
+ */
+interface PasskeyMultiStepFields {
+    accessToken?: string | null
+    twoFactorRequired?: boolean
+    mfaSessionToken?: string | null
+    availableMethods?: AvailableMfaMethod[]
+    completedMethods?: string[]
+    currentStep?: number
+    totalSteps?: number
+}
+
 export default function PasskeyLoginButton<T = unknown>({
     onSuccess,
+    onMfaRequired,
     onError,
     disabled,
     sx,
@@ -68,6 +100,28 @@ export default function PasskeyLoginButton<T = unknown>({
                 options.sessionId,
                 assertion,
             )
+            // Multi-step: the passkey satisfied Layer 1 but the tenant flow needs
+            // more steps. The server returns an mfaSessionToken WITHOUT a final
+            // accessToken. Route into the host's MFA continuation instead of
+            // handing a tokenless response to onSuccess (which would dead-end as
+            // "missing access token"). When no handoff handler is wired, fall
+            // through to onSuccess (prior behaviour).
+            const multi = loginResponse as PasskeyMultiStepFields
+            if (
+                onMfaRequired &&
+                !multi.accessToken &&
+                multi.mfaSessionToken &&
+                (multi.twoFactorRequired || multi.availableMethods?.length)
+            ) {
+                onMfaRequired({
+                    mfaSessionToken: multi.mfaSessionToken,
+                    availableMethods: multi.availableMethods,
+                    completedMethods: multi.completedMethods,
+                    currentStep: multi.currentStep,
+                    totalSteps: multi.totalSteps,
+                })
+                return
+            }
             onSuccess(loginResponse)
         } catch (err) {
             // mapWebAuthnError handles both DOMExceptions (cancel/timeout) and
@@ -78,7 +132,7 @@ export default function PasskeyLoginButton<T = unknown>({
         } finally {
             setBusy(false)
         }
-    }, [busy, supported, httpClient, onSuccess, onError, t])
+    }, [busy, supported, httpClient, onSuccess, onMfaRequired, onError, t])
 
     const button = (
         <Button
diff --git a/src/features/auth/components/QrLoginPanel.tsx b/src/features/auth/components/QrLoginPanel.tsx
index a2c91c6..1a23790 100644
--- a/src/features/auth/components/QrLoginPanel.tsx
+++ b/src/features/auth/components/QrLoginPanel.tsx
@@ -4,8 +4,11 @@
  * The desktop/web half of scan-to-login: create a QR session, render the QR,
  * and poll until an already-signed-in phone scans + approves it. On APPROVED we
  * either hand tokens to the caller (single Layer-1 / engine-off) or — when the
- * tenant flow needs more steps — surface a "continue here" message (the
- * step-up handoff via mfaSessionToken is a tracked follow-up; we never hang).
+ * tenant flow needs more steps — hand the `mfaSessionToken` (+ the next step's
+ * `availableMethods`, when the server reported them) up via `onMfaRequired` so
+ * the host continues into the existing MethodPicker / MfaStepRenderer flow
+ * (fixes the F1/F3 "approved on phone but web only shows a back button"
+ * dead-end). We never hang.
  *
  * The approver (scan + approve) lives in the mobile/desktop apps; this panel
  * only initiates and polls. Mirrors ApproveLoginPanel.
@@ -27,6 +30,7 @@ import { formatApiError } from '@utils/formatApiError'
 import { useService } from '@app/providers'
 import { TYPES } from '@core/di/types'
 import type { IHttpClient } from '@domain/interfaces/IHttpClient'
+import type { Layer1Continuation } from '../login-shared/layer1Continuation'
 import {
     QR_LOGIN_POLL_INTERVAL_MS,
     pollQrLoginSession,
@@ -46,6 +50,14 @@ export interface QrLoginResult {
 export interface QrLoginPanelProps {
     /** Called with tokens when the sign-in is APPROVED on the phone. */
     onApproved: (result: QrLoginResult) => void
+    /**
+     * Called when the phone APPROVED Layer 1 but the tenant flow needs MORE
+     * steps: the server returned an `mfaSessionToken` (no final tokens). The
+     * host threads it into the existing MethodPicker / MfaStepRenderer
+     * continuation. When omitted, the panel falls back to the prior "continue
+     * here" info message (defensive — all current callers wire this).
+     */
+    onMfaRequired?: (continuation: Layer1Continuation) => void
     /** Dismiss the panel (back to the main login form). */
     onCancel: () => void
 }
@@ -60,7 +72,7 @@ function formatTime(seconds: number): string {
     return `${mins}:${secs.toString().padStart(2, '0')}`
 }
 
-export default function QrLoginPanel({ onApproved, onCancel }: QrLoginPanelProps) {
+export default function QrLoginPanel({ onApproved, onMfaRequired, onCancel }: QrLoginPanelProps) {
     const { t } = useTranslation()
     const httpClient = useService<IHttpClient>(TYPES.HttpClient)
 
@@ -73,6 +85,8 @@ export default function QrLoginPanel({ onApproved, onCancel }: QrLoginPanelProps
 
     const onApprovedRef = useRef(onApproved)
     onApprovedRef.current = onApproved
+    const onMfaRequiredRef = useRef(onMfaRequired)
+    onMfaRequiredRef.current = onMfaRequired
 
     // Create a session (and re-create on restart).
     useEffect(() => {
@@ -136,9 +150,21 @@ export default function QrLoginPanel({ onApproved, onCancel }: QrLoginPanelProps
                         expiresIn: poll.expiresIn,
                         role: poll.role,
                     })
+                } else if (poll.mfaSessionToken && onMfaRequiredRef.current) {
+                    // Approved Layer 1, but the tenant flow needs MORE steps.
+                    // Hand the mfaSessionToken (+ the next step's availableMethods,
+                    // when present) up so the host continues into the existing
+                    // MethodPicker / MfaStepRenderer flow — no dead-end (F1/F3).
+                    // Stop polling: the session is now driven by the host.
+                    onMfaRequiredRef.current({
+                        mfaSessionToken: poll.mfaSessionToken,
+                        availableMethods: poll.availableMethods,
+                        completedMethods: poll.completedMethods,
+                        currentStep: poll.currentStep,
+                        totalSteps: poll.totalSteps,
+                    })
                 } else {
-                    // Approved, but the tenant flow needs more steps. We don't
-                    // (yet) bridge the mfaSessionToken into the step-up flow, so
+                    // Approved but no mfaSessionToken (or no handoff handler wired):
                     // tell the user to continue here rather than hang.
                     setPhase('mfa')
                 }
diff --git a/src/features/auth/components/StepProgress.helpers.tsx b/src/features/auth/components/StepProgress.helpers.tsx
index 81a977c..3f27877 100644
--- a/src/features/auth/components/StepProgress.helpers.tsx
+++ b/src/features/auth/components/StepProgress.helpers.tsx
@@ -13,6 +13,7 @@ import {
     RecordVoiceOver,
     Nfc,
     Key,
+    VpnKey,
 } from '@mui/icons-material'
 import type { TFunction } from 'i18next'
 
@@ -30,6 +31,12 @@ export const METHOD_ICONS: Record<string, React.ReactNode> = {
     voice: <RecordVoiceOver fontSize="small" />,
     nfc_document: <Nfc fontSize="small" />,
     hardware_key: <Key fontSize="small" />,
+    // Device-implicit Layer-1 methods. They are NOT offered in the generic MFA
+    // picker (no MfaStepRenderer case — they have dedicated first-factor entry
+    // points), but they DO appear in StepProgress and any other place a method
+    // icon is looked up, so give them an icon instead of a blank avatar.
+    passkey: <VpnKey fontSize="small" />,
+    approve_login: <PhonelinkLock fontSize="small" />,
 }
 
 /**
diff --git a/src/features/auth/components/steps/MethodPickerStep.tsx b/src/features/auth/components/steps/MethodPickerStep.tsx
index 6f2a83c..d63e669 100644
--- a/src/features/auth/components/steps/MethodPickerStep.tsx
+++ b/src/features/auth/components/steps/MethodPickerStep.tsx
@@ -20,24 +20,23 @@ const METHOD_I18N_KEYS: Record<string, string> = {
 }
 
 /**
- * Device-implicit methods have NO separate web enrollment step — their
- * "enrollment" happens implicitly on the device (PASSKEY = the browser/OS
- * creates the discoverable credential on first use; APPROVE_LOGIN = the user is
- * already signed into the FIVUCSAS mobile app). The Enrollments page
- * deliberately offers NO "Enroll" button for them, so a backend `enrolled:false`
- * here is NOT something the user can fix in Settings.
+ * Methods this generic picker MUST NOT offer, because there is no
+ * `MfaStepRenderer` case for them — selecting one would route into the
+ * renderer's `default:` "Unknown authentication method" dead-end (the F7 bug:
+ * "Bilinmeyen yöntem: APPROVE_LOGIN" + blank icon).
  *
- * Fix #3 (2026-06-03): for these methods we REPLACE the misleading
- * "Not enrolled → Set up in Settings" dead-end (Settings has no enroll flow for
- * them) with an accurate "Set up on your device" affordance. They remain
- * NON-SELECTABLE as a MID-FLOW MFA step for now, because there is no
- * `MfaStepRenderer` case nor a backend `VerifyMfaStepHandler` for
- * APPROVE_LOGIN/PASSKEY — selecting one would route into the renderer's
- * "unknown method" branch (a worse dead-end). Wiring them as a real in-flow
- * factor needs that backend handler first (see report / Fix #4). Reversible:
- * delete this set + the `deviceImplicit` branches to restore prior behaviour.
+ * PASSKEY and APPROVE_LOGIN are NOT generic mid-flow MFA steps: they are
+ * device-implicit Layer-1 factors with DEDICATED first-factor entry points
+ * (`PasskeyLoginButton`, `ApproveLoginPanel`, surfaced via `Layer1Shortcuts`).
+ * The backend may still list them in `availableMethods` (e.g.
+ * `UsernamelessLoginFlowService.ensureApproveLoginEnrollment` auto-enrolls
+ * APPROVE_LOGIN), so we FILTER them OUT here rather than render an unusable
+ * card. The dedicated shortcuts stay; this only stops the picker from offering
+ * a card that can't be rendered.
+ *
+ * Reversible: delete this set + the filter below to restore prior behaviour.
  */
-const DEVICE_IMPLICIT_METHODS: ReadonlySet<string> = new Set([
+const NON_RENDERABLE_METHODS: ReadonlySet<string> = new Set([
     'APPROVE_LOGIN',
     'PASSKEY',
 ])
@@ -110,11 +109,16 @@ export default function MethodPickerStep({
             </Typography>
 
             <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
-                {/* Show ALL of the layer's configured methods — never hide. Each is
-                    in one of three states: selectable (enrolled & not used), "Already
-                    used" (a prior layer), or "Not enrolled". Order: actionable first,
-                    then used, then not-enrolled. */}
+                {/* Show the layer's configured methods that CAN be rendered as a
+                    generic MFA step. Methods without a `MfaStepRenderer` case
+                    (PASSKEY / APPROVE_LOGIN — see NON_RENDERABLE_METHODS) are
+                    filtered OUT so the picker never offers an "unknown method"
+                    dead-end (F7); they have dedicated first-factor entry points.
+                    The rest are each in one of three states: selectable (enrolled &
+                    not used), "Already used" (a prior layer), or "Not enrolled".
+                    Order: actionable first, then used, then not-enrolled. */}
                 {[...availableMethods]
+                .filter((method) => !NON_RENDERABLE_METHODS.has(method.methodType))
                 .sort((a, b) => methodRank(a, usedMethods) - methodRank(b, usedMethods))
                 .map((method) => {
                     const used = usedMethods.includes(method.methodType)
@@ -125,11 +129,7 @@ export default function MethodPickerStep({
                     const labelKey = `enrollmentPage.methods.${method.methodType}.label`
                     const translatedLabel = t(labelKey)
                     const displayName = translatedLabel === labelKey ? method.name : translatedLabel
-                    const deviceImplicit = DEVICE_IMPLICIT_METHODS.has(method.methodType)
                     // Used (in a prior layer) OR not enrolled → not selectable.
-                    // (Device-implicit methods are not yet wired as a mid-flow MFA
-                    // step — see DEVICE_IMPLICIT_METHODS note — so they stay disabled
-                    // here too; Fix #3 only corrects their misleading copy.)
                     const disabled = used || !method.enrolled
 
                     return (
@@ -205,24 +205,17 @@ export default function MethodPickerStep({
 
                                 </Box>
 
-                                {/* Status chip — Ready / Already used / Not enrolled.
-                                    Device-implicit methods (PASSKEY/APPROVE_LOGIN) read
-                                    "On your device" instead of the misleading
-                                    "Not enrolled" when the backend reports
-                                    enrolled:false, since there's no web enrollment for
-                                    them (Fix #3). */}
+                                {/* Status chip — Ready / Already used / Not enrolled. */}
                                 <Chip
                                     label={
                                         used
                                             ? t('mfa.alreadyUsed')
                                             : method.enrolled
                                               ? t('mfa.enrolled')
-                                              : deviceImplicit
-                                                ? t('mfa.onYourDevice')
-                                                : t('mfa.notEnrolled')
+                                              : t('mfa.notEnrolled')
                                     }
                                     size="small"
-                                    color={used ? 'warning' : method.enrolled ? 'success' : deviceImplicit ? 'info' : 'default'}
+                                    color={used ? 'warning' : method.enrolled ? 'success' : 'default'}
                                     variant={!used && method.enrolled ? 'filled' : 'outlined'}
                                     sx={{
                                         position: 'absolute',
@@ -234,21 +227,8 @@ export default function MethodPickerStep({
                                     }}
                                 />
 
-                                {/* Setup hint. For genuinely not-set-up methods → "set
-                                    up in Settings". For device-implicit methods we
-                                    instead tell the user it works from their device /
-                                    mobile app (no Settings enrollment exists), so they
-                                    don't hit the dead-end the user reported (Fix #3). */}
-                                {deviceImplicit && !method.enrolled && !used && (
-                                    <Typography
-                                        variant="caption"
-                                        color="text.secondary"
-                                        sx={{ display: 'block', mt: 1, ml: 7.5 }}
-                                    >
-                                        {t('mfa.deviceImplicitHint')}
-                                    </Typography>
-                                )}
-                                {!deviceImplicit && !method.enrolled && !used && (
+                                {/* Setup hint for a genuinely not-set-up method. */}
+                                {!method.enrolled && !used && (
                                     <Typography
                                         variant="caption"
                                         color="text.secondary"
diff --git a/src/features/auth/components/steps/__tests__/MethodPickerStep.deviceImplicit.test.tsx b/src/features/auth/components/steps/__tests__/MethodPickerStep.deviceImplicit.test.tsx
index 6cbda3f..f2cae3f 100644
--- a/src/features/auth/components/steps/__tests__/MethodPickerStep.deviceImplicit.test.tsx
+++ b/src/features/auth/components/steps/__tests__/MethodPickerStep.deviceImplicit.test.tsx
@@ -1,11 +1,13 @@
 /**
- * MethodPickerStep — Fix #3 (2026-06-03): device-implicit methods
- * (APPROVE_LOGIN / PASSKEY) must not present the misleading "Not enrolled →
- * Set up in Settings" dead-end (there is no Settings enrollment for them).
- * They show "On your device" + a device/mobile setup hint instead.
+ * MethodPickerStep — F7 (2026-06-12): the generic picker must NOT offer methods
+ * that have no `MfaStepRenderer` case (PASSKEY / APPROVE_LOGIN). Selecting one
+ * previously routed into the renderer's "Unknown authentication method" dead-end
+ * with a blank icon. They are device-implicit Layer-1 factors with dedicated
+ * first-factor entry points (PasskeyLoginButton / ApproveLoginPanel), so we
+ * FILTER them out of the picker list entirely.
  *
- * They remain NON-selectable as a mid-flow MFA step (no renderer/handler yet),
- * but the copy no longer strands the user.
+ * (Supersedes the earlier Fix #3 behaviour, which only re-worded their copy and
+ * left an unusable card in the list.)
  */
 import { describe, it, expect } from 'vitest'
 import { render, screen } from '@testing-library/react'
@@ -21,21 +23,36 @@ const baseMethod = (over: Record<string, unknown>) => ({
     ...over,
 })
 
-describe('MethodPickerStep — device-implicit copy (Fix #3)', () => {
-    it('shows "On your device" (not "Not enrolled") for APPROVE_LOGIN when not enrolled', () => {
+describe('MethodPickerStep — non-renderable methods filtered (F7)', () => {
+    it('does NOT render an APPROVE_LOGIN card (no renderer case → would be a dead-end)', () => {
         render(
             <MethodPickerStep
-                availableMethods={[baseMethod({ methodType: 'APPROVE_LOGIN' })]}
+                availableMethods={[
+                    baseMethod({ methodType: 'APPROVE_LOGIN' }),
+                    baseMethod({ methodType: 'TOTP', enrolled: true }),
+                ]}
                 onMethodSelected={() => {}}
             />,
         )
-        expect(screen.getByText('On your device')).toBeInTheDocument()
-        expect(screen.queryByText('Not enrolled')).toBeNull()
-        // No misleading "Set up in Settings" dead-end.
-        expect(screen.queryByText('Set up in Settings')).toBeNull()
+        // APPROVE_LOGIN must be filtered out: its label must not appear.
+        expect(screen.queryByText('Approve on another device')).toBeNull()
+        // A renderable method still shows.
+        expect(screen.getByText('Authenticator App')).toBeInTheDocument()
     })
 
-    it('still shows "Not enrolled" + Settings hint for a regular (non-device-implicit) method', () => {
+    it('does NOT render a PASSKEY card in the generic picker', () => {
+        render(
+            <MethodPickerStep
+                availableMethods={[baseMethod({ methodType: 'PASSKEY' })]}
+                onMethodSelected={() => {}}
+            />,
+        )
+        expect(screen.queryByText('Passkey')).toBeNull()
+        // No "unknown method" / device-implicit copy strands the user.
+        expect(screen.queryByText('On your device')).toBeNull()
+    })
+
+    it('still shows "Not enrolled" + Settings hint for a regular (renderable) method', () => {
         render(
             <MethodPickerStep
                 availableMethods={[baseMethod({ methodType: 'TOTP' })]}
diff --git a/src/features/auth/hooks/useFaceDetection.ts b/src/features/auth/hooks/useFaceDetection.ts
index 79bf005..c27e31a 100644
--- a/src/features/auth/hooks/useFaceDetection.ts
+++ b/src/features/auth/hooks/useFaceDetection.ts
@@ -55,6 +55,18 @@ const INITIAL_STATE: FaceDetectionState = {
 /** Yaw threshold (degrees) beyond which the user is prompted to look straight. */
 const YAW_STRAIGHT_THRESHOLD = 25
 
+/**
+ * Minimum gap between detection inferences (ms). The detection loops are driven
+ * by requestAnimationFrame (~60fps on most displays), but running synchronous ML
+ * inference on every frame on the MAIN thread caused `[Violation] rAF handler
+ * took <N>ms` warnings + visible jank during the face step (F10). Capping to
+ * ~18fps (55ms) keeps the rAF cadence (so cancellation/cleanup is unchanged) but
+ * SKIPS inference on intervening frames — detection/centering/`captureReady` are
+ * unaffected (a face is detected within ~1 frame either way), the loop just does
+ * less main-thread work. Low-risk alternative to a Web Worker / OffscreenCanvas.
+ */
+const MIN_DETECT_INTERVAL_MS = 55
+
 export function useFaceDetection(
     videoRef: React.RefObject<HTMLVideoElement | null>,
     active: boolean,
@@ -63,6 +75,9 @@ export function useFaceDetection(
     // --- MediaPipe FaceDetector fallback state ---
     const mpDetectorRef = useRef<FaceDetector | null>(null)
     const animFrameRef = useRef<number>(0)
+    // Timestamp of the last inference, used to cap detection to ~18fps (skip
+    // inference on intervening rAF frames) — see MIN_DETECT_INTERVAL_MS (F10).
+    const lastDetectTsRef = useRef<number>(0)
     const [state, setState] = useState<FaceDetectionState>(INITIAL_STATE)
     const [initialized, setInitialized] = useState(false)
     const [initFailed, setInitFailed] = useState(false)
@@ -199,6 +214,15 @@ export function useFaceDetection(
             return
         }
 
+        // Rate-cap: skip inference on frames that arrive sooner than the cap, so
+        // the heavy ML work runs ~18fps instead of every rAF (~60fps) — F10.
+        const nowTs = performance.now()
+        if (nowTs - lastDetectTsRef.current < MIN_DETECT_INTERVAL_MS) {
+            animFrameRef.current = requestAnimationFrame(detectWithFaceLandmarker)
+            return
+        }
+        lastDetectTsRef.current = nowTs
+
         try {
             const engine = BiometricEngine.getInstance()
             const faceDetector = engine.faceDetector
@@ -312,6 +336,14 @@ export function useFaceDetection(
             return
         }
 
+        // Rate-cap: skip inference on frames sooner than the cap (~18fps) — F10.
+        const nowTs = performance.now()
+        if (nowTs - lastDetectTsRef.current < MIN_DETECT_INTERVAL_MS) {
+            animFrameRef.current = requestAnimationFrame(detectWithBlazeFace)
+            return
+        }
+        lastDetectTsRef.current = nowTs
+
         try {
             const result = await blazeFace.detect(video)
             if (!result || !result.detected || result.faces.length === 0) {
@@ -377,6 +409,14 @@ export function useFaceDetection(
             return
         }
 
+        // Rate-cap: skip inference on frames sooner than the cap (~18fps) — F10.
+        const nowTs = performance.now()
+        if (nowTs - lastDetectTsRef.current < MIN_DETECT_INTERVAL_MS) {
+            animFrameRef.current = requestAnimationFrame(detectWithMediaPipe)
+            return
+        }
+        lastDetectTsRef.current = nowTs
+
         try {
             const t0 = performance.now()
             const result = detector.detectForVideo(video, performance.now())
@@ -453,6 +493,9 @@ export function useFaceDetection(
         if (!active || !initialized) return
 
         perfLogCountRef.current = 0
+        // Run the first frame immediately when the loop (re)starts; the rate-cap
+        // only throttles subsequent frames.
+        lastDetectTsRef.current = 0
 
         if (backend === 'mediapipe-landmarker') {
             animFrameRef.current = requestAnimationFrame(detectWithFaceLandmarker)
diff --git a/src/features/auth/login-shared/layer1Continuation.ts b/src/features/auth/login-shared/layer1Continuation.ts
new file mode 100644
index 0000000..b9ddb11
--- /dev/null
+++ b/src/features/auth/login-shared/layer1Continuation.ts
@@ -0,0 +1,30 @@
+/**
+ * Layer1Continuation — the next-step handoff a usernameless / cross-device
+ * Layer-1 method returns when the tenant flow needs MORE steps after the first
+ * factor is satisfied.
+ *
+ * The QR / approve-login / passkey first-factor entry points each complete
+ * Layer 1 WITHOUT minting final tokens when the tenant requires additional
+ * factors. The server (`UsernamelessLoginFlowService.continueAfterLayer1` /
+ * `DeviceController`) returns an `mfaSessionToken` (and, where available, the
+ * next step's `availableMethods`) so the browser can continue into the EXISTING
+ * MethodPicker / MfaStepRenderer continuation — instead of dead-ending on an
+ * info alert + "go back" button (the F1 = F3 bug).
+ *
+ * `availableMethods` may be absent/empty (e.g. the passkey-success path where
+ * `DeviceController` returns no methods); the host falls back to its standard
+ * single-method routing in that case, anchored by the `mfaSessionToken`.
+ */
+import type { AvailableMfaMethod } from '@domain/interfaces/IAuthRepository'
+
+export interface Layer1Continuation {
+    /** Session token for the in-progress MFA flow (continue via /auth/mfa/step). */
+    mfaSessionToken: string
+    /** Methods offered for the NEXT step, when the server reported them. */
+    availableMethods?: AvailableMfaMethod[]
+    /** Factors already satisfied (Layer 1) so the picker can mark them used. */
+    completedMethods?: string[]
+    /** Backend-authoritative step counters, when reported. */
+    currentStep?: number
+    totalSteps?: number
+}
diff --git a/src/features/auth/qr-login.ts b/src/features/auth/qr-login.ts
index ba0cc7f..9fe7cac 100644
--- a/src/features/auth/qr-login.ts
+++ b/src/features/auth/qr-login.ts
@@ -25,6 +25,7 @@
  */
 
 import type { IHttpClient } from '@domain/interfaces/IHttpClient'
+import type { AvailableMfaMethod } from '@domain/interfaces/IAuthRepository'
 
 export const QR_LOGIN_API = {
     SESSION: '/auth/qr/session',
@@ -61,6 +62,14 @@ export interface QrLoginPoll {
     mfaSessionToken?: string
     currentStep?: number
     totalSteps?: number
+    /**
+     * Methods offered for the NEXT MFA step, when the approved Layer-1 needs
+     * further steps. Lets the web continue into the existing MethodPicker /
+     * MfaStepRenderer flow instead of dead-ending. May be absent/empty.
+     */
+    availableMethods?: AvailableMfaMethod[]
+    /** Factors already satisfied (so the next picker can mark them used). */
+    completedMethods?: string[]
 }
 
 /** How often to poll the session status, in milliseconds. */
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 33862db..d815be2 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -1751,7 +1751,7 @@
       "readError": "Failed to read NFC document. Try holding it closer.",
       "scanFailed": "NFC scan failed. Please try again.",
       "scanTimeout": "No NFC tag detected within 30 seconds. Tap your document to the back of your phone and try again.",
-      "notSupported": "NFC is only supported in Chrome on Android. Please use Chrome on your Android device.",
+      "notSupported": "Scanning an NFC card in the browser works only in Chrome on Android. On other devices, enrol or manage your NFC card in the FIVUCSAS mobile app, or choose another sign-in method.",
       "hint": "Hold your enrolled NFC card flat against the back of your phone. Keep it steady for a few seconds.",
       "framedTitle": "NFC can't run here",
       "framedBody": "For security, Web NFC only runs in a top-level browser tab. Open the login in a new tab to continue.",
@@ -2515,6 +2515,8 @@
   },
   "approveLogin": {
     "button": "Approve on another device",
+    "buttonWithEmail": "Approve from another device — enter your email",
+    "sectionLabel": "Approve from another device",
     "buttonHint": "Confirm this sign-in from a device where you're already signed in",
     "emailLabel": "Email",
     "emailPlaceholder": "you@example.com",
diff --git a/src/i18n/locales/tr.json b/src/i18n/locales/tr.json
index 1a10bac..dcda997 100644
--- a/src/i18n/locales/tr.json
+++ b/src/i18n/locales/tr.json
@@ -1751,7 +1751,7 @@
       "readError": "NFC belge okunamadı. Daha yakın tutmayı deneyin.",
       "scanFailed": "NFC tarama başarısız. Tekrar deneyin.",
       "scanTimeout": "30 saniye içinde NFC etiketi algılanmadı. Belgenizi telefonunuzun arkasına dokundurup tekrar deneyin.",
-      "notSupported": "NFC yalnızca Android Chrome'da desteklenir. Lütfen Android cihazınızda Chrome kullanın.",
+      "notSupported": "Tarayıcıda NFC kart tarama yalnızca Android'deki Chrome'da çalışır. Diğer cihazlarda NFC kartınızı FIVUCSAS mobil uygulamasında kaydedip yönetebilir veya başka bir giriş yöntemi seçebilirsiniz.",
       "hint": "Kayıtlı NFC kartınızı telefonunuzun arkasına düz bir şekilde tutun. Birkaç saniye sabit tutun.",
       "framedTitle": "NFC burada çalışmıyor",
       "framedBody": "Web NFC, güvenlik nedeniyle yalnızca üst düzey tarayıcı sekmesinde çalışır. Devam etmek için girişi yeni bir sekmede açın.",
@@ -2515,6 +2515,8 @@
   },
   "approveLogin": {
     "button": "Başka bir cihazdan onayla",
+    "buttonWithEmail": "Başka cihazdan onayla — e-postanızı girin",
+    "sectionLabel": "Başka bir cihazdan onaylayın",
     "buttonHint": "Bu girişi, zaten giriş yapmış olduğunuz bir cihazdan onaylayın",
     "emailLabel": "E-posta",
     "emailPlaceholder": "siz@ornek.com",
diff --git a/src/verify-app/HostedLoginApp.tsx b/src/verify-app/HostedLoginApp.tsx
index 410893d..bf8585c 100644
--- a/src/verify-app/HostedLoginApp.tsx
+++ b/src/verify-app/HostedLoginApp.tsx
@@ -45,6 +45,7 @@ import { TYPES } from '@core/di/types'
 import type { IHttpClient } from '@domain/interfaces/IHttpClient'
 import { fetchLoginConfig } from '@features/auth/login-config'
 import type { LoginConfig } from '@domain/models/LoginConfig'
+import type { Layer1Continuation } from '@features/auth/login-shared/layer1Continuation'
 import { assertSafeRedirectScheme } from './sdk/FivucsasAuth'
 import { config as envConfig } from '@config/env'
 
@@ -273,6 +274,12 @@ export default function HostedLoginApp() {
     // can be active at a time; `null` means the default email/password+MFA flow.
     const [altFlow, setAltFlow] = useState<'approveLogin' | 'qrLogin' | null>(null)
     const [altError, setAltError] = useState<string | null>(null)
+    // When a usernameless Layer-1 method (QR / approve / passkey) satisfied the
+    // first factor but the tenant flow needs MORE steps, the server returns an
+    // mfaSessionToken. We hand it to LoginMfaFlow via `initialContinuation` so it
+    // resumes into the existing MFA steps instead of dead-ending (F1/F3 +
+    // passkey-success). Null = no in-progress cross-device continuation.
+    const [mfaContinuation, setMfaContinuation] = useState<Layer1Continuation | null>(null)
     // Whether the inner LoginMfaFlow is on its OPENING identity-entry screen.
     // The usernameless shortcuts (passkey / approve) are ALTERNATIVES to typing
     // an identifier, so — mirroring the dashboard's `onInitialIdentityEntry`
@@ -671,6 +678,20 @@ export default function HostedLoginApp() {
         [handleLoginComplete],
     )
 
+    // A usernameless Layer-1 method (QR / approve / passkey) satisfied the first
+    // factor but the tenant flow needs MORE steps: the server returned an
+    // mfaSessionToken (no final tokens). Close the alt panel and hand the
+    // continuation to LoginMfaFlow, which resumes into the existing MFA steps —
+    // no dead-end (F1 = F3, and the passkey-success-into-MFA case).
+    const handleLayer1MfaRequired = useCallback(
+        (continuation: Layer1Continuation) => {
+            setAltError(null)
+            setAltFlow(null)
+            setMfaContinuation(continuation)
+        },
+        [],
+    )
+
     const handleCancel = useCallback(() => {
         // Best-effort: return user to the origin of the redirect URI.
         if (config.redirectUri) {
@@ -922,6 +943,7 @@ export default function HostedLoginApp() {
                         ) : altFlow === 'approveLogin' ? (
                             <ApproveLoginPanel
                                 onApproved={handleApproveLoginApproved}
+                                onMfaRequired={handleLayer1MfaRequired}
                                 onCancel={() => {
                                     setAltError(null)
                                     setAltFlow(null)
@@ -930,6 +952,7 @@ export default function HostedLoginApp() {
                         ) : altFlow === 'qrLogin' ? (
                             <QrLoginPanel
                                 onApproved={handleQrLoginApproved}
+                                onMfaRequired={handleLayer1MfaRequired}
                                 onCancel={() => {
                                     setAltError(null)
                                     setAltFlow(null)
@@ -964,6 +987,11 @@ export default function HostedLoginApp() {
                                     onInitialPhaseChange={setOnInitialLoginPhase}
                                     onPreflightResolved={handlePreflightResolved}
                                     loginConfig={loginConfig}
+                                    // Resume into the MFA steps when a usernameless
+                                    // Layer-1 method (QR / approve / passkey) opened a
+                                    // multi-step session outside this flow (F1/F3 +
+                                    // passkey-success). Null in the normal path.
+                                    initialContinuation={mfaContinuation}
                                     // The hosted shell already resolves loginConfig
                                     // INSIDE the metaLoading gate (it only mounts this
                                     // flow once meta+config have settled), so this is
@@ -994,6 +1022,7 @@ export default function HostedLoginApp() {
                                     config={loginConfig}
                                     fallbackAll
                                     onPasskeySuccess={handlePasskeySuccess}
+                                    onPasskeyMfaRequired={handleLayer1MfaRequired}
                                     onPasskeyError={(msg) => setAltError(msg)}
                                     onApproveClick={() => {
                                         setAltError(null)
diff --git a/src/verify-app/LoginMfaFlow.tsx b/src/verify-app/LoginMfaFlow.tsx
index 159b767..983cd83 100644
--- a/src/verify-app/LoginMfaFlow.tsx
+++ b/src/verify-app/LoginMfaFlow.tsx
@@ -33,6 +33,7 @@ import { makeRequestWebAuthnChallenge } from '@features/auth/login-shared/webaut
 import StepProgress from './StepProgress'
 import { hasPasswordLayer1, needsIdentifier, selectPuzzleConfig, type LoginConfig } from '@domain/models/LoginConfig'
 import { isLikelyValidEmail } from '@domain/validators/emailValidator'
+import type { Layer1Continuation } from '@features/auth/login-shared/layer1Continuation'
 
 /**
  * The discrete screens of the login flow. Named constants (not bare string
@@ -105,9 +106,19 @@ interface LoginMfaFlowProps {
      * step (once an identifier/session is committed the skeleton is suppressed).
      */
     configLoading?: boolean
+    /**
+     * Resume into an in-progress MFA flow that a usernameless Layer-1 method
+     * (QR / approve / passkey) opened OUTSIDE this component. When set, the flow
+     * jumps straight to the method-picker / first MFA step for the given
+     * `mfaSessionToken` + `availableMethods` (instead of its opening
+     * identity-entry screen), so cross-device approval / passkey first-factor
+     * continues into the existing MFA steps rather than dead-ending (F1/F3 +
+     * passkey-success). Consumed once on change; clears on "Start over".
+     */
+    initialContinuation?: Layer1Continuation | null
 }
 
-export default function LoginMfaFlow({ clientId, onComplete, onCancel, onStepChange, onInitialPhaseChange, loginConfig, onPreflightResolved, configLoading = false }: LoginMfaFlowProps) {
+export default function LoginMfaFlow({ clientId, onComplete, onCancel, onStepChange, onInitialPhaseChange, loginConfig, onPreflightResolved, configLoading = false, initialContinuation = null }: LoginMfaFlowProps) {
     const { t } = useTranslation()
     const authRepository = useService<IAuthRepository>(TYPES.AuthRepository)
     const httpClient = useService<IHttpClient>(TYPES.HttpClient)
@@ -247,6 +258,40 @@ export default function LoginMfaFlow({ clientId, onComplete, onCancel, onStepCha
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [loginConfig])
 
+    // Resume into an MFA flow opened by a usernameless Layer-1 method (QR /
+    // approve / passkey) outside this component. Consumed ONCE per session
+    // token: jump to the method-picker / first MFA step with the handed-in
+    // session + methods, so the cross-device / passkey first-factor continues
+    // into the existing steps instead of dead-ending (F1/F3 + passkey-success).
+    const consumedContinuationRef = useRef<string | null>(null)
+    useEffect(() => {
+        const c = initialContinuation
+        if (!c || !c.mfaSessionToken) return
+        if (consumedContinuationRef.current === c.mfaSessionToken) return
+        consumedContinuationRef.current = c.mfaSessionToken
+
+        setMfaSessionToken(c.mfaSessionToken)
+        if (c.completedMethods?.length) {
+            setUsedMethods((prev) => Array.from(new Set([...prev, ...c.completedMethods!])))
+        }
+        if (c.totalSteps) {
+            setTotalSteps((prev) => Math.max(prev, c.totalSteps!))
+            setFlowTotalSteps((prev) => Math.max(prev ?? 0, c.totalSteps!))
+        }
+        if (c.currentStep) setCurrentStep(c.currentStep)
+
+        const methods = c.availableMethods ?? []
+        setAvailableMethods(methods)
+        const used = new Set(c.completedMethods ?? [])
+        const enrolled = methods.filter((m) => m.enrolled && !used.has(m.methodType))
+        if (enrolled.length === 1) {
+            setSelectedMethod(enrolled[0].methodType)
+            setPhase(FlowPhase.MfaStep)
+        } else {
+            setPhase(FlowPhase.MethodPicker)
+        }
+    }, [initialContinuation])
+
     // ─── Password Submit ────────────────────────────────────────
 
     const handlePasswordSubmit = useCallback(async (data: { email: string; password: string }) => {