---
title: Integrating FIDO auth journeys in JavaScript
description: PingOne Advanced Identity Cloud PingAM JavaScript
component: orchsdks
page_id: orchsdks:journey:use-cases/fido/javascript/javascript-fido-auth-journey
canonical_url: https://developer.pingidentity.com/orchsdks/journey/use-cases/fido/javascript/javascript-fido-auth-journey.html
revdate: Thu, 13 Nov 2025 14:14:33 +0100
keywords: ["FIDO", "WebAuthn", "MFA", "Hardware", "Source Code", "Integration", "SDK", "JavaScript"]
section_ids:
  JavaScript_fido_module: Step 1. Installing modules
  step_2_importing_the_webauthn_module: Step 2. Importing the WebAuthn module
  step_3_registering_fido_authenticators: Step 3. Registering FIDO authenticators
  step_4_authenticating_using_a_fido_authenticator: Step 4. Authenticating using a FIDO authenticator
---

# Integrating FIDO auth journeys in JavaScript

[icon: circle-check, set=far]PingOne Advanced Identity Cloud [icon: circle-check, set=far]PingAM [icon: js, set=fab]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

```shell
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

```javascript
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

```javascript
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:

![Creating a local Passkey when Authentication Attachment is set to PLATFORM](../../../_images/webauthn/chrome-create-platform-passkey.png)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.

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

Authenticating with a FIDO authenticator in an auth journey

```javascript
const webAuthnStep = WebAuthn.getWebAuthnStepType(step);

if (webAuthnStep === WebAuthnStepType.Authentication) {
    await WebAuthn.authenticate(step);
}

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