Monsoon v0.2.0
Made by Alexandre Kohler Star

Two factor and sign in

Security key and passkey

Prompt for a passkey or a hardware security key: an animated key mark, the steps, platform hints (Touch ID, Windows Hello, Android, USB or NFC keys) and error, retry and success states through classes. The page calls WebAuthn and switches the classes.

Two factor and sign in8 classesNo JavaScriptLight and dark

Example

Full

JavaScript API

Notes

NoteDescription
UI only: call navigator.credentials.get({ publicKey }) (or create() to register) when the screen opens, with the challenge and allowCredentials from your server.
Add .auth-key-error to the .auth-key element when the promise rejects (NotAllowedError means cancelled or timed out) and show the Retry button; add .auth-key-success when your server accepts the assertion.
Put the message in .auth-key-message (role="status"), it is shown only in the error and success states.

Classes

8 classes. Click a name to copy it. Utilities on the same element always win over component defaults, so any of them can be adjusted with plain utility classes.

ClassTypeWhat it does
Base Base class of the security key and passkey. On a <div> in the example. Sets grid display, alignment, gap and text style, and --tone.
CSS
.auth-key {
  --tone: var(--primary);
  display: grid;
  justify-items: center;
  gap: 1.25rem;
  text-align: center;
}
Part Part of the security key and passkey. On a <div> in the example. Sets grid display, alignment, width, height, text color and background.
CSS
.auth-key-visual > svg {
  width: 2.75rem;
  height: 2.75rem;
  animation: m-auth-breathe 2.4s ease-in-out infinite;
}

.auth-key-visual {
  position: relative;
  display: grid;
  place-items: center;
  width: 6rem;
  height: 6rem;
  color: var(--tone);
  background-color: color-mix(in oklab, var(--tone) 9%, var(--surface));
  border-radius: var(--m-radius-full);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tone) 22%, transparent);
}
Part Part of the security key and passkey. On an <ol> in the example. Sets grid display, gap, width, margin, padding and text style.
CSS
.auth-key-steps {
  display: grid;
  gap: .625rem;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: auth-key;
  text-align: start;
}

.auth-key-steps > li {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: .75rem;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--muted-foreground);
  counter-increment: auth-key;
}
Part Part of the security key and passkey. On an <ul> in the example. Sets flex display, alignment, gap, margin and padding.
CSS
.auth-key-hints {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
Part Part of the security key and passkey. On a <li> in the example. Sets inline-flex display, alignment, gap, height, padding and text size.
CSS
.auth-key-hint > svg {
  width: .875rem;
  height: .875rem;
}

.auth-key-hint {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  height: 1.75rem;
  padding-inline: .625rem;
  font-size: .75rem;
  font-weight: 500;
  color: var(--muted-foreground);
  background-color: var(--surface-2);
  border: var(--m-border-width) solid var(--border);
  border-radius: var(--m-radius-full);
}
Part Part of the security key and passkey. On a <p> in the example. Sets hidden by default, margin, text size and text style.
CSS
.auth-key-message {
  display: none;
  margin: 0;
  font-size: .875rem;
  line-height: 1.5;
}

.auth-key-error .auth-key-message, .auth-key-success .auth-key-message {
  display: block;
  color: var(--tone);
}
Modifier Modifier, combined with the auth-key class. On a <div> in the example. Sets hidden by default, animation, block display and text color, and --tone.
CSS
.auth-key-error {
  --tone: var(--danger);
}

.auth-key-error .auth-key-visual {
  animation: m-auth-shake .45s var(--m-ease);
}
Tone Success tone. Not used in the example above. Sets hidden by default, animation, block display and text color, and --tone.
CSS
.auth-key-success {
  --tone: var(--success);
}

.auth-key-success .auth-key-visual {
  animation: m-auth-pop .45s var(--m-ease-spring);
}

Usage

Components ship inside the same stylesheet as the utilities. There is nothing else to install and no script to load: link Monsoon and write the markup.

index.html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">

<!-- Security key and passkey: start from the base class, then add modifiers -->
<div class="grid gap-4 md:grid-cols-2 items-start">
  <div class="auth-card">
    <div class="auth-key">
      <div class="auth-key-visual" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7.5 5.2A8 8 0 0 1 20 12c0 1.4-.1 2.7-.4 4"/><path d="M4.3 9A8 8 0 0 1 5.5 7"/><path d="M4 12.5c0 1.6-.3 3-.9 4.2"/><path d="M8 10.5a4 4 0 0 1 8 1.5c0 2.8-.4 5.3-1.3 7.5"/><path d="M12 12c0 3.2-.6 6-1.9 8.3"/><path d="M8.2 14.5c-.2 1.9-.8 3.6-1.7 5"/></svg></div>
      <header class="auth-header">
        <h2 class="auth-title">Use your passkey</h2>
        <p class="auth-description">Your browser will ask you to confirm it's you.</p>
      </header>
      <ol class="auth-key-steps">
        <li>Choose the passkey for you@example.com when your browser asks.</li>
        <li>Confirm with your fingerprint, face, screen lock or security key.</li>
      </ol>
      <ul class="auth-key-hints" aria-label="Works with">
        <li class="auth-key-hint"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 11V5.5a1.5 1.5 0 0 1 3 0V10l4.8 1a2 2 0 0 1 1.6 2.3l-.8 4.5a3 3 0 0 1-3 2.5h-3.3a3 3 0 0 1-2.4-1.2L5.5 15.5a1.5 1.5 0 0 1 2.3-1.9L9 15"/></svg> Touch ID</li>
<!-- the full example is in the Code tab above -->

Theme it with --seed on any ancestor, for example style="--seed: #0d9488", and force a scheme with class="dark" or class="light" on a wrapper.

Accessibility

  • Use button for actions and a for navigation. Icon only buttons need an aria-label; decorative icons carry aria-hidden="true".
  • Announces itself with role="status" (polite) or role="alert" (assertive). Use alert only for messages that need immediate attention.
  • Every interactive part shows a visible focus ring with :focus-visible, and tone colors pair with -foreground tokens that keep text at 4.5:1 or better in light and dark mode.
Two factor and sign inVerify screenThe second step after the password: masked destination, code cells that submit when complete, a resend link with a countdown, another method link and a "Don't ask again on this device for 30 days" checkbox. Needs monsoon.js for the cells and the countdown.Two factor and sign inPush approvalCheck your phone: a pulsing device with the incoming request and number matching (the two digits to tap on the phone). State classes for approved, denied and expired change the color, stop the pulse and show a badge.Two factor and sign inPhone numberPhone number with a country picker: a searchable list with flags and dial codes, formatting as you type for the selected country, typing or pasting +44 or 0044 switches the country, and a hidden field with the E.164 number. Without the script the native select and tel input still work. Needs monsoon.js.Two factor and sign inTwo factor statusAccount settings card: on or off badge, the methods in use with manage and remove actions, recovery codes left with a regenerate button and when the account was last verified. The .auth-status-off modifier turns the card into a prompt to switch it on.

No recent searches

Try , , or .

Recent

Loading the search index

No results for ""

Check the spelling, or search a class name such as px-4.