Monsoon v0.2.0
Made by Alexandre Kohler Star

Two factor and sign in

Authenticator app setup

Two step setup for a time based authenticator: a QR code drawn in the browser from an otpauth:// URI (no image, no dependency), the setup key in groups of four with a copy button behind a "Can't scan the code?" disclosure, then the first code to confirm. Needs monsoon.js for the QR code and the code cells.

Two factor and sign in20 classesNeeds monsoon.jsLight and dark

Needs monsoon.js. The styles work on their own, and the behavior comes from the optional interactive layer: add <script src="https://cdn.jsdelivr.net/npm/monsooncss/dist/monsoon.js" defer></script> or import 'monsooncss/js'. See the interactive layer.

Example

Full

JavaScript API

Attribute

data-m-qr

Options

OptionDescription
data-m-qr-value="otpauth://totp/Issuer:account?secret=...&issuer=Issuer"
data-m-qr-label="Scan with your authenticator app"
data-m-qr-border="2" (quiet zone in modules)

Methods

MethodDescription
Monsoon.qr(el).value = "otpauth://..."
Monsoon.qr(el).version
Monsoon.qr(el).modules

Events

EventDescription
monsoon:qr-render { version, size, mask }
monsoon:qr-error { message }
monsoon:otp-complete { code }

Classes

20 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
Modifier Modifier, combined with the auth-setup class. On a <form> in the example. Sets grid display, gap, width, padding, text color and background, and 4 custom properties.
CSS
.auth-card {
  --tone: var(--primary);
  --tone-fg: var(--primary-foreground);
  --auth-pad: clamp(1.25rem, 5vw, 2rem);
  --auth-radius: var(--m-radius-3xl);
  display: grid;
  gap: 1.5rem;
  width: 100%;
  max-width: 26rem;
  padding: var(--auth-pad);
  color: var(--foreground);
  background-color: var(--surface);
  border: var(--m-border-width) solid var(--border);
  border-radius: var(--auth-radius);
  box-shadow: var(--m-shadow-lg);
}
Modifier Modifier, combined with the auth-setup class. On a <form> in the example. Sets width.
CSS
.auth-card-wide {
  max-width: 34rem;
}
Modifier Modifier, combined with the auth-setup class. On a <header> in the example. Sets grid display, alignment, gap and text style.
CSS
.auth-header {
  display: grid;
  justify-items: center;
  gap: .5rem;
  text-align: center;
}
Modifier Modifier, combined with the auth-setup class. On a <header> in the example. Sets alignment, text style and width.
CSS
.auth-header-start > .auth-description {
  max-width: 60ch;
}

.auth-header-start {
  justify-items: start;
  text-align: start;
}
Part Part of the authenticator app setup. On a <span> in the example. Sets grid display, alignment, width, height, margin and text color, and --tone.
CSS
.auth-icon > svg {
  width: 1.5rem;
  height: 1.5rem;
}

.auth-icon {
  --tone: var(--primary);
  display: grid;
  place-items: center;
  flex: none;
  width: 3rem;
  height: 3rem;
  margin-block-end: .25rem;
  color: var(--tone);
  background-color: color-mix(in oklab, var(--tone) 11%, var(--surface));
  border-radius: var(--m-radius-2xl);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tone) 22%, transparent), 0 1px 2px color-mix(in oklab, var(--tone) 18%, transparent);
}
Part Part of the authenticator app setup. On a <h2> in the example. Sets margin, text size, font weight and text style.
CSS
.auth-title {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -.015em;
  text-wrap: balance;
}
Part Part of the authenticator app setup. On a <p> in the example. Sets width, margin, text size, text style and text color.
CSS
.auth-description {
  max-width: 44ch;
  margin: 0;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--muted-foreground);
  text-wrap: pretty;
}

.auth-header-start > .auth-description {
  max-width: 60ch;
}
Base Base class of the authenticator app setup. On an <ol> in the example. Sets grid display, gap, margin and padding, and --tone.
CSS
.auth-setup {
  --tone: var(--primary);
  display: grid;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: auth-setup;
}
Part Part of the authenticator app setup. On a <li> in the example. Sets grid display, gap, width, padding, generated content and absolute position.
CSS
.auth-setup-step {
  position: relative;
  display: grid;
  gap: .75rem;
  min-width: 0;
  padding-inline-start: 2.625rem;
  counter-increment: auth-setup;
}

.auth-setup-step:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-start: calc(.875rem - 1px);
  top: 2rem;
  bottom: -1.25rem;
  width: 2px;
  background: linear-gradient(color-mix(in oklab, var(--tone) 30%, transparent), color-mix(in oklab, var(--foreground) 8%, transparent));
  border-radius: 1px;
}
Modifier Modifier, combined with the auth-setup class. Not used in the example above. Sets generated content, background and shadow.
CSS
.auth-setup-done::before {
  content: "";
  background-color: var(--tone);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath fill-rule='evenodd' d='M14 0a14 14 0 1 1 0 28 14 14 0 0 1 0-28zm6.2 9.3a1.1 1.1 0 0 0-1.6 0L12.4 15.6 9.4 12.6a1.1 1.1 0 1 0-1.6 1.6l3.8 3.8a1.1 1.1 0 0 0 1.6 0l7-7.1a1.1 1.1 0 0 0 0-1.6z'/%3E%3C/svg%3E") center / contain no-repeat;
  box-shadow: none;
}
Part Part of the authenticator app setup. On a <p> in the example. Sets margin, text size, font weight and text style.
CSS
.auth-setup-title {
  margin: 0;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.4;
}
Part Part of the authenticator app setup. On a <p> in the example. Sets margin, text size, text style and text color.
CSS
.auth-setup-text {
  margin: -.5rem 0 0;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--muted-foreground);
}
Part Part of the authenticator app setup. On a <div> in the example. Sets flex display, alignment, gap and width.
CSS
.auth-setup-scan > :not(.qr) {
  flex: 1 1 10rem;
  min-width: 0;
}

