Connect your app

JavaScript Quickstart

This is step 4 of the getting started sequence. By the end you will have a working vanilla JavaScript app with sign-in and sign-out powered by ThunderID.

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

Steps 1–3 complete: ThunderID running, an application registered, and a sign-in flow built. Start at Get ThunderID if you haven't already.

Node.js installed on your system

npm, yarn, or pnpm

Your preferred code editor

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

Success

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