Integrate Tanstack Router

ThunderID — React + TanStack Router Integration

Assumes ThunderID is running at https://localhost:8090. If not, run /setup-thunderid first.

Step 1 — Register an Application

Ask the developer to create an application in ThunderID and share the Client ID before continuing.

Guide them through these steps:

1. Open https://localhost:8090/console and sign in (default: admin / secret)
2. Navigate to Applications → New Application
3. Fill in:

• Name: their app name (e.g. my-tanstack-router-app)
• Type: Single Page Application
• Authorized Redirect URL: http://localhost:5173/callback

1. Click Create and copy the Client ID shown on the next screen

The /callback path matches the ThunderIDCallback route added in Step 3 — they must match exactly.

Once they paste the Client ID, use it in all subsequent steps. Do not use a placeholder — wait for the real value.

Step 2 — Install

Detect the package manager from lockfiles: pnpm-lock.yaml → pnpm add, yarn.lock → yarn add, bun.lockb → bun add, else npm install.

npm install @thunderid/react @thunderid/tanstack-router

Step 3 — Configure Provider and Callback Route

Edit src/main.tsx:

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { RouterProvider } from '@tanstack/react-router'
import { ThunderIDProvider } from '@thunderid/react'
import { router } from './router'

createRoot(document.getElementById('root')!).render(
  
    "
      baseUrl="https://localhost:8090"
    >
      
    
  
)

Add the callback route in your router definition (src/router.tsx):

import { createRouter, createRoute, createRootRoute } from '@tanstack/react-router'
import { ThunderIDCallback } from '@thunderid/tanstack-router'

const rootRoute = createRootRoute()

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

export const router = createRouter({
  routeTree: rootRoute.addChildren([callbackRoute /*, ...other routes */]),
})

Step 4 — Protect Routes

Use beforeLoad to guard protected routes:

import { createRoute, redirect } from '@tanstack/react-router'
import { getThunderIDAuth } from '@thunderid/tanstack-router'

const protectedRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/dashboard',
  beforeLoad: ({ context }) => {
    const auth = getThunderIDAuth(context)
    if (!auth.isSignedIn) {
      throw redirect({ to: '/' })
    }
  },
  component: Dashboard,
})

Step 5 — Add Auth UI

import {
  SignedIn, SignedOut, SignInButton, SignOutButton, Loading, User,
} from '@thunderid/react'

function App() {
  return (
    <>
      Loading...
      Sign Out
      Sign In
      
        
          {(user) => user && Welcome, {user.name || user.username}!}
        
      
    
  )
}

Step 6 — Run and Verify

npm run dev

Click Sign In — you should be redirected to https://localhost:8090 and returned to your app after login.

Troubleshooting

Certificate error — Visit https://localhost:8090 in your browser and accept the warning once.

Callback not working — Ensure the redirect URL registered in the ThunderID console exactly matches http://localhost:5173/callback.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: thunder-id
• Source: thunder-id/skills
• License: Apache-2.0

Install and usage instructions live in the source repository linked above.