TanStack Router SDK

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

Installation

npm

npm install @thunderid/tanstack-router

Yarn

yarn add @thunderid/tanstack-router

pnpm

pnpm add @thunderid/tanstack-router

Bun

bun add @thunderid/tanstack-router

Peer Dependencies

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

Quick Example

src/main.tsx

import { createRouter, createRoute, createRootRoute, RouterProvider } from '@tanstack/react-router'
import { ThunderIDProvider } from '@thunderid/react'
import { ProtectedRoute, CallbackRoute } from '@thunderid/tanstack-router'

const rootRoute = createRootRoute()

const callbackRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/callback',
  component: CallbackRoute,
})

const dashboardRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/dashboard',
  component: () => (
    <ProtectedRoute redirectTo="/signin">
      <Dashboard />
    </ProtectedRoute>
  ),
})

const router = createRouter({
  routeTree: rootRoute.addChildren([callbackRoute, dashboardRoute]),
})

function App() {
  return (
    <ThunderIDProvider
      clientId="<your-client-id>"
      baseUrl="https://localhost:8090"
      afterSignInUrl="http://localhost:5173/callback"
    >
      <RouterProvider router={router} />
    </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.