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) AWax.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 totrue
when theSupportHook
indicates WebAuthn is not supported or enabled by the browser. Defaults tofalse
.@id
(Optional) An HTML element ID.@require_resident_key
(Optional) Set tofalse
to allow non-passkey credentials. Defaults totrue
.@user
: (Optional) A map or struct containing anid
,username
oremail
, anddisplay_name
. If no user is provided, a randomid
will be generated, which will be encoded as theuser_handle
during registration.
events
Events
The following events are handled internally by RegistrationComponent
:
"register"
: Triggered when a user clicks theregister
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 themessage
,name
, andstack
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
Functions
Callback implementation for Phoenix.LiveComponent.handle_event/3
.
Callback implementation for Phoenix.LiveComponent.mount/1
.
Callback implementation for Phoenix.LiveComponent.render/1
.
Link to this section Functions
Callback implementation for Phoenix.LiveComponent.handle_event/3
.
Callback implementation for Phoenix.LiveComponent.mount/1
.
Callback implementation for Phoenix.LiveComponent.render/1
.