---
title: Customizing the HTML Form Adapter for passwordless authentication with a FIDO2 passkey
description: For admins running PingFederate 13.0.0 or later with the PingID integration kit 2.30 and later, you can benefit from a more consistent passwordless authentication experience.
component: pingid
page_id: pingid:pingid_integrations:customizing_html_adapter_for_passwordless_auth_passkey
canonical_url: http://docs.pingidentity.com/pingid/pingid_integrations/customizing_html_adapter_for_passwordless_auth_passkey.html
revdate: April 18, 2024
section_ids:
  before-you-begin: Before you begin
  about-this-task: About this task
  steps: Steps
---

# Customizing the HTML Form Adapter for passwordless authentication with a FIDO2 passkey

|   |                                                                                                                                                                                                                                                                                                                                                          |
| - | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|   | For admins running PingFederate 13.0.0 or later with the PingID integration kit 2.30 and later, you can benefit from a more consistent passwordless authentication experience.Learn more in [Configuring a PingFederate policy for a consistent passwordless authentication experience](pid_configuring_pf_policy_for_passwordless_authentication.html). |

Customize the passwordless authentication flow by adding a passkey icon to the sign-on window. You can also choose to show the passkey button when using webAuthn-compatible browsers only.

## Before you begin

Before you start, [create a PingFederate policy for passwordless authentication with a security key](pid_configuring_pf_policy_for_passwordless_authentication_fido2_passkeys.html).

## About this task

Add an HTML Form Adapter so that you can:

* Modify the icon to the passwordless flow button in the HTML Form Adapter to display a passkey icon.

* You can choose to show the passkey button only when the browser is webAuthn compatible.

## Steps

1. To add a passwordless authentication flow icon:

   1. Download the passkey image [here](https://authenticator.pingone.com/registration/images/multiple-devices/add-device/Passkey-black.png) and in the relevant PingFederate folder, save the icon to the `server/default/conf/template/assets/images` folder as `icon-passkey.png`.

   2. In the PingFederate folder, go to `server/default/conf/template/assets/css` and open the `main.css `file in a text editor.

   3. Add the following code to the `main.css `file, and then save the file.

      ```
      body .button-container .social-media.SecurityKey, body .button-container .social-media.Security.Key, body .button-container .social-media.securitykey, body .button-container .social-media.security.key {
        background-image: url("../images/icon-passkey.png");
        background-position: left 10px center;
        background-size: 25px auto;
        font-size: 0;
        line-height: 0;
      }
      body .button-container .social-media.SecurityKey::after, body .button-container .social-media.Security.Key::after, body .button-container .social-media.securitykey::after, body .button-container .social-media.security.key::after {
        content: 'Passkey';
        font-size: 14px;
        line-height: 42px;
      }
      ```

      |   |                                                                                     |
      | - | ----------------------------------------------------------------------------------- |
      |   | The css styling can be modified in accordance with your organization's style guide. |

   4. (Optional) To modify the name of the passwordless authentication button that displays in the UI, in the main css file, modify the following line:

      ```
      content: 'Passkey';
      ```

2. To hide the passkey button when a browser doesn't support webAuthn:

   1. In the relevant PingFederate folder, go to `server/default/conf/template` and open `html.form.login.template.html` file in a text editor.

   2. In the html body add `isWebAuthnSupported();` to the `onload` attribute.

      ```
      <body onload="setFocus();isWebAuthnSupported();isWebAuthnPlatformAuthenticatorAvailable();">
      ```

   3. In the `script` element, add a new function, and then save the file.

      ```
      function isWebAuthnSupported() {
          var webauthnSupported = IsWebAuthnSupported();
          if (!webauthnSupported) {
              theElement = document.getElementById("securitykey-div");
              if (theElement) {
                  theElement.style.display = "none";
              }
          }
      }
      ```