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.
You can install the package via composer:
composer require m1guelpf/laravel-fastloginYou'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;
}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 { 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).
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()
})
}Please see CONTRIBUTING for details.
Please review our security policy on how to report security vulnerabilities.
The MIT License (MIT). Please see License File for more information.