<CallbackRoute />

The CallbackRoute component handles the OAuth 2.0 authorization code callback. Mount it at your application's redirect URI path. It processes the authorization code, validates the CSRF state parameter, exchanges the code for tokens, and navigates the user back to their original destination.

note

CallbackRoute must be rendered inside a ThunderIDProvider and a React Router context.

Usage

Basic Usage

Register the callback path in your router and mount CallbackRoute there:

src/App.tsx

import { BrowserRouter, Routes, Route } from 'react-router-dom'
import { ThunderIDProvider } from '@thunderid/react'
import { CallbackRoute } from '@thunderid/react-router'

function App() {
  return (
    <ThunderIDProvider
      clientId="<your-client-id>"
      baseUrl="https://localhost:8090"
      afterSignInUrl="http://localhost:5173/callback"
    >
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/callback" element={<CallbackRoute />} />
        </Routes>
      </BrowserRouter>
    </ThunderIDProvider>
  )
}

The path you mount CallbackRoute on must match the afterSignInUrl configured in ThunderIDProvider and the allowed redirect URIs registered in the ThunderID Console.

Error Handling

Use onError to handle failures during token exchange:

src/App.tsx

<Route
  path="/callback"
  element={
    <CallbackRoute
      onError={(error) => {
        console.error('Authentication callback failed:', error.message)
      }}
    />
  }
/>

Custom Navigation

Override the post-callback navigation with onNavigate. Receives the path the user should be sent to after successful authentication:

src/App.tsx

<Route
  path="/callback"
  element={
    <CallbackRoute
      onNavigate={(path) => {
        window.location.replace(path)
      }}
    />
  }
/>

With a Router Basename

CallbackRoute automatically accounts for React Router's basename when resolving the post-callback navigation path — no extra configuration needed.

src/App.tsx

<BrowserRouter basename="/app">
  <Routes>
    <Route path="/callback" element={<CallbackRoute />} />
  </Routes>
</BrowserRouter>

Props

Prop	Type	Required	Description
onError	(error: Error) => void	❌	Called when the callback processing fails (e.g., invalid state, token exchange error)
onNavigate	(path: string) => void	❌	Override the default post-callback navigation. Receives the resolved destination path. Defaults to React Router's navigate()

How It Works

When the authorization server redirects back to your application, CallbackRoute:

1. Reads the code and state parameters from the URL
2. Validates the state against the value stored during sign-in (CSRF protection)
3. Exchanges the authorization code for tokens via the configured token endpoint
4. Navigates the user to their original pre-authentication path

It renders nothing visible — it completes silently and redirects immediately on success.