How to Add Laravel Passkeys to Laravel 11

Passkeys let users log in without needing a password, making things both safer and easier. Instead of typing a password, users can log in with things like Face ID, fingerprints, or device PINs. In this guide, we’ll show you how to add Laravel Passkeys to your app using the Spatie Laravel Passkeys package with the Laravel 11

#Table of contents

• Prerequisites
• Step-by-Step Implementation
  • 1. Clone the Livewire Starter Kit
  • 2. Install Laravel Passkeys
  • 3. Setup Your User Model
  • 4. Run Migrations for Passkeys
  • 5. Add Frontend Dependencies
  • 6. Register Passkey Routes
  • 7. Add Passkey Login UI
  • 8. Display Passkey Management in Dashboard
  • 9. Configure Environment
  • 10. Optional: Customize Views
• Done! Try It Out
• Final Thoughts
• Further Reading

#Prerequisites

Make sure you have:

• PHP 8.2+
• Laravel 11
• Node with PNPM
• SSL-enabled local environment (use Laravel Herd for HTTPS)
• A modern browser that supports WebAuthn

#Step-by-Step Implementation

#1. Clone the Livewire Starter Kit

git clone https://github.com/laravel/livewire-starter-kit.git
cd livewire-starter-kit
composer install
cp .env.example .env
php artisan key:generate
php artisan migrate
pnpm i && pnpm build

#2. Install Laravel Passkeys

Install the Spatie Laravel Passkeys package:

composer require spatie/laravel-passkeys

#3. Setup Your User Model

use Spatie\Passkey\Concerns\InteractsWithPasskeys;
use Spatie\Passkey\Contracts\HasPasskeys;
 
class User extends Authenticatable implements HasPasskeys
{
    use InteractsWithPasskeys;
 
    // ...
}

#4. Run Migrations for Passkeys

php artisan vendor:publish --tag="passkeys-migrations"
php artisan migrate

#5. Add Frontend Dependencies

Install the browser package for WebAuthn:

pnpm add @simplewebauthn/browser

In your resources/js/app.js, add:

import {
    browserSupportsWebAuthn,
    startAuthentication,
    startRegistration,
} from '@simplewebauthn/browser';
 
window.browserSupportsWebAuthn = browserSupportsWebAuthn;
window.startAuthentication = startAuthentication;
window.startRegistration = startRegistration;

Rebuild assets:

pnpm build

#6. Register Passkey Routes

Route::passkeys();

#7. Add Passkey Login UI

<div class="flex flex-col items-center justify-center">
    <x-authenticate-passkey>
        <flux:button variant="primary" type="submit" class="w-full">
            {{ __('Authenticate using passkey') }}
        </flux:button>
    </x-authenticate-passkey>
</div>

#8. Display Passkey Management in Dashboard

<x-layouts.app :title="__('Dashboard')">
    <div class="flex h-full w-full flex-1 flex-col gap-4 rounded-xl">
        <livewire:passkeys />
    </div>
</x-layouts.app>

#9. Configure Environment

Ensure .env contains the correct app URL (must be HTTPS):

APP_URL=https://livewire-starter-kit.test

#10. Optional: Customize Views

To publish and customize the default views:

php artisan vendor:publish --tag=passkeys-views

This will allow you to tailor the UI to match your brand.

#Done! Try It Out

1. Visit your local app at https://livewire-starter-kit.test/register and register with your email and password.
2. After logging in, go to the Dashboard and create a Passkey (you’ll be prompted to use biometrics or device credentials).
3. Then logout and try logging in using the “Authenticate using passkey” button on the login screen.

#Final Thoughts

Passkeys make logging in safer and easier by letting users skip passwords and use things like Face ID or fingerprints instead. With the Laravel Passkeys package, it’s simple to add this modern login method to your app—even in the Livewire Starter Kit.

More and more big companies like Google, Amazon, and GitHub are already moving to passkeys, and now you can too. It works great on phones and laptops using Face ID, Windows Hello, or Android’s biometric login.

Adding passkey support to your Laravel 11 app is a smart move to stay up-to-date and offer a better user experience.

#Further Reading

• Laravel Passkeys GitHub Repo
• WebAuthn Explained
• SimpleWebAuthn Docs