Vanilla JavaScript Quickstart

Use this guide to add ThunderID authentication to a browser-based application using the @thunderid/browser SDK. No framework required.

What You Will Learn

• Create a new JavaScript app using Vite

• Install the @thunderid/browser package

• Add working sign-in and sign-out

• Display the signed-in user's profile

Prerequisites

• About 15 minutes

• Node.js installed on your system

• npm, yarn, or pnpm

• Your preferred code editor

1

Run ThunderID

Start a local ThunderID instance. Pick the method that works best for you:

$npx thunderid

Requires Node.js 18+

Full install guide →

Once it's running, the console is available at https://localhost:8090/console.

2

Create an Application

1. Sign in to the Console.

   Test User

   If you used the default setup, sign in to the Console as admin with the password generated during setup and printed to the setup output (unless you supplied your own).

2. Navigate to Applications.

3. Click Add Application.

4. From the Choose a type page, select JavaScript.

5. Enter a name (e.g. My JavaScript App).

6. Click Create.

7. Select how you want to sign in users (e.g., email/password, social login, etc.).

8. Select Theme settings and other options.

9. In the Configuration step, click on the banner to add Vite's development server URL to the list of Authorized Redirect URIs & CORS Allowed Origins. The default is http://localhost:5173 (adjust the port if your dev server uses a different one).

Note

Copy the Client ID from the General tab. You'll need it when configuring the SDK.

3

Create a JavaScript App

Create your new JavaScript app using Vite:

npm

npm create vite@latest my-js-app -- --template vanilla
cd my-js-app
npm install

Yarn

yarn create vite my-js-app --template vanilla
cd my-js-app
yarn install

pnpm

pnpm create vite my-js-app --template vanilla
cd my-js-app
pnpm install

4

Install @thunderid/browser

Install the ThunderID Browser SDK in your project:

npm

npm install @thunderid/browser

Yarn

yarn add @thunderid/browser

pnpm

pnpm add @thunderid/browser

Bun

bun add @thunderid/browser

5

Initialize the SDK

The ThunderIDBrowserClient serves as the main entry point for the SDK. Create a new file to initialize and export the client instance.

Create src/auth.js with the following:

src/auth.js

import { ThunderIDBrowserClient } from '@thunderid/browser'

const auth = new ThunderIDBrowserClient()

await auth.initialize({
  clientId: '<your-client-id>',
  baseUrl: 'https://localhost:8090',
  afterSignInUrl: window.location.origin,
  afterSignOutUrl: window.location.origin,
})

export default auth

Configuration

Replace <your-client-id> with the Client ID you obtained when creating the application in ThunderID.

Configuration Parameters

Parameter	Description
clientId	The Client ID from your ThunderID application
baseUrl	Your ThunderID instance URL (e.g., https://localhost:8090)
afterSignInUrl	URL to redirect to after sign-in (defaults to current origin)
afterSignOutUrl	URL to redirect to after sign-out (defaults to current origin)

6

Add Sign-In and Sign-Out

Replace the content of src/main.js with the following to add sign-in and sign-out functionality:

src/main.js

import './style.css'
import auth from './auth.js'

async function renderApp() {
  const isSignedIn = await auth.isSignedIn()

  if (isSignedIn) {
    const user = await auth.getUser()

    document.querySelector('#app').innerHTML = `
      <div>
        <h1>ThunderID Auth Demo</h1>
        <div class="card">
          <h2>Welcome, ${user.displayName || user.username}!</h2>
          <div class="user-details">
            <p><strong>Email:</strong> ${user.email || 'N/A'}</p>
            <p><strong>Username:</strong> ${user.username || 'N/A'}</p>
          </div>
          <button id="sign-out-btn" type="button">Sign Out</button>
        </div>
      </div>
    `

    document.querySelector('#sign-out-btn')
      .addEventListener('click', () => auth.signOut())
  } else {
    document.querySelector('#app').innerHTML = `
      <div>
        <h1>ThunderID Auth Demo</h1>
        <div class="card">
          <p>You are not signed in.</p>
          <button id="sign-in-btn" type="button">Sign In</button>
        </div>
      </div>
    `

    document.querySelector('#sign-in-btn')
      .addEventListener('click', () => auth.signIn())
  }
}

renderApp()

7

Update the HTML Entry Point

Replace the content of index.html to provide a clean entry point:

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ThunderID JavaScript Demo</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

8

Run Your App

Start the development server:

npm

npm run dev

Yarn

yarn dev

pnpm

pnpm run dev

Visit your app at http://localhost:5173

Test credentials

You'll need a user to sign in with. If you haven't created one yet, open https://localhost:8090/console, navigate to Users, and add a test user with an email and password.

Success

You should see the sign-in button. Click it to be redirected to the ThunderID-hosted sign-in page. Authenticate with your test user, then return to your app with the user profile displayed.

What's Next

Upgrade the Sign-In FlowAdd MFA, passkeys, or social login to your flow. No app code changes required.Flow Designer →

Browser SDK ReferenceExplore the full API reference for the Browser SDK.API Reference →