Installation & Setup

The SpartanAuth widgets are distributed as a single npm package that registers three custom elements (web components). They work with any modern JavaScript framework or plain HTML.

Installation

npm install @masonitestudios/spartanauth-widgets

Registering the widgets

Import the package once in your application’s entry point. This registers all three custom elements globally:

import '@masonitestudios/spartanauth-widgets';

After this import, <spartan-login> and <spartan-account-settings> are available as HTML elements anywhere in your app.

Getting your sector ID

Every widget requires a sector attribute — the UUID identifying your application’s sector in SpartanAuth.

1. Log in to the SpartanAuth dashboard
2. Select (or create) the sub-sector for this application
3. Copy the Sector ID shown for that sector — not the tenant root unless this app is meant to share that namespace

Store it in an environment variable so it’s easy to change per environment:

.env

VITE_SPARTANAUTH_SECTOR=your-sector-id-here
VITE_SPARTANAUTH_DOMAIN=https://api.spartanauth.com

Minimal example

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

On successful login, the widget stores the JWT in localStorage['spartan-token'] and redirects the user to /app.

Framework integration

The widgets are native web components — they work in any framework but require a small amount of wiring for event listeners and lifecycle management:

• Vue 3 →
• React →
• Vanilla JavaScript →