Blackcube Aurelia 2 webauthn toolkit

This toolkit allows easy setup of Webauthn.

Install

Package is available on npm

Then you can install the package:

npm install @blackcube/aurelia2-webauthn

Howto

There are 2 main processes:

Those processes are based on the Webauthn standard and need webservices server side.

Youn can find a Yii2 module tohandle the server side part here: Yii2 Webauthn module

Services

5 services methods are available:

isAvailable(): Promise<boolean> to check if the browser supports Webauthn
registerDevice(email: string, name: string|null = null): Promise<boolean> to register a device ,and create associated user
attachDevice(): Promise<any> to attach a device to logged user
login(email: string): Promise<boolean> to login a specific user with a device
loginDevice(): Promise<boolean> to login with a device and let the user select the passkey

Registering it in app

import Aurelia, { ConsoleSink, LoggerConfiguration, LogLevel} from 'aurelia';
import { WebauthnConfiguration } from "@blackcube/aurelia2-webauthn";
import { MyApp } from './my-app';
Aurelia
    .register(WebauthnConfiguration)
    .register(LoggerConfiguration.create({
        level: LogLevel.trace,
        colorOptions: 'colors',
        sinks: [ConsoleSink]
    }))
    .app(MyApp)
    .start();

Additional configuration if needed

You can configure the toolkit by passing a configuration object to the configure method:

import Aurelia, { ConsoleSink, LoggerConfiguration, LogLevel} from 'aurelia';
import { WebauthnConfiguration } from "@blackcube/aurelia2-webauthn";
import { MyApp } from './my-app';
Aurelia
    .register(WebauthnConfiguration.configure({
        prepareAttachDeviceUrl: '/webauthn/prepare-attach-device',
        prepareRegisterDeviceUrl: '/webauthn/prepare-register-device',
        validateRegisterUrl: '/webauthn/validate-register',
        prepareLoginUrl: '/webauthn/prepare-login',
        prepareLoginDeviceUrl: '/webauthn/prepare-login-device',
        validateLoginUrl: '/webauthn/validate-login'
    }))
    .register(LoggerConfiguration.create({
        level: LogLevel.trace,
        colorOptions: 'colors',
        sinks: [ConsoleSink]
    }))
    .app(MyApp)
    .start();

Default values are:

prepareAttachDeviceUrl: '/webauthn/prepare-register-user-device',
prepareRegisterDeviceUrl: '/webauthn/prepare-register-device',
validateRegisterUrl: '/webauthn/register-validate',
prepareLoginUrl: '/webauthn/prepare-login-user-device',
prepareLoginDeviceUrl: '/webauthn/prepare-login-device',
validateLoginUrl: '/webauthn/login-validate'
prepareAttachDeviceUrl URL used to prepare the attach device process
prepareRegisterDeviceUrl URL used to prepare the register device process
validateRegisterUrl URL used to validate the register/attach process
prepareLoginUrl URL used to prepare the login process for a specific user
prepareLoginDeviceUrl URL used to prepare the login device process
validateLoginUrl URL used to validate the login process

Usage in HTML

Simple components are available to use the toolkit in HTML.

Webauthn login

<template>
    <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
        <h2 class="py-5 text-xl font-semibold leading-7 text-gray-900">Webauthn login</h2>

        <bc-webauthn-login user.bind="false" route="home"></bc-webauthn-login>
    </div>
</template>

Bindable properties are:

user : boolean, if true, the component will show a text input to enter the email of the user to login
route : string, the route to redirect to after a successful login (needs routing to be configured)
url : string, the url to redirect to after a successful login (if routing is not set)

Webauthn register

<template>
    <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
        <h2 class="py-5 text-xl font-semibold leading-7 text-gray-900">Webauthn register</h2>

        <bc-webauthn-register></bc-webauthn-register>
    </div>
</template>

Bindable properties are:

user : boolean, if true, the component will show a text input to enter the email and create a new user. If false, the component will use the logged user and attach the device to it
route : string, the route to redirect to after a successful register (needs routing to be configured)
url : string, the url to redirect to after a successful register (if routing is not set)