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) your sector
3. Copy the Sector ID shown on the sector overview page

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 →