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.

See USAGE.md for example code.

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.
• @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.
• @require_resident_key (Optional) Set to false to allow non-passkey credentials. Defaults to true.

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.