User-two_factor_setup_form Tag

Step two of the two-factor authentication setup flow. This tag displays the QR code and verifies the code the user enters to confirm their authenticator app is working.

Overview#

The user:two_factor_setup_form tag renders step two of the two-factor authentication setup flow. At this point the user has already generated a 2FA secret (via {{ user:two_factor_enable_form }}) and just needs to scan the QR code with their authenticator app and enter a verification code to confirm the setup.

The tag will render the opening and closing <form> HTML elements for you. You'll need to provide a code input field for the verification code.

Hot Tip!

This form only renders for an authenticated user who has a 2FA secret but hasn't yet confirmed it. If the user doesn't have a secret yet, send them through {{ user:two_factor_enable_form }} first. If the user already has 2FA enabled, the form contents won't be rendered.

Example#

{{ user:two_factor_setup_form redirect="/account/recovery-codes" }}

    {{ if errors }}
        <div class="bg-red-300 text-white p-2">
            {{ errors }}
                {{ value }}<br>
            {{ /errors }}
        </div>
    {{ /if }}

    <h2>Set Up Two-Factor Authentication</h2>

    <p>Scan this QR code with your authenticator app:</p>

    {{# Option 1: Render SVG directly #}}
    <div class="qr-code">
        {{ qr_code }}
    </div>

    {{# Option 2: Use as image source #}}
    <img src="{{ qr_code_url }}" alt="QR Code" width="200" height="200" />

    <p>Or enter this code manually: <code>{{ secret_key }}</code></p>

    <label>
        Enter the 6-digit code from your app to confirm:
        <input type="text" name="code" inputmode="numeric" autocomplete="one-time-code" maxlength="6" />
    </label>

    <button type="submit">Enable Two-Factor Authentication</button>

{{ /user:two_factor_setup_form }}

<s:user:two_factor_setup_form redirect="/account/recovery-codes">
    @if ($errors)
        <div class="bg-red-300 text-white p-2">
            @foreach ($errors as $error)
                {{ $error }}<br>
            @endforeach
        </div>
    @endif

    <h2>Set Up Two-Factor Authentication</h2>

    <p>Scan this QR code with your authenticator app:</p>

    {{-- Option 1: Render SVG directly --}}
    <div class="qr-code">
        {!! $qr_code !!}
    </div>

    {{-- Option 2: Use as image source --}}
    <img src="{{ $qr_code_url }}" alt="QR Code" width="200" height="200" />

    <p>Or enter this code manually: <code>{{ $secret_key }}</code></p>

    <label>
        Enter the 6-digit code from your app to confirm:
        <input type="text" name="code" inputmode="numeric" autocomplete="one-time-code" maxlength="6" />
    </label>

    <button type="submit">Enable Two-Factor Authentication</button>
</s:user:two_factor_setup_form>

Displaying the QR code#

You have two options for displaying the QR code:

SVG Markup (qr_code): Renders directly in the HTML. This is generally preferred as it scales well and doesn't require an additional request.
Data URL (qr_code_url): Use with an <img> tag if you prefer image-based rendering or need more control over sizing.

Flow#

The frontend 2FA setup flow is split across two pages:

Submit {{ user:two_factor_enable_form }} — this generates the user's 2FA secret and, by default, redirects to statamic.users.two_factor_setup_url (or wherever you specify via _redirect).
On that setup page, use {{ user:two_factor_setup_form }} (this tag) to display the QR code and confirm the code.

Parameters

redirect

string

Where the user should be taken after successful setup (e.g., a recovery codes page).

error_redirect

string

Where the user should be redirected on validation errors.

allow_request_redirect

boolean

When set to true, the redirect and error_redirect parameters will get overridden by redirect and error_redirect query parameters in the URL.

HTML Attributes

Set HTML attributes as if you were in an HTML element. For example, class="required" id="2fa-setup-form".

Variables

Variable	Type	Description
qr_code	`string`	SVG markup for the QR code that can be rendered directly in the template.
qr_code_url	`string`	A data URL for the QR code, suitable for use with an `<img>` tag's `src` attribute.
secret_key	`string`	The TOTP secret key for users who prefer to enter it manually into their authenticator app.
errors	`array`	An array of validation errors.
error	`array`	An array of validation errors indexed by field names. Suitable for targeting fields. eg. `{{ error:code }}`
success	`string`	A success message.