<np-passkey-register>

Description

A button component to register a new passkey for the user.

Overview

Properties

Name	Format	Required	Default	Description
state	State	No	undefined	The component’s internal state.

enum State {
  REGISTERING = "registering", // Registering the passkey
  REGISTERED = "registered", // Passkey has been registered
  ERROR = "error", // An error occurred
}

Methods

Name	Description
register()	Starts the registration flow programmatically.
cancel()	Cancels the registration flow.

Custom Events

Name	Description	Type
np:register	The passkey has been registered.	RegisterEvent
np:error	An error occurred.	NoPwdError

The np:register custom event detail is defined as follows:

interface RegisterEvent {
  kid: string; // The passkey's ID
}

The np:error custom event detail inherits from NoPwdError. There are four types of errors:

if (event.detail instanceof WebauthnNotSupportedError) {
  // This browser doesn't support WebAuthn
}

if (event.detail instanceof InvalidTokenError) {
  // The provided token is invalid (malformed or expired)
}

if (event.detail instanceof NetworkError) {
  // No network connection
}

if (event.detail instanceof UnexpectedError) {
  // An unexpected error occurred
}

Slots

Name	Description
(default)	The button’s label.
registering	Passkey registration in progress.
registered	Passkey has been registered.
error	An error occurred.

Usage:

<!-- To override the default slot -->
<np-passkey-register>Login</np-passkey-register>

<!-- To override specific slots -->
<np-passkey-register>
  Login
  <span slot="registering">Please wait...</span>
  <span slot="registered">Done!</span>
  <span slot="error">Oops!</span>
</np-passkey-register>

Parts

Name	Description
button	The component’s button wrapper.

Usage:

/* To target only the default state */
np-passkey-register:not([state])::part(button) {
  background-color: black;
  color: white;
}

np-passkey-register[state="registering"]::part(button) {
  background-color: transparent;
  color: grey;
}

np-passkey-register[state="error"]::part(button) {
  background-color: red;
  color: white;
}