How to Add Face ID and Touch ID Login to Your Laravel Apps

m1guelpf/laravel-fastlogin is a package that empowers users to register physical authentication devices (FaceID or TouchID on iPhones & macs, fingerprint on Android, Hello on Windows, and USB keys) without entering their login credentials.

Installation

You can install this package through composer. You’ve to run this command:

composer require m1guelpf/laravel-fastlogin

Next, you’ve to append the \M1guelpf\FastLogin\Models\Concerns\CanFastLogin
trait to your user model. After that, you’ve to migrate your database by running the php artisan migrate command.

class User extends Authenticatable
{
    use CanFastLogin;
}

Usage

This package takes responsibility for everything you require on the backend. To make your life more comfortable on the front-end, you should use @web-auth/webauthn-helper and js-cookie. You can install them by running yarn add @web-auth/webauthn-helper js-cookie.

For a quick start, you need to have the user register a new credential. You can do it by proffering them with a modal when they login or you can add the option to their settings page.

import Cookies from 'js-cookie'
import { useRegistration } from '@web-auth/webauthn-helper'

const onClick = () => {
    const token = Cookies.get('XSRF-TOKEN')
    useRegistration({
        actionUrl: route('fastlogin.create'),
        optionsUrl: route('fastlogin.create.details'),
        actionHeader: {
            'x-xsrf-token': token
        },
    }, {
        'x-xsrf-token': token
    })().then(() => {
        // credential has been added
    })
}

Later, you should review the login page if the user has a credential stored (you can do it by calling the $request->hasCredential() method) and by displaying a button to sign in employing FastLogin.

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 get the full installation guide and the source code on GitHub.
https://github.com/m1guelpf/laravel-fastlogin