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

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 React.
Enter a name (e.g. My React 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 React App

Create your new React app using Vite:

npm
Yarn
pnpm

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

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

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

Install @thunderid/react

Install the ThunderID React SDK in your project:

npm
Yarn
pnpm
Bun

npm install @thunderid/react

yarn add @thunderid/react

pnpm add @thunderid/react

bun add @thunderid/react

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

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

Run Your App

Start the development server:

npm
Yarn
pnpm

npm run dev

yarn dev

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.