Connect your app

React Quickstart

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

What You Will Learn

Create a new React app using Vite

Install the @thunderid/react 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

Example Source Code

Check out the complete React Sample App in the ThunderID repository

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:

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

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

The ThunderID React SDK provides SignInButton and SignOutButton components along with SignedIn and SignedOut components for conditional rendering.

Replace the content of App.jsx with:

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

function App() {
  return (
    <>
      <Loading>
        <div>Loading authentication...</div>
      </Loading>

      <header>
        <h1>ThunderID Auth Demo</h1>
        <SignedIn>
          <SignOutButton>Sign Out</SignOutButton>
        </SignedIn>
        <SignedOut>
          <SignInButton>Sign In</SignInButton>
        </SignedOut>
      </header>
    </>
  )
}

export default App

Display User Profile Information

Use the User component to access and display user profile information:

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

function App() {
  return (
    <>
      <Loading>
        <div>Loading authentication...</div>
      </Loading>

      <header>
        <h1>ThunderID Auth Demo</h1>
        <SignedIn>
          <SignOutButton>Sign Out</SignOutButton>
        </SignedIn>
        <SignedOut>
          <SignInButton>Sign In</SignInButton>
        </SignedOut>
      </header>

      <main>
        <SignedIn>
          <User>
            {(user) => user && (
              <div className="user-profile">
                {user.picture && (
                  <img
                    src={user.picture}
                    alt={user.name || 'User avatar'}
                    style={{ width: '80px', height: '80px', borderRadius: '50%' }}
                  />
                )}
                <h2>Welcome, {user.name || user.username}!</h2>
                <div className="user-details">
                  <p><strong>Email:</strong> {user.email}</p>
                  <p><strong>First Name:</strong> {user.given_name}</p>
                  <p><strong>Last Name:</strong> {user.family_name}</p>
                </div>
              </div>
            )}
          </User>
        </SignedIn>
      </main>
    </>
  )
}

export default App

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, you'll be redirected to the ThunderID-hosted sign-in page. Authenticate with the test user you created in step 2 and you'll land back in your app with the user profile displayed.