<np-passkey-register>

A button component for registering a new passkey.

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 occured
}

Methods

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

Custom Events

Name	Description	Type
np:register	The passkey has been register.	RegisterEvent
np:error	Something went wrong.	NoPwdError

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

interface RegisterEvent {
  kid: string; // the passkey's id
}```

The `np:error` custom event detail inherites from the `NoPwdError`.
There are 4 types of error:

```ts
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
}

if (event.detail instanceof UnexpectedError) {
  // Something went wrong
}

Slots

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

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">Oooooops</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;
}