# Integrate Tanstack Router

> Add ThunderID authentication to a React app using TanStack Router, with the official @thunderid/react and @thunderid/tanstack-router SDKs. Use when asked to "add ThunderID to my TanStack Router app" or when package.json contains @tanstack/react-router.

- **Type:** Skill
- **Install:** `agentstack add skill-thunder-id-skills-integrate-tanstack-router`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [thunder-id](https://agentstack.voostack.com/s/thunder-id)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** Apache-2.0
- **Upstream author:** [thunder-id](https://github.com/thunder-id)
- **Source:** https://github.com/thunder-id/skills/tree/main/skills/integration/integrate-tanstack-router

## Install

```sh
agentstack add skill-thunder-id-skills-integrate-tanstack-router
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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`
4. 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`.

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

## Step 3 — Configure Provider and Callback Route

Edit `src/main.tsx`:

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

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

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

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

```bash
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](https://github.com/thunder-id)
- **Source:** [thunder-id/skills](https://github.com/thunder-id/skills)
- **License:** Apache-2.0

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

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-thunder-id-skills-integrate-tanstack-router
- Seller: https://agentstack.voostack.com/s/thunder-id
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.