Integrate React

ThunderID — React Integration

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

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-react-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 as the clientId value 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/react

Step 3 — Wrap with Provider

Edit src/main.jsx (or src/main.tsx), substituting the Client ID the developer provided:

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { ThunderIDProvider } from '@thunderid/react'
import App from './App.jsx'
import './index.css'

createRoot(document.getElementById('root')).render(
  
    
      
    
  
)

Replace CLIENT_ID_FROM_USER with the actual Client ID the developer shared in Step 1.

Step 4 — Add Auth UI

import {
  SignedIn, SignedOut, SignInButton, SignOutButton, Loading, User,
} from '@thunderid/react'

function App() {
  return (
    <>
      Loading...
      Sign Out
      Sign In
      
        
          {(user) => user && Welcome, {user.name || user.username}!}
        
      
    
  )
}

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.

React 19 Strict Mode double-render — Expected in development; the SDK handles it internally.

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.