---
title: Preparing PingOne for FIDO on JavaScript
description: PingOne JavaScript
component: orchsdks
page_id: orchsdks:davinci:use-cases/fido/javascript/before-you-begin
canonical_url: https://developer.pingidentity.com/orchsdks/davinci/use-cases/fido/javascript/before-you-begin.html
revdate: Fri, 13 May 2022 09:39:02 +0200
section_ids:
  javascript-fido-policies: Step 1. Configuring a FIDO policy in PingOne
  add-fido-to-mfa: Step 2. Adding a FIDO policy to an MFA policy in PingOne
  javascript-fido-p1-forms: Step 3. Creating FIDO forms in PingOne
  creating_forms_to_list_mfa_devices_in_pingone: Creating forms to list MFA devices in PingOne
  creating_forms_to_initiate_fido_operations_in_pingone: Creating forms to initiate FIDO operations in PingOne
  javascript-fido_davinci-flows: Step 4. Configuring DaVinci flows for FIDO
  configuring_a_fido_registration_davinci_flow: Configuring a FIDO registration DaVinci flow
  configuring_a_fido_authentication_davinci_flow: Configuring a FIDO authentication DaVinci flow
  launch: Step 5. Configuring a DaVinci flow to be launched by your app
  next_steps: Next steps
---

# Preparing PingOne for FIDO on JavaScript

[icon: circle-check, set=far]PingOne [icon: js, set=fab]JavaScript

To use FIDO authentication in your JavaScript apps when using PingOne you must complete the following tasks:

