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

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.

Create an Application

Open the Console at https://localhost:8090/console, navigate to Applications, and click Add Application:

Under Technology, select JavaScript.
Enter a name (e.g. My JavaScript App) and create an application. The rest of the settings can stay at their defaults.
Copy the Client ID from the General tab. You'll need it when configuring the SDK.
Under General, add http://localhost:5173 to the list of Authorized Redirect URIs.

Create a JavaScript App

Create your new JavaScript app using Vite:

npm
Yarn
pnpm

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

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

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

Install @thunderid/browser

Install the ThunderID Browser SDK in your project:

npm
Yarn
pnpm
Bun

npm install @thunderid/browser

yarn add @thunderid/browser

pnpm add @thunderid/browser

bun add @thunderid/browser

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)

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()

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>

Run Your App

Start the development server:

npm
Yarn
pnpm

npm run dev

yarn dev

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.