User-login_form Tag

Overview#

User tags are designed for sites that have areas or features behind a login. The user:login_form tag helps you build that login form.

The tag will render the opening and closing <form> HTML elements for you. The rest of the form markup is up to you as long as you have an email and password input field.

Example#

{{ user:login_form }}

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

    {{ if success }}
        <div class="bg-green-300 text-white p-2">
            {{ success }}<br>
        </div>
    {{ /if }}

    <label>Email</label>
    <input type="email" name="email" value="{{ old:email }}" />

    <label>Password</label>
    <input type="password" name="password" value="{{ old:password }}" />

    <button type="submit">Log in</button>

{{ /user:login_form }}

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

  @if ($success)
    <div class="bg-green-300 text-white p-2">
      {{ $success }}<br>
    </div>
  @endif

  <label>Email</label>
  <input type="email" name="email" value="{{ old('email') }}" />

  <label>Password</label>
  <input type="password" name="password" value="{{ old('password') }}" />

  <button type="submit">Log in</button>
</s:user:login_form>

Precognition#

The login endpoint supports Laravel Precognition for live, server-driven validation. See Precognition for User Forms for setup and a full example.

Passkeys#

You can add passkey authentication to your login form using Statamic's frontend JavaScript helpers.

1. First, include the helpers script on your page:

   <script src="/vendor/statamic/frontend/js/helpers.js"></script>
   

2. Use the provided variables to add a passkey login option:

   {{ user:login_form }}
       <input type="email" name="email" value="{{ old:email }}" />
       <input type="password" name="password" value="{{ old:password }}" />
       <button type="submit">Log in with Password</button>
   
       <button type="button" id="passkey-login">Login with Passkey</button> 
   
       <script>
           Statamic.$passkeys.configure({
               optionsUrl: '{{ passkey_options_url }}',
               verifyUrl: '{{ passkey_verify_url }}',
               onSuccess: (data) => window.location = data.redirect || '/',
               onError: (error) => alert(error.message)
           });
   
           document.getElementById('passkey-login').addEventListener('click', () => {
               Statamic.$passkeys.authenticate();
           });
   
           // Enable browser autofill for passkeys
           Statamic.$passkeys.initAutofill();
       </script> 
   {{ /user:login_form }}
   

3. Add autocomplete="username webauthn" to your email input for browser autofill to work.

For more information on managing passkeys on the frontend, see the following docs:

• {{ user:passkeys }}
• {{ user:passkey_form }}
• {{ user:delete_passkey_form }}

Two-Factor Authentication#

When a user with two-factor authentication (2FA) enabled submits the login form, Statamic will redirect them to a challenge page so they can enter a code from their authenticator app. If the user belongs to a role that requires 2FA but hasn't set it up yet, they'll be redirected to the setup page instead.

You can customize where each of these redirects goes using the two_factor_challenge_url and two_factor_setup_url config keys in config/statamic/users.php. Leave them null to use Statamic's built-in pages.

// config/statamic/users.php

'two_factor_challenge_url' => '/account/2fa/challenge',
'two_factor_setup_url' => '/account/2fa/setup',

When rolling your own frontend pages, use the following tags to render the forms:

• {{ user:two_factor_challenge_form }} — the code verification form during login
• {{ user:two_factor_enable_form }} — step 1 of setup, generates the secret
• {{ user:two_factor_setup_form }} — step 2 of setup, displays the QR code and confirms the code

Parameters

Variables