<np-passkey-conditional>

An input component for authenticating user with passkey. It will act as an standard input element if there is no passkey registered yet.

Properties

Name	Format	required	default	Description
placeholder	text	no	”enter your email”	The input field placeholder.
enterkeyhint	text	no	”Send”	Virtual keyboard action label.
state	State	no	undefined	The component’s internal state.
value	text	no	""	The component’s value.
lifetime	number	no	”86400” (24h)	The session maximum duration in seconds
idletimeout	number	no	lifetime	The session inactivity timeout in seconds

enum State {
  INITIALIZING = "initializing", // getting challenge
  WAITING = "waiting", // waiting user to select a passkey
  VERIFYING = "verifying", // verifying passkey
  LOGGINGIN = "loggingin", // creating session
  LOGGEDIN = "loggedin", // session created
  ERROR = "error", // something went wrong
}

Methods

Name	Description
getSession()	Returns the current session (promise). Null if user is not authenticated.

Custom Events

Name	Description	Type
np:login	Session created.	Session
np:error	Something went wrong.	NoPwdError

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

interface Session {
  created_at: number; // when the session has been created
  expires_at: number; // the session expiration date
  idle_lifetime: number; // the session idle lifetime

  token: string; // the last generated token
  refreshed_at: number; // when a new token has been generated
  token_payload: TokenPayload; // its payload

  suggest_passkeys: boolean; // true if the user doesn't use a passkey and the browser support it
}

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

if (event.detail instanceof WebauthnNotSupportedError) {
  // webauthn is not supported
}

if (event.detail instanceof UnknownChallengeOrPasskeyError) {
  // unknown challenge or passkey
}

if (event.detail instanceof InvalidSignatureError) {
  // the signature is invalid
}

if (event.detail instanceof QuotaError) {
  // Request limit reached. The user has to wait:
  event.detail.getRetryAt(); // in seconds
}

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

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

Slots

Name	Description
(default)	The input’s label.
busy	waiting or processing authentication.
authenticated	The user has been authenticated.
error	An error occured.

Usage:

<!-- To override the default slot-->
<np-email-auth>Login</np-email-auth>

<!-- to override specific slots-->
<np-email-auth>
  Login
  <span slot="requesting">Sending email...</span>
  <span slot="requested">Check your mailbox</span>
  <span slot="error">Oooooops</span>
</np-email-auth>

Parts

Name	Description
button	The component’s button wrapper.

Usage:

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

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