Stats
Actions
Tags
From core
Add ThunderID authentication to a Next.js application using the official @thunderid/nextjs SDK. Use when asked to "integrate ThunderID into Next.js", "add auth to my Next.js app", or "connect ThunderID with Next.js".
How this skill is triggered — by the user, by Claude, or both
Slash command
/core:integrate-nextjsThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Assumes ThunderID is running at `https://localhost:8090`. If not, run `/setup-thunderid` first.
Assumes ThunderID is running at https://localhost:8090. If not, run /setup-thunderid first.
https://localhost:8090/console and sign in as admin / adminhttp://localhost:3000/callbackFirst obtain a system API token from the ThunderID console, then:
curl -kL -X POST https://localhost:8090/applications \
-H 'Authorization: Bearer <your-system-token>' \
-H 'Content-Type: application/json' \
-d '{
"name": "my-nextjs-app",
"inboundAuthConfig": [{
"type": "oauth2",
"config": {
"grantTypes": ["authorization_code", "refresh_token"],
"responseTypes": ["code"],
"redirectUris": ["http://localhost:3000/callback"],
"tokenEndpointAuthMethod": "client_secret_basic",
"publicClient": false,
"pkceRequired": true
}
}]
}'
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/nextjs
Edit app/layout.tsx (App Router):
import { ThunderIDServerProvider } from '@thunderid/nextjs'
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<ThunderIDServerProvider>{children}</ThunderIDServerProvider>
</body>
</html>
)
}
Add to .env.local:
NEXT_PUBLIC_THUNDERID_BASE_URL=https://localhost:8090
NEXT_PUBLIC_THUNDERID_CLIENT_ID=<your-client-id>
THUNDERID_CLIENT_SECRET=<your-client-secret>
import {
SignedIn, SignedOut, SignInButton, SignOutButton, Loading, User,
} from '@thunderid/nextjs'
export default function Page() {
return (
<>
<Loading><div>Loading...</div></Loading>
<SignedIn><SignOutButton>Sign Out</SignOutButton></SignedIn>
<SignedOut><SignInButton>Sign In</SignInButton></SignedOut>
<SignedIn>
<User>
{(user) => user && <p>Welcome, {user.name || user.username}!</p>}
</User>
</SignedIn>
</>
)
}
npm run dev
Click Sign In — you should be redirected to https://localhost:8090 and returned after login.
Certificate error — Visit https://localhost:8090 in your browser and accept the warning once.
invalid_client — Double-check the Client ID and Client Secret in .env.local.
Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.
npx claudepluginhub brionmario/thunderid-skills-poc --plugin integration