Laravel – Add FaceID And TouchID Login Apps

There is a new and existing package which allows users to register physical authentication devices (FaceID or TouchID on iPhones and Macs, Fingerprints on Android, Hello on Windows and USB keys). This will save their time and effort to enter credentials. Because, no one wants to enter credentials anymore, I mean are we living in caves?

So after installing Laravel we have to run this composer command.

composer require m1guelpf/laravel-fastlogin

Then add \M1guelpf\FastLogin\Models\Concerns\HasFastLogin trait into you User Model like this.

class User extends Authenticatable
{
    use CanFastLogin;
}

Now after taking care of everything on backend, lets talk about front end. We need to run this command in terminal.

yarn add @web-auth/webauthn-helper js-cookie

This will add packages like @web-auth/webauthn-helper and js-cookie in your app. Now you need this code to make things work.

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()
    })
}

So after having done that, we hope the users of your Laravel app will never require to enter credentials like ancient web culture days.

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 the user-generated event (like a “click” event).