React Quickstart

Use this guide to add ThunderID authentication to a React application using the @thunderid/react SDK.

What You Will Learn

• Create a new React app using Vite

• Install the @thunderid/react package

• Build with ThunderID prebuilt components

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, and click Add Application.

3. Under Technology, select React.

4. Enter a name (e.g. My React App) and create an application. The rest of the settings can stay at their defaults.

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

6. Under General, add http://localhost:5173 to the list of Authorized Redirect URIs.

7. The React SDK calls the ThunderID API directly from the browser, so you need to allow your app's origin:

   1. In the left navigation, navigate to Settings.
   2. Under the System section, open the CORS tab.
   3. Enter http://localhost:5173 (or the relevant URL for your setup).
   4. Click Add Origin.

3

Create a React App

Create your new React app using Vite:

npm

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install

Yarn

yarn create vite my-react-app --template react
cd my-react-app
yarn install

pnpm

pnpm create vite my-react-app --template react
cd my-react-app
pnpm install

4

Install @thunderid/react

Install the ThunderID React SDK in your project:

npm

npm install @thunderid/react

Yarn

yarn add @thunderid/react

pnpm

pnpm add @thunderid/react

Bun

bun add @thunderid/react

5

Add ThunderIDProvider to Your App

The <ThunderIDProvider /> serves as a context provider for the SDK. Integrate it by wrapping your root component.

Update the main.jsx file with the following:

Configuration

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

src/main.jsx

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(
  <StrictMode>
    <ThunderIDProvider
      clientId="<your-client-id>"
      baseUrl="https://localhost:8090"
    >
      <App />
    </ThunderIDProvider>
  </StrictMode>
)

Configuration Parameters

Parameter	Description
clientId	The Client ID from your ThunderID application
baseUrl	Your ThunderID instance URL (e.g., https://localhost:8090)

6

Build with ThunderID Components

You can control which content signed-in and signed-out users can see with the prebuilt control components. Replace the content of App.jsx with the following, which uses these components:

• <SignedIn>: Children of this component can only be seen while signed in.
• <SignedOut>: Children of this component can only be seen while signed out.
• <UserDropdown />: Shows the signed-in user's avatar. Selecting it opens a dropdown menu with account management options.
• <SignInButton />: An unstyled component that links to the ThunderID-hosted sign-in page.

src/App.jsx

import {
  SignedIn,
  SignedOut,
  SignInButton,
  SignOutButton,
  Loading,
  UserDropdown
} from '@thunderid/react'
import './App.css'

function App() {
  return (
    <>
      <section id="center">
        <SignedIn>
          <UserDropdown />
        </SignedIn>
        <SignedOut>
          <SignInButton>Sign In</SignInButton>
        </SignedOut>
      </section>
    </>
  )
}

export default App

7

Run Your App

Start the development server:

npm

npm run dev

Yarn

yarn dev

pnpm

pnpm run dev

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

Visit your app at 🌐 http://localhost:5173

You should see the <SignInButton />. Click it, you'll be redirected to the ThunderID-hosted sign-in page. Login with your test user and you'll land back in your app with the user profile displayed.

What's Next

Upgrade the sign-in flow

Add MFA, passkeys, or social login to your flow, no app code changes required.

Flow Designer →

React SDK Reference

Explore the full API reference for the ThunderID React SDK.

API Reference →