User-elevated_session_form Tag

Overview#

Elevated Sessions allow you to prompt users for their password or a verification code before being able to take certain actions.

The user:elevated_session_form tag renders a form allowing authenticated users to confirm their identity and start an elevated session. Useful for protecting sensitive actions that require re-authentication.

The tag will render the opening and closing <form> HTML elements for you. The rest of the form markup is up to you.

Example#

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

    {{ if method == "password_confirmation" }}
        <label>Password</label>
        <input type="password" name="password" />
    {{ /if }}

    {{ if method == "verification_code" }}
        <p>A verification code has been sent to your email.</p>
        <label>Verification Code</label>
        <input type="text" name="verification_code" />
        <a href="{{ resend_code_url }}">Resend code</a>
    {{ /if }}

    <button type="submit">Confirm</button>
{{ /user:elevated_session_form }}

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

  @if ($method === 'password_confirmation')
    <label>Password</label>
    <input type="password" name="password" />
  @endif

  @if ($method === 'verification_code')
    <p>A verification code has been sent to your email.</p>
    <label>Verification Code</label>
    <input type="text" name="verification_code" />
    <a href="{{ $resend_code_url }}">Resend code</a>
  @endif

  <button type="submit">Confirm</button>
</s:user:elevated_session_form>

Authentication Methods#

The method variable indicates how the user should confirm their identity:

• password_confirmation - User should enter their password.
• verification_code - User doesn't have a password, so they should enter the verification code sent to their email.
• passkey - User requires a passkey to login. Passkey authentication requires JavaScript - see the below section for more details.

Passkeys#

Passkey authentication requires JavaScript. Include the frontend helpers script and use the passkey_options_url and submit_url variables:

{{ user:elevated_session_form }}
    {{ if method == "password_confirmation" }}
        <input type="password" name="password" />
        <button type="submit">Confirm with Password</button>
    {{ /if }}

    {{ if method == "verification_code" }}
        <p>A verification code has been sent to your email.</p>
        <label>Verification Code</label>
        <input type="text" name="verification_code" />
        <a href="{{ resend_code_url }}">Resend code</a>
        <button type="submit">Confirm with Verification Code</button>
    {{ /if }}

    {{ if allow_passkey }}
        <button type="button" id="passkey-confirm">Confirm with Passkey</button> 

        <script src="/vendor/statamic/frontend/js/helpers.js"></script>
        <script>
            Statamic.$passkeys.configure({
                optionsUrl: '{{ passkey_options_url }}',
                verifyUrl: '{{ submit_url }}',
                onSuccess: (data) => window.location = data.redirect || '/',
                onError: (error) => alert(error.message)
            });

            document.getElementById('passkey-confirm').addEventListener('click', () => {
                Statamic.$passkeys.authenticate();
            });
        </script> 
    {{ /if }}
{{ /user:elevated_session_form }}

Protecting routes#

To require an elevated session on your routes, apply the middleware:

use Statamic\Http\Middleware\RequireElevatedSession;

Route::get('/account/sensitive-action', SensitiveActionController::class)
    ->middleware(['auth', RequireElevatedSession::class]);

When users access a protected route without an elevated session, they'll be redirected to confirm their identity. After successful confirmation, they're redirected back to the original URL.

Configuration#

In config/statamic/users.php:

// Duration in minutes before the elevated session expires
'elevated_session_duration' => 15,

// URL to a custom elevated session page.
// When null, it'll fallback to a Statamic-powered page.
'elevated_sessions_url' => null,

Parameters

Variables