Add FaceID and TouchID Login to Your Laravel Apps

Allow your users to register physical authentication devices (FaceID or TouchID on iPhones & macs, fingerprint on Android, Hello on Windows and USB keys) to skip entering their login credentials.

 Install via composer:

composer require m1guelpf/laravel-fastlogin

You’ll then need to add the \M1guelpf\FastLogin\Models\Concerns\CanFastLogin trait to your user model and migrate your database by running php artisan migrate.

class User extends Authenticatable
{
    use CanFastLogin;
}

Usage

This package takes care of everything you need on the backend. To make our life easier on the frontend, we’ll be using @web-auth/webauthn-helper and js-cookie. You can install them by running yarn add @web-auth/webauthn-helper js-cookie.

To get started, you need to have the user register a new credential. You can do so by presenting them with a modal when they login, or by adding the option to their settings page.

Note: Due to Apple’s restrictions, you can only call the creation function after a user gesture, that is, the function needs to be invoked in an user-generated event (like a “click” event).

import Cookies from 'js-cookie'
import { useLogin } from '@web-auth/webauthn-helper'
const onClick = () => {
    const token = Cookies.get('XSRF-TOKEN')
    useLogin({
        actionUrl: route('fastlogin.login'),
        optionsUrl: route('fastlogin.login.details'),
        actionHeader: {
            'x-xsrf-token': token
        },
    }, {
        'x-xsrf-token': token
    })().then(() => {
        // the user has been logged in
        window.location.reload()
    })
}

You can learn more about this package, get full installation instructions, and view the source code on GitHub.