React Router SDK

The ThunderID React Router SDK (@thunderid/react-router) provides drop-in components for protecting routes and handling OAuth 2.0 callbacks in React Router v6 applications. It works alongside @thunderid/react and requires no extra configuration beyond what ThunderIDProvider already provides.

Installation

npm

npm install @thunderid/react-router

Yarn

yarn add @thunderid/react-router

pnpm

pnpm add @thunderid/react-router

Bun

bun add @thunderid/react-router

Peer Dependencies

Package	Version
@thunderid/react	>=0.15.0
react	>=16.8.0
react-router	>=6.30.1

Quick Example

src/App.tsx

import { BrowserRouter, Routes, Route } from 'react-router-dom'
import { ThunderIDProvider } from '@thunderid/react'
import { ProtectedRoute, 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 />} />
          <Route
            path="/dashboard"
            element={
              <ProtectedRoute redirectTo="/signin">
                <Dashboard />
              </ProtectedRoute>
            }
          />
        </Routes>
      </BrowserRouter>
    </ThunderIDProvider>
  )
}

Components

• <ProtectedRoute /> — Enforce authentication on a route. Redirects or shows a fallback when the user is not signed in.
• <CallbackRoute /> — Handle the OAuth 2.0 authorization code callback, exchange it for tokens, and navigate to the original destination.