Skip to content

Widgets Reference

The @masonitestudios/spartanauth-widgets package ships two web components. Both render inside Shadow DOM, which means their internal styles are isolated from your application’s CSS.

`<spartan-login>`

The full-featured login form. Handles password login, passkey (WebAuthn) login, MFA challenges, self-service sign-up, and password reset — all within a single widget.

<spartan-login
  domain="https://api.spartanauth.com"
  sector="your-sector-id"
  start-mode="password"
  locale="en"
  redirect=""
  styles="">
</spartan-login>

Attributes

Attribute	Default	Description
`domain`	`https://api.spartanauth.com`	SpartanAuth API base URL
`sector`	(admin sector)	Your application’s sector ID. Get this from the dashboard.
`start-mode`	`password`	Initial login mode: `password` or `webauthn`
`locale`	`en`	UI language: `en`, `fr`, `es`, `ja`
`redirect`	`""`	URL to navigate to after a successful login. Leave empty to suppress automatic navigation and handle the `spartan-login` event yourself.
`styles`	`""`	CSS string injected into the widget’s shadow DOM for custom styling

Events

spartan-login — fired on the element after a successful login.

element.addEventListener('spartan-login', (event: CustomEvent) => {
  const { token, transactionID } = event.detail;
  // token is also stored in localStorage['spartan-token']
});

Features

Password and WebAuthn (passkey) login
MFA / OTP challenge (email & SMS), with automatic method picker when multiple are enrolled
Self-service sign-up (when enabled on the sector)
Password reset via emailed code

`<spartan-account-settings>`

An authenticated self-service settings panel. Lets logged-in users manage their passkeys and MFA registrations.

<spartan-account-settings
  domain="https://api.spartanauth.com"
  sector="your-sector-id"
  locale="en"
  redirect="/"
  show-web-authn="true"
  redirect-on-unauthenticated="true">
</spartan-account-settings>

Attributes

Attribute	Default	Description
`domain`	`https://api.spartanauth.com`	SpartanAuth API base URL
`sector`	(admin sector)	Sector ID
`locale`	`en`	UI language
`redirect`	`/`	Redirect target when the user is not authenticated
`show-web-authn`	`true`	Show the passkey management section
`redirect-on-unauthenticated`	`true`	Automatically redirect unauthenticated users
`styles`	`""`	Custom CSS injected into the shadow DOM

Features

List, add, and remove WebAuthn passkeys
List, add, validate, and remove MFA registrations (email & SMS OTP)
MFA verification modal with one-time code input
Reads the JWT from localStorage['spartan-token'] for authenticated API calls