Skip to main content

thunderid-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".

Jump to install

Source facts

Repository
thunder-id/skills
Last source activity
August 18, 2026 at 16:31
Detected SKILL.md language
English
Stars
35
Forks
8

Install options

The review-first prompt is selected by default. You can switch to a direct command or download a local copy.

Review the source files

Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.

Showing SKILL.md

SKILL.md
Source instructions ยท Read-only preview
name
thunderid-integrate-react
description
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".
license
Apache-2.0
allowed-tools
WebFetch, Bash(npm:*), Bash(npx:*), Bash(pnpm:*), Bash(yarn:*), Bash(bun:*), Read, Write, Edit
metadata
{"author":"thunderid","version":"1.0.0"}
# ThunderID โ€” React Integration Assumes ThunderID is running at `https://localhost:8090`. If not, run `/thunderid-install` first. Fetch the canonical, always-current integration guide before writing any code: WebFetch `https://thunderid.dev/docs/v1.0.x/getting-started/connect-your-application/react.md` Follow that guide end to end โ€” creating the Console application, installing `@thunderid/react`, wrapping the app with `ThunderIDProvider`, adding sign-in/sign-out UI, and verifying the app runs โ€” adapting file names, paths, and code style to this project's actual structure rather than copying the doc's file layout verbatim. You do not have Console access or a browser tool. Whenever a step needs a Console UI action (creating the application, copying the Client ID, adding a redirect URI), tell the user exactly what to click and ask them to report the value back. If the guide presents more than one configuration approach, use the `AskUserQuestion` tool to let the user choose rather than guessing. If the fetch fails (offline, docs unreachable), tell the user and give them the URL above to open manually. Do not improvise integration steps from memory. ## Project-specific notes - Detect the package manager from lockfiles: `pnpm-lock.yaml` โ†’ `pnpm add`, `yarn.lock` โ†’ `yarn add`, `bun.lockb` โ†’ `bun add`, else `npm install`. ## Troubleshooting - **Certificate error** โ€” Visit `https://localhost:8090` in your browser and accept the warning once. - **React Strict Mode double-render** โ€” Expected in development; the SDK handles it internally. - **`redirect_uri_mismatch`** โ€” The dev server's origin must exactly match an entry in **Authorized Redirect URIs** on the application.
View on GitHub