Auth

Open source

Authentication screens — sign in / sign up with split brand panels, testimonial sidebars and patterned backdrops, plus two-factor, password-recovery and email-verification cards.

Add to page builder

8 of 12

resources/views/blocks/auth-two-factor.blade.php Blade

@props([
    'heading' => 'Two-factor authentication',
    'subheading' => 'Enter the 6-digit code from your authenticator app.',
    'action' => '#',
    'resendHref' => '#',
    'alternateHref' => '#',
    'resendIn' => 30,
])

<section {{ $attributes->merge(['class' => 'flex min-h-svh items-center justify-center bg-muted/30 px-4 py-12 text-foreground']) }}>
    <x-ui.card class="w-full max-w-sm">
        <x-ui.card.header class="items-center text-center">
            <span class="mb-2 inline-flex size-12 items-center justify-center rounded-full bg-primary/10 text-primary" aria-hidden="true">
                <svg class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z" />
                    <path d="M9 12.5 11 14.5l4-4.5" />
                </svg>
            </span>
            <x-ui.card.title class="text-xl">{{ __($heading) }}</x-ui.card.title>
            <x-ui.card.description>{{ __($subheading) }}</x-ui.card.description>
        </x-ui.card.header>

        <x-ui.card.content>
            <form method="POST" action="{{ $action }}" class="space-y-6">
                @csrf

                <div class="flex justify-center">
                    <x-ui.input-otp name="code" :length="6" aria-label="{{ __('Verification code') }}" />
                </div>

                <x-ui.button type="submit" class="w-full">{{ __('Verify') }}</x-ui.button>
            </form>

            <p class="mt-4 text-center text-sm text-muted-foreground">
                {{ __("Didn't get a code?") }}
                <a href="{{ $resendHref }}" class="font-medium text-link hover:underline">{{ __('Resend code') }}</a>
                <span class="block text-xs text-muted-foreground">{{ __('You can request a new code in :seconds seconds.', ['seconds' => (int) $resendIn]) }}</span>
            </p>
        </x-ui.card.content>

        <x-ui.card.footer class="justify-center">
            <a href="{{ $alternateHref }}" class="text-sm text-muted-foreground hover:text-foreground hover:underline">{{ __('Use a different method') }}</a>
        </x-ui.card.footer>
    </x-ui.card>
</section>

Installation

terminal

php artisan ui:add blocks/auth-two-factor

Installs these dependencies automatically:

card input-otp button

Registry contract

Install confidence

php artisan ui:add blocks/auth-two-factor writes only the generated targets below. The CLI validates each file hash before writing and prompts before replacing local changes unless --force is used.

Version: 1.0.4
License: open
Stability: stable
Contract: v1
Foundation: ≥ 1.0.0

Type	Generated target
blade	resources/views/blocks/auth-two-factor.blade.php

Registry dependencies

card input-otp button

Package dependencies

composer: jml/brok:^0.2

Use with AI

A brief for your coding agent: what the block is, the install command, how to render it, its props and the rules. Copy it, or open a prompt about this block in an assistant.

auth-two-factor.md

# Brok UI block: Two-factor (`auth-two-factor`)

A centered two-factor authentication card with a shielded icon chip, 6-digit OTP input, a full-width verify button, and resend/alternate-method links.

Brok UI is a Laravel Blade registry. `ui:add` copies this block into the app as plain Blade the app owns; it composes installed `<brok:*>` primitives and semantic design tokens.

## Install

```bash
php artisan ui:add blocks/auth-two-factor
```

## Render it

```blade
<x-blocks.auth-two-factor />
```

## Props

- `heading` (string, default `Two-factor authentication`)
- `subheading` (string, default `Enter the 6-digit code from your authenticator app.`)
- `action` (string, default `#`)
- `resend-href` (string, default `#`)
- `alternate-href` (string, default `#`)
- `resend-in` (int, default `30`)

## Use when

- Prompting a signed-in user for a six-digit authenticator code as a second factor after password sign-in.
- Offering a resend link and an alternate-method link beside the full-width verify button.

## Avoid when

- Use auth-reset-password for a password-reset form; auth-two-factor is for verifying a one-time code, not setting a new password.

## Rules

- Render the installed block with `<x-blocks.auth-two-factor />` and pass data through its props; edit the copied file only for structural changes.
- Keep the semantic design tokens (`bg-background`, `text-muted-foreground`); never swap in raw colour utilities.
- Keep the `data-slot` attributes and the logical (start/end) spacing so the markup still mirrors under `dir="rtl"`.

## Links

- Docs: https://brokui.dev/blocks/auth-two-factor
- Registry JSON (files, props, contract): https://brokui.dev/r/open/blocks/auth-two-factor.json

Ask about Two-factor in

Working in Claude Code, Cursor or Codex? Give the agent the whole registry through the MCP server or the Brok UI skill.

Guidance

Use when

Prompting a signed-in user for a six-digit authenticator code as a second factor after password sign-in.
Offering a resend link and an alternate-method link beside the full-width verify button.

Avoid when

Use auth-reset-password for a password-reset form; auth-two-factor is for verifying a one-time code, not setting a new password.

Anti-patterns

Do not replace semantic props with conflicting utility classes.
Do not remove labels, focus styles, or state attributes.

Usage

Render the block as a component, passing data where useful:

resources/views/welcome.blade.php Blade

<x-blocks.auth-two-factor />

Built from primitives

Composes <brok:*> Semantic tokens Re-themeable RTL-ready

This block composes installed <brok:*> primitives and semantic design tokens only — it does not reimplement any primitive. Re-theme it (light, dark, admin, customer) by editing CSS variables; flip the preview to RTL to confirm it mirrors.

Source

The exact, editable file ui:add writes into your app. The preview above renders this same source — there are no preview-only blocks.