A package to handle passkeys in Laravel

#oss

Passkeys let you log in without needing a password. Instead of a password, you can generate a passkey which will be stored in 1Pass, MacOS' password app, or alternative app on your favourite OS.

Passkeys are very convenient for users to log in: they don’t have to type in an email/password, you aren’t redirected to a third party for authentication, and it’s fast.

For developers however, the big downside is that passkeys can be hard to implement. I’m proud to announce that we’ve released a new package called spatie/laravel-passkeys that makes adding passkeys to a Laravel app as easy as it can be.

Using the package

The package provides two components to handle everything around passkeys:

  • a Livewire component called livewire:passkeys to generate a display generate passkeys for a user.
  • a Blade component that renders a link that, when clicking, will start the passkey authorization flow

Generating and displaying passkeys

The package provides a Livewire component called livewire:passkeys to generate a display generate passkeys for a user.

Here's how it looks like when creating a passkey on Mailcoach, which uses spatie/laravel-passkeys under the hood.


With the package installed (which only takes a few steps), the only thing you need to do to generate and display passkeys is including this component in your views.

You can include this component in your views.

<livewire:passkeys />

The default layout of the component is intentionally very basic, you can style it as you like it yourself. In the movie above we’ve styled the component so it fits perfectly in the UI of Mailcoach.

Authenticate using passkeys

To let your users authenticate using a passkey, you can include the authenticate-passkey Blade component in your view, typically on your login view.

<x-authenticate-passkey />

Here's what logging in on Mailcoach using a passkey looks like. Note that your don't have to type in your email address or password. You just need to click the "Log in with passkey" and let 1Pass (or alternative app) do the rest.


How passkeys work under the hood

A passkey is a unique key pair generated by a password manager or hardware security key. One key is public and stored in the passkeys table of your Laravel app, and the other is private and stored in the password manager.

When logging using a passkey, your Laravel app will generate a challenge that your password manager can solve using the stored private key. The password manager will create a secure response and send it back to Laravel app. If the challenge is solved correctly, you will be logged in.

You can learn more about how passkeys work here. There's also this wonderful course on Laracasts about how to implement passkeys in Laravel.

Help us out

Currently, the package only support Livewire, and doesn't provide dedicated components for Inertia-based apps. However, you can still use the package's features in your Inertia applications by creating your own components that utilize the package's action classes.

If you're using Inertia with either Vue or React, you can contribute to this package PRing additional docs or components.

In closing

Passkeys are incredibly convenient for users. Personally, it’s my favorite way of logging in to any service. Our new spatie/laravel-passkeys makes it incredibly easy to add this functionality to your Laravel app.

To get started using our package, head over to the extensive documentation.

Continue reading

OSZAR »