.auth-setup-scan {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1rem 1.25rem;
}
Part Part of the authenticator app setup. On a <details> in the example. Sets text size, text color and transform.
CSS
.auth-secret[open] > .auth-secret-toggle::after {
  rotate: 180deg;
}

.auth-secret {
  font-size: .8125rem;
  color: var(--muted-foreground);
}
Part Part of the authenticator app setup. On a <summary> in the example. Sets inline-flex display, alignment, gap, font weight, text color and corner radius.
CSS
.auth-secret-toggle::-webkit-details-marker {
  display: none;
}

.auth-secret-toggle:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
Part Part of the authenticator app setup. On a <div> in the example. Sets grid display, gap and margin.
CSS
.auth-secret-panel {
  display: grid;
  gap: .625rem;
  margin-top: .75rem;
}
Part Part of the authenticator app setup. On a <div> in the example. Sets flex display, alignment, gap, padding, background and border.
CSS
.auth-secret-key > [data-copied] {
  color: var(--success);
  border-color: color-mix(in oklab, var(--success) 45%, var(--border));
}

.auth-secret-key {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .5rem .5rem .875rem;
  background-color: var(--surface-2);
  border: var(--m-border-width) dashed color-mix(in oklab, var(--border), var(--foreground) 15%);
  border-radius: var(--m-radius-lg);
}
Part Part of the authenticator app setup. On a <code> in the example. Sets flex display, alignment, gap, width, text size and font weight.
CSS
.auth-secret-value {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: .25rem .75ch;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--foreground);
  user-select: all;
}
Part Part of the authenticator app setup. On a <dl> in the example. Sets grid display, grid tracks, gap, margin, text color and font weight.
CSS
.auth-secret-meta > dt {
  color: var(--muted-foreground);
}

.auth-secret-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .25rem .75rem;
  margin: 0;
}
Part Part of the authenticator app setup. On a <div> in the example. Sets grid display, alignment, width, padding, text color and background, and --qr-size, --qr-light and --qr-dark.
CSS
.qr[data-qr-error]::before {
  background: var(--danger);
  opacity: .15;
}

@media (forced-colors: active) {
  .qr {
    forced-color-adjust: none;
  }
}

Usage

The styles ship inside the same stylesheet as the utilities, and the behavior comes from the optional monsoon.js script, which enhances any element with a matching data-m attribute, including markup added later.

index.html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">
<script src="https://cdn.jsdelivr.net/npm/monsooncss/dist/monsoon.js" defer></script>

<!-- Authenticator app setup: start from the base class, then add modifiers -->
<form class="auth-card auth-card-wide" action="#" onsubmit="event.preventDefault()">
  <header class="auth-header auth-header-start">
    <span class="auth-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="6.5" y="2.5" width="11" height="19" rx="2.5"/><path d="M10.5 18.5h3"/><path d="M9.5 9.5h5M9.5 12.5h3"/></svg></span>
    <h2 class="auth-title">Set up your authenticator app</h2>
    <p class="auth-description">Codes from an app keep working without signal and can't be intercepted like text messages.</p>
  </header>
  <ol class="auth-setup">
    <li class="auth-setup-step">
      <p class="auth-setup-title">Scan this QR code</p>
      <p class="auth-setup-text">Open your authenticator app, tap Add account and point the camera at the code.</p>
      <div class="auth-setup-scan">
        <div class="qr" data-m-qr data-m-qr-value="otpauth://totp/Example:you%40example.com?secret=JBSWY3DPEHPK3PXP&amp;issuer=Example&amp;algorithm=SHA1&amp;digits=6&amp;period=30" data-m-qr-label="QR code to add Example to your authenticator app"></div>
        <details class="auth-secret">
          <summary class="auth-secret-toggle">Can't scan the code?</summary>
<!-- 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

  • Built on details and summary, so it opens with Enter or Space and screen readers announce expanded and collapsed. A shared name makes a group exclusive.
  • Give every control a visible label linked with for, or an aria-label when the purpose is obvious from context. Link help and error text with aria-describedby; invalid styles use :user-invalid, so they appear only after the user interacts.
  • Use button for actions and a for navigation. Icon only buttons need an aria-label; decorative icons carry aria-hidden="true".
  • 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 inVerification codeOne cell per character on top of the CSS only .otp-field: auto advance, Backspace goes back, arrows, Home and End, paste or SMS autofill of the whole code from any cell (spaces and dashes are stripped), error shake and success states, masked mode and a monsoon:otp-complete event. The field stays in the form with the full value. Needs monsoon.js.Two factor and sign inQR codeA QR code generated in the browser (byte mode, error correction level M, versions 1 to 10, up to 213 bytes) as a crisp SVG. Dark modules stay on a light tile in dark mode too, so every camera can read it. Three sizes. Needs monsoon.js.Two factor and sign inRecovery codesOne time recovery codes in a two column grid with copy all, download as a .txt file and print. Used codes are struck through, and Continue stays disabled until "I saved these codes" is checked. Needs monsoon.js for the actions.Two factor and sign inMethod pickerSecond factor choices as selectable cards on native radio inputs: icon, title, a short explanation, a Recommended badge and when it was last used. Arrow keys move between methods; unavailable methods can be disabled.

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.