Integrating FIDO auth journeys in JavaScript

PingOne Advanced Identity Cloud PingAM JavaScript

The FIDO module offers a streamlined API for handling FIDO interactions.

It abstracts away the complexities of the underlying FIDO protocols, allowing you to quickly add strong authentication to your applications.

Step 1. Installing modules

To add FIDO and WebAuthn capabilities to your JavaScript apps for Journeys you need to import the WebAuthn module. The WebAuthn module for JavaScript is exported as a member of the @forgerock/journey-client npm package.

Install the journey client into your JavaScript apps using npm:

Install the journey client

npm install @forgerock/journey-client --save

Step 2. Importing the WebAuthn module

In your JavaScript app, import the WebAuthn module and step type as named imports:

Import the module and step type

import { WebAuthn, WebAuthnStepType } from '@forgerock/journey-client/webauthn';

Step 3. Registering FIDO authenticators

To register a FIDO authenticator, use the register() function. Pass the step object as a parameter to the method.

The WebAuthn module leverages the WebAuthn APIs built into the browser to create a new credential. It then updates the callbacks in the step with the relevant credentials.

Return the updated step to the server by calling journeyClient.next(), and passing the step as the parameter.

Registering a FIDO authenticator in an auth journey

const webAuthnStep = WebAuthn.getWebAuthnStepType(step);

if (webAuthnStep === WebAuthnStepType.Registration) {
    await WebAuthn.register(step);
}

// Return updated step to server to continue journey
step = await journeyClient.next(step);

The browser displays the appropriate user interface to register a new WebAuthn credential, for example a local-only Passkey:

Figure 1. Creating a local Passkey when Authentication Attachment is set to PLATFORM

Step 4. Authenticating using a FIDO authenticator

To authenticate using a registered FIDO authenticator, use the authenticate() function. Pass the step object as a parameter to the method.

The WebAuthn module leverages the WebAuthn APIs built into the browser to present the available credentials, and authenticate the user. It then updates the callbacks in the step with the details from the WebAuthn authenticator.