Skip to main content

User registration

This section will cover the self-registration of a new user account. The user will create a new account by entering their username, and registering their first passkey.

Demonstration​

The videos below will demonstrate how a user self registers in the application.

This first video will demonstrates a user creating an account using a passkey that was registered on a security key.

This second video will demonstrate a user creating a passkey using their on-device authenticator. In our example we will be leveraging Touch ID on a MacOS device.

UX Considerations​

Below is a list of different user experience notes based on the demonstrations above

  1. For simplicity, our demonstration only allows a user to create an account by registering a passkey. The FIDO UX guidelines note that you should continue to allow people to create accounts with passwords.
  2. Presenting users with different options for creating a passkey specifically using security keys (cross-platform) or biometrics (platform) can help to simplify the user experience, and allows users to more explicitly understand where and how their passkeys are being generated.
    • The security key option will always prompt the user to create a passkey with a cross device authenticator (security key or through a QR code)
    • The biometric option will always prompt the user to create a passkey with their on-device authenticator (e.g. Windows Hello, Face ID, Android Biometrics)
  3. During these early phases of passkey adoption, you may want to include a blurb that provides a simple explanation on passkeys. Below is the wording used in our example application seen in the demonstration above

Implementation guidance​

Username selection​

The user registration flow closely reflects the sample shown in the previous section implementation guidance for registering a passkey on a web client.

The example in the link above infers the username being sent to the relying party for the attestation options from the current user session. Because the user has not been authenticated, or created, the webpage will need a text input to allow for a username to be provided.

The relying party will note that there are no credentials associated to the username, and will generate a new user handle that will be provided to the identity provider to create a new user.

Passkey options​

Our page provides two different choices to help guide a user in generating a new passkey: biometrics and security keys. As mentioned in the UX section, this is done to provide targeted guidance to help users select the option that is most appropriate for them.

This is done by providing different parameters to the method used to generate the PublicKeyCredentialCreationOptions from the /attestation/options API call.

In this case, we will provide a button for security keys, and another for biometrics. They will both utilize the registerPasskey() method, but pass different values to indicate their authenticator preference. The highlighted line below indicates the authenticatorAttachment property, which allows your client to set its authenticator preference. An explanation on these values can be found here.

tip

Note that the concept of PasskeyServices was covered in a previous section. The getAttestationOptions method has been expanded in the code sample below to demonstrate that we are attempting to invoke different options for the authenticatorAttachment property.

async function registerPasskey(authenticatorAttachment) {
  const request = {
    method: "POST",
    headers: {
      /* */
    },
    body: {
      userName: "${username}",
      displayName: "${username}",
      authenticatorSelection: {
        residentKey: "preferred",
        authenticatorAttachment: authenticatorAttachment,
        userVerification: "required",
      },
      attestation: "direct",
    },
  };

  const attestationOptions = await fetch(base_url, request);

  const makeCredential = await navigator.credentials.create(attestationOptions);

  const attestationResult = sendAttestationResult(makeCredential);
}

<button onclick="registerPasskey('cross-platform')">Click me for a security key passkey<button/>
<button onclick="registerPasskey('platform')">Click me for a biometric passkey<button/>