Integrate Browser

ThunderID — Browser SDK Integration

Assumes ThunderID is running at https://localhost:8090. If not, run /setup-thunderid first.

@thunderid/browser is the browser-specific ThunderID SDK. It builds on @thunderid/javascript and adds DOM/window integrations — use it for apps running directly in the browser without a framework.

Step 1 — Register an Application

Ask the developer to create an application in ThunderID and share the Client ID before continuing.

Guide them through these steps:

1. Open https://localhost:8090/console and sign in (default: admin / secret)
2. Navigate to Applications → New Application
3. Fill in:

• Name: their app name (e.g. my-browser-app)
• Type: Single Page Application
• Authorized Redirect URL: http://localhost:5173

1. Click Create and copy the Client ID shown on the next screen

Once they paste the Client ID, use it in all subsequent steps. Do not use a placeholder — wait for the real value.

Step 2 — Install

Detect the package manager from lockfiles: pnpm-lock.yaml → pnpm add, yarn.lock → yarn add, bun.lockb → bun add, else npm install.

npm install @thunderid/browser

Step 3 — Initialize the SDK

Create src/auth.js:

import { ThunderIDBrowserClient } from '@thunderid/browser'

const auth = new ThunderIDBrowserClient()

await auth.initialize({
  clientId: '',
  baseUrl: 'https://localhost:8090',
  afterSignInUrl: window.location.origin,
  afterSignOutUrl: window.location.origin,
})

export default auth

Step 4 — Add Sign-In, Sign-Out, and User Display

Replace 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 = `
      
        Welcome, ${user.displayName || user.username}!
        Email: ${user.email || 'N/A'}
        Sign Out
      
    `
    document.querySelector('#sign-out-btn')
      .addEventListener('click', () => auth.signOut())
  } else {
    document.querySelector('#app').innerHTML = `
      
        You are not signed in.
        Sign In
      
    `
    document.querySelector('#sign-in-btn')
      .addEventListener('click', () => auth.signIn())
  }
}

renderApp()

Step 5 — Run and Verify

npm run dev

Click Sign In — you should be redirected to https://localhost:8090 and returned after login.

Troubleshooting

Certificate error — Visit https://localhost:8090 in your browser and accept the warning once.

Not signed in after redirect — Ensure auth.initialize() is awaited on every page load; it detects the code query parameter automatically and completes the callback exchange.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: thunder-id
• Source: thunder-id/skills
• License: Apache-2.0

Install and usage instructions live in the source repository linked above.