laravel-fastlogin

Open source

Allow your users to login with FaceID/TouchID

993 stars0 likes2 views

About

Allow your users to login with FaceID/TouchID

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.

Installation

You can install the package via composer:

bash

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.

php

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).

javascript

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

Then, on the login page, you should check if the user has a credential saved (you can do so by calling the $request->hasCredential() method) and, if so, displaying a button to sign in using FastLogin.

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

javascript

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