Two-factor sign-in

Accounts with two-factor turned on get a second step supporting an authenticator app, a texted code or a backup code.

What it is

When the first factor succeeds and the account still needs a second, the flow reads the supported second factors and picks in a fixed order of preference — authenticator app, texted code, backup code — then renders that step. Copy for the authenticator step is supplied explicitly at the provider level so the screen isn't a bare code box.

Also called: 2FA · MFA · authenticator app · backup code · second factor

See it
Two-factor sign-in
Area
Platform & Admin
Group
Sign-in
System
Multi-Tenancy & Identity
Solves
3 named problems
01After a successful first factor, a 'needs second factor' status moves the flow to the second step.
02The strategy is chosen in order: authenticator app, then texted code, then backup code, then whatever is first.
03A texted second factor triggers a send before the input is shown.
The second-factor step with the heading 'Enter your authenticator code' and the explanatory subtitle above the input. Copy set in src/app/layout.tsx, form in src/components/auth/BrandedSignIn.tsx. Sample data — no customer information appears here.
How it works
  1. 1After a successful first factor, a 'needs second factor' status moves the flow to the second step.
  2. 2The strategy is chosen in order: authenticator app, then texted code, then backup code, then whatever is first.
  3. 3A texted second factor triggers a send before the input is shown.
  4. 4The code is verified against the chosen strategy and the session is finalised on success.
  5. 5If no strategy can be driven, the flow hands off to the provider's own component.
Why we built it

Two-factor is where a custom sign-in screen usually goes wrong, so the fallbacks are explicit. The remembered-method write happens before this step deliberately — 'The factor worked. Remember it even if MFA is still to come.' And because the custom card hides the provider's own step header, the root layout re-supplies the missing context in provider localisation: 'on the 2-factor step [hiding the header] removes the enter your code context. Re-supply clear copy… so the screen is self-explanatory instead of bare code boxes.'

The problem
  • A custom sign-in screen that can't complete two-factor locks out the accounts that most need protecting.
  • A bare code box with no label is indistinguishable from a bug.
  • A lost phone needs a backup path.
Sound familiar?
What you get
Authenticator apps, texted codes and backup codes all work.
The step says which app to open and what to enter.
Anything the custom flow can't handle falls back rather than dead-ending.

See it on your own jobs

Twenty minutes, your numbers, no slide deck. We’ll build one of your real buildings in front of you and send you the estimate link at the end — yours to keep either way.

or keep browsing features →