A LiveComponent for registering a new Passkey via the WebAuthn API.

Registration = Sign Up

Registration is the process of creating and associating a new key with a user account.

Existing users may also register additional keys for backup, survivorship, sharing, or other purposes. Your application may set limits on how many keys are associated with an account based on business concerns.

Assigns

• @user: (Required) A WebauthnComponents.WebauthnUser struct.
• @challenge: (Internal) A Wax.Challenge struct created by the component, used to create a new credential request in the client.
• @display_text (Optional) The text displayed inside the button. Defaults to "Sign Up".
• @show_icon? (Optional) Controls visibility of the key icon. Defaults to true.
• @class (Optional) CSS classes for overriding the default button style.
• @disabled (Optional) Set to true when the SupportHook indicates WebAuthn is not supported or enabled by the browser. Defaults to false.
• @id (Optional) An HTML element ID.
• @resident_key (Optional) Set to :preferred or :discouraged to allow non-passkey credentials. Defaults to :required.
• @check_uvpa_available (Optional) Set to true to check if the user has a platform authenticator available. Defaults to false. See the User Verifying Platform Authenticator section for more information.
• @uvpa_error_message (Optional) The message displayed when the user does not have a UVPA available. Defaults to "Registration unavailable. Your device does not support passkeys. Please install a passkey authenticator."

Events

The following events are handled internally by RegistrationComponent:

• "register": Triggered when a user clicks the register button.
• "registration-challenge": Sent from the component to the client to request credential registration for the endpoint URL.
• "registration-attestation" Sent by the client when a registration attestation has been created.
• "error" Sent by the client when an error occurs.

Messages

This component handles communication between the client, manages its own state, and communicates with the parent LiveView when registration is successful. Errors are also reported to the parent LiveView when the client pushes an error, or when registration fails.

The following messages must be handled by the parent LiveView using Phoenix.LiveView.handle_info/2:

• {:registration_successful, key_id: raw_id, public_key: public_key}
  • :key_id is a raw binary containing the credential id created by the browser.
  • :public_key is a map of raw binaries which may be used later for authentication.
  • These values must be persisted by the parent application in order to be used later during authentication.
• {:registration_failure, message: message}
  • :message is an exception message returned by Wax when registration fails.
• {:error, payload}
  • payload contains the message, name, and stack returned by the browser upon timeout or other client-side errors.

Errors should be displayed to the user via Phoenix.LiveView.put_flash/3. However, some errors may be too technical or cryptic to be useful to users, so the parent LiveView may paraphrase the message for clarity.

User Verifying Platform Authenticator

The User Verifying Platform Authenticator (UVPA) is a special type of authenticator that requires user verification. This is typically a biometric or PIN-based authenticator that is built into the platform, such as Touch ID or Windows Hello.

When @check_uvpa_available is set to true, the component will check if the user has a UVPA available before allowing registration. If the user does not have a UVPA available, the component will disable the registration button and display a message indicating that the user must set up a UVPA before continuing.

Example use case: The first/primary credential on a sensitive account may be required to come from a platform authenticator. Then, secondary credentials could be created from external devices.