* [Step 1. Configuring a FIDO policy in PingOne](#javascript-fido-policies)

* [Step 2. Adding a FIDO policy to an MFA policy in PingOne](#add-fido-to-mfa)

* [Step 3. Creating FIDO forms in PingOne](#javascript-fido-p1-forms)

* [Step 4. Configuring DaVinci flows for FIDO](#javascript-fido_davinci-flows)

* [Step 5. Configuring a DaVinci flow to be launched by your app](#launch)

## Step 1. Configuring a FIDO policy in PingOne

A FIDO policy defines which FIDO devices are permitted and the desired behavior when registering and authenticating your users.

You can create a new FIDO policy, or update an existing FIDO policy to suit your requirements. The default **Passkeys** FIDO policy is a great starting point for use with the **FIDO** module:

![p1 fido policy](../../../../_images/fido/p1-fido-policy.png)Figure 1. The default Passkeys FIDO policy in PingOne

To create or edit a FIDO policy:

1. In the PingOne admin console, go to **Authentication > FIDO**.

2. Click the **Plus** icon ([icon: circle-plus, set=fas]) to create a new FIDO policy, or select an existing policy and then click the **Pencil** icon ([icon: pencil, set=far]) to edit it.

3. Configure the FIDO policy as required. Learn more about [Adding a FIDO policy](https://docs.pingidentity.com/pingone/authentication/p1_creating_a_fido_policy.html) in the **PingOne** documentation.

4. **Save** your changes.

5. To set the policy as the default, click the **More Options** icon ([icon: ellipsis-vertical, set=fa]), and then click **Make Default**.

   ![pingone fido policy make default](../../../../_images/fido/pingone-fido-policy-make-default.png)Figure 2. Setting the default FIDO policy in PingOne

Make a note of your FIDO policy name, you'll need it in [Step 2. Adding a FIDO policy to an MFA policy in PingOne](#add-fido-to-mfa).

## Step 2. Adding a FIDO policy to an MFA policy in PingOne

After configuring a FIDO policy you must include it in an MFA policy, alongside any other MFA methods you want to enable.

1. In the PingOne admin console, go to **Authentication > MFA**.

2. Click the **Plus** icon ([icon: circle-plus, set=fas]) to create a new MFA policy, or select an existing policy and then click the **Pencil** icon ([icon: pencil, set=far]) to edit it.

3. In **Allowed Authentication Methods**, enable **FIDO2**.

   Learn more about [Configuring an MFA policy for strong authentication](https://docs.pingidentity.com/pingone/strong_authentication_mfa/p1_creating_an_mfa_policy_for_strong_auth.html) in the **PingOne** documentation.

4. In **FIDO Policy**, select the name of the FIDO policy you created earlier. For example, `Passkeys`.

5. **Save** your changes.

   The result resembles the following:

   ![p1 mfa policy](../../../../_images/fido/p1-mfa-policy.png)Figure 3. An example MFA policy with selected Passkeys FIDO policy in PingOne

Make a note of your MFA policy name, and the policy ID. You will need these in [Step 4. Configuring DaVinci flows for FIDO](#javascript-fido_davinci-flows).

## Step 3. Creating FIDO forms in PingOne

You need to create two sets of PingOne forms—​one set for FIDO registration, and one set for FIDO authentication.

Each set requires a form to list the device types available for the operation, and another form to handle the actual FIDO operation.

### Creating forms to list MFA devices in PingOne

To configure a form to list the methods available for FIDO registration:

1. In the PingOne admin console, go to **User Experience > Forms**.

2. Click the **Plus** icon ([icon: circle-plus, set=fas]), enter a **Form Name** and optionally a **Form Description**, and then click **Add Form**.

   A dialog containing a list of starter templates appears.

3. In the list of templates, select **MFA Device Selection - Registration**.

4. (Optional) Customize the form in the form builder.

5. Click **Save**.

   The result resembles the following:

   ![p1 forms fido device list registration](../../../../_images/fido/p1-forms-fido-device-list-registration.png)Figure 4. PingOne form to list MFA devices for registration

To configure a form to list the methods available for FIDO authentication:

1. In the PingOne admin console, go to **User Experience > Forms**.

2. Click the **[icon: plus, set=fa]**icon and select the **MFA Device Selection - - Authentication** template.

3. (Optional) Customize the templated form in the form builder.

4. Click **Save**.

   The result resembles the following:

   ![p1 forms fido device list authentication](../../../../_images/fido/p1-forms-fido-device-list-authentication.png)Figure 5. PingOne form to list MFA devices for authentication

### Creating forms to initiate FIDO operations in PingOne

To create a form in PingOne to initiate FIDO operations for registration, complete the following steps:

1. In the PingOne admin console, go to **User Experience > Forms**.

2. Click the **[icon: plus, set=fa]**icon and select the **FIDO2 - Registration** template.

3. (Optional) Customize the templated form in the form builder.

4. Click **Save**.

   The result resembles the following:

   ![p1 forms fido registration](../../../../_images/fido/p1-forms-fido-registration.png)Figure 6. PingOne form to initialize FIDO for registration

To create a form in PingOne to initiate FIDO operations for authentication, complete the following steps:

1. In the PingOne admin console, go to **User Experience > Forms**.

2. Click the **[icon: plus, set=fa]**icon and select the **FIDO2 - Authentication** template.

3. (Optional) Customize the templated form in the form builder.

4. Click **Save**.

   The result resembles the following:

   ![p1 forms fido authentication](../../../../_images/fido/p1-forms-fido-authentication.png)Figure 7. PingOne form to initialize FIDO for authentication

## Step 4. Configuring DaVinci flows for FIDO

You'll need a DaVinci flow for both registering a FIDO device, and authenticating with a FIDO device.

Each flow will need to display the appropriate device selection form you created earlier, as well as the FIDO initiation form.

### Configuring a FIDO registration DaVinci flow

In DaVinci, create or edit a FIDO registration flow, and configure it as follows:

1. In the DaVinci flow, add connectors to allow the user to select the MFA device type to register:

   1. Add a **Form Connector**, and configure it to display the form that lists MFA devices for registration as follows:

      1. Using the **Show Form** capability, in the **Form** field, select the form that lists MFA devices for registration that you created in a previous step.

      2. In **Authentication Method Source**, select the MFA policy that you added your FIDO2 policy to in a previous step.

      The result should resemble the following:

      ![p1 flow fido show device reg config](../../../../_images/fido/p1-flow-fido-show-device-reg-config.png)Figure 8. Configuring a PingOne Forms connector for FIDO

   2. Add a **Functions** connector to handle the device selection, including a `FIDO2` condition.

      The result should resemble the following:

      ![p1 flow fido2 device selection nodes](../../../../_images/fido/p1-flow-fido2-device-selection-nodes.png)Figure 9. Example connectors for selecting the FIDO device to register

2. Connect the `FIDO2` condition to a section of the flow with connectors to register a FIDO2 device:

   1. Add a PingOne MFA connector node and select the **Create Device** capability. (1)

      |   |                                                                                                       |
      | - | ----------------------------------------------------------------------------------------------------- |
      |   | This connector supplies the **Public Key Credential Creation** field to the following Form connector. |

   2. In a subsequent node, add a **Form** connector and select the **Show Form** capability, then select the FIDO2 registration form you created in a previous step. (2)

      |   |                                                                                                                            |
      | - | -------------------------------------------------------------------------------------------------------------------------- |
      |   | Select the FIDO registration initiation form, not the form you created to list the MFA devices available for registration. |

   3. In a subsequent node, add another PingOne MFA node and select the **Activate Device** capability. (3)

      The result should resemble the following:

      ![A DaVinci FIDO2 MFA flow. The first Form connector is set to Create Device Authentication, followed by a Form connector using Show Form with FIDO2 Authentication selected. The final Form connector is set to FIDO Assertion.](../../../../_images/fido/p1-flow-fido2-registration-nodes.png)Figure 10. Example FIDO registration DaVinci flow connectors.

3. Add the URL where you are hosting the JavaScript app in the **Origin** property of the **Activate Device** capability:

   1. Select the PingOne MFA node with the **Activate Device** capability.

   2. On the **General** tab, in the **Origin** field, add the base domain URL, including the protocol, of where you are hosting the JavaScript app.

      For example, `https://my-rp-domain.com`

4. Save and deploy your changes.

### Configuring a FIDO authentication DaVinci flow

In DaVinci, create or edit a FIDO authentication flow, and configure it as follows:

1. In the DaVinci flow, add connectors to allow the user to select the MFA device type to authenticate with:

   1. Add a **Form Connector**, and configure it to display the form that lists MFA devices for registration as follows:

      1. Using the **Show Form** capability, in the **Form** field, select the form that lists MFA devices for authentication that you created in a previous step.

      2. In **Authentication Method Source**, select the MFA policy that you added your FIDO2 policy to in a previous step.

      The result should resemble the following:

      ![p1 flow fido show device auth config](../../../../_images/fido/p1-flow-fido-show-device-auth-config.png)Figure 11. Configuring a PingOne Forms connector for FIDO

   2. Add a **Functions** connector to handle the device selection, including a `FIDO2` condition.

      The result should resemble the following:

      ![p1 flow fido2 device selection nodes](../../../../_images/fido/p1-flow-fido2-device-selection-nodes.png)Figure 12. Example connectors for selecting the FIDO device to authenticate with

2. Connect the `FIDO2` condition to a section of the flow with connectors to authenticate with a FIDO2 device:

   1. Add a **PingOne MFA** connector node and select the **Create Device Authentication** capability. (1)

      |   |                                                                                                      |
      | - | ---------------------------------------------------------------------------------------------------- |
      |   | This connector supplies the **Public Key Credential Request** field to the following Form connector. |

      1. Select the **PingOne MFA** connector node, and on the **General** tab, in the **MFA Policy ID** field, enter the ID of the MFA policy you added your FIDO2 policy to in a previous step.

         |   |                                                                                                                          |
         | - | ------------------------------------------------------------------------------------------------------------------------ |
         |   | You must enter the ID of the MFA policy, for example `9db73f8f-eb79-0e60-032e-7ec026262af3`, not the name of the policy. |

         The result should resemble the following:

         ![p1 flow fido mfa connector mfa policy](../../../../_images/fido/p1-flow-fido-mfa-connector-mfa-policy.png)Figure 13. Adding the MFA Policy ID to a PingOne MFA node, with the Create Device Authentication capability.

   2. In a subsequent node, add a **Form** connector and select the **Show Form** capability, then select the FIDO2 authentication form you created in a previous step. (2)

      |   |                                                                                                                                |
      | - | ------------------------------------------------------------------------------------------------------------------------------ |
      |   | Select the FIDO authentication initiation form, not the form you created to list the MFA devices available for authentication. |

   3. In a subsequent node, add another **PingOne MFA** connector node and select the **FIDO Assertion** capability. (3)

      The result should resemble the following:

      ![A DaVinci FIDO2 MFA flow. The first Form connector is set to Create Device Authentication, followed by a Form connector using Show Form with FIDO2 Authentication selected. The final Form connector is set to FIDO Assertion.](../../../../_images/fido/p1-flow-fido2-authentication-nodes.png)Figure 14. Example FIDO authentication DaVinci flow connectors.

3. Add the URL where you are hosting your JavaScript app in the **Origin** property of the **FIDO Assertion** capability:

   1. Select the PingOne MFA node with the **FIDO Assertion** capability.

   2. On the **General** tab, in the **Origin** field, add the URL, including the protocol, where you are hosting the JavaScript app.

      For example, `https://my-rp-domain.com`

4. Save and deploy your changes.

## Step 5. Configuring a DaVinci flow to be launched by your app

After configuring a DaVinci flow for use with the Orchestration SDKs you must configure PingOne so that you can launch the flow from the DaVinci module.

This involves performing the following high-level steps:

1. Checking that your DaVinci flow uses only [compatible connectors and fields](../../../compatibility.html).

2. Creating an application in DaVinci to connect PingOne to the DaVinci flow.

3. Creating an application in PingOne that the DaVinci module can connect to and access the DaVinci application and its PingOne Flow Policy.

To learn how to complete the steps, refer to [Launching a flow with a Ping SDK](https://docs.pingidentity.com/davinci/integrating_flows_into_applications/davinci_sdk_launching_a_flow_with_the_sdk.html) in the DaVinci documentation.

## Next steps

You can now proceed to [Adding strong authentication in JavaScript](javascript-fido-davinci-flows.html).