View Source WebauthnComponents.RegistrationComponent (WebauthnComponents v0.3.0)

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. Depending on your implementation, a new user may register a new account using only a Passkey, which does not require username or email.

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

Assigns

  • @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.
  • @user: (Optional) A map or struct containing an id, username or email, and display_name. If no user is provided, a random id will be generated, which will be encoded as the user_handle during registration.

events

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

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, user_handle: user_handle}
    • :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.
    • :user_handle is a raw binary representing the provided user id, or a randomly generated uuid.
    • 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.

Link to this section Summary

Link to this section Functions

Link to this function

handle_event(event, payload, socket)

View Source

Callback implementation for Phoenix.LiveComponent.handle_event/3.

Callback implementation for Phoenix.LiveComponent.mount/1.

Callback implementation for Phoenix.LiveComponent.render/1.