Skip to content
SpartanAuth SpartanAuth Docs

Vanilla JavaScript

The SpartanAuth widgets are native web components — no framework required. You can use them directly in plain HTML with a <script type="module">.

Basic example

Section titled “Basic example”
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Login</title>
</head>
<body>


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


  <script type="module">
    import '@masonitestudios/spartanauth-widgets';


    document.getElementById('login-widget').addEventListener('spartan-login', () => {
      window.location.href = '/app';
    });
  </script>


</body>
</html>

Using a CDN (no build step)

Section titled “Using a CDN (no build step)”

If you don’t have a bundler, you can load the widget from a CDN:

<script type="module">
  // Replace with the actual CDN URL for the package
  import 'https://cdn.jsdelivr.net/npm/@masonitestudios/spartanauth-widgets/dist/sa-widgets.mjs';


  document.querySelector('spartan-login').addEventListener('spartan-login', (event) => {
    const { token } = event.detail;
    console.log('Authenticated:', token);
    window.location.href = '/app';
  });
</script>

UMD build

Section titled “UMD build”

The package ships both an ESM build (.mjs) and a UMD build (.umd.js). Use the UMD build in non-module environments:

<script src="node_modules/@masonitestudios/spartanauth-widgets/dist/sa-widgets.umd.js"></script>
<script>
  document.querySelector('spartan-login').addEventListener('spartan-login', () => {
    window.location.href = '/app';
  });
</script>