Blog Detail

8

Jul
How to Add Face ID and Touch ID Login to Your Laravel Apps cover image

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

Published at : 08-07-2021

Author : Rizwan Aslam
AUTHOR
Rizwan Aslam

I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.

web application development client
web application development client
web application development client
web application development client
web application development client

Launch project