# Integrate React

> Add ThunderID authentication to a React application using the official @thunderid/react SDK. Use when asked to "integrate ThunderID into React", "add auth to my React app", or "connect ThunderID with React". For React Router or TanStack Router projects, prefer /integrate-react-router or /integrate-tanstack-router.

- **Type:** Skill
- **Install:** `agentstack add skill-thunder-id-skills-integrate-react`
- **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-react

## Install

```sh
agentstack add skill-thunder-id-skills-integrate-react
```

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

## About

# ThunderID — React 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-react-app`)
   - **Type**: Single Page Application
   - **Authorized Redirect URL**: `http://localhost:5173`
4. Click **Create** and copy the **Client ID** shown on the next screen

Once they paste the Client ID, use it as the `clientId` value 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
```

## Step 3 — Wrap with Provider

Edit `src/main.jsx` (or `src/main.tsx`), substituting the Client ID the developer provided:

```jsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { ThunderIDProvider } from '@thunderid/react'
import App from './App.jsx'
import './index.css'

createRoot(document.getElementById('root')).render(
  
    
      
    
  
)
```

Replace `CLIENT_ID_FROM_USER` with the actual Client ID the developer shared in Step 1.

## Step 4 — Add Auth UI

```jsx
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 5 — Run and Verify

```bash
npm run dev
```

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

## Troubleshooting

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

**React 19 Strict Mode double-render** — Expected in development; the SDK handles it internally.

## 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-react
- 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%.