Integrate Nextjs

ThunderID — Next.js 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 and Client Secret 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-nextjs-app)
• Type: Web Application
• Authorized Redirect URL: http://localhost:3000

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

Once they paste both values, use them in all subsequent steps. Do not use placeholders — wait for the real values.

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/nextjs

Step 3 — Set Environment Variables

Create .env.local:

NEXT_PUBLIC_THUNDERID_BASE_URL=https://localhost:8090
NEXT_PUBLIC_THUNDERID_CLIENT_ID=
THUNDERID_CLIENT_SECRET=
THUNDERID_SECRET=

Generate THUNDERID_SECRET with openssl rand -base64 32 (at least 32 characters).

Step 4 — Add ThunderIDProvider to Layout

Edit app/layout.tsx — ThunderIDProvider handles the OAuth callback automatically; no manual callback route needed:

import { ThunderIDProvider } from '@thunderid/nextjs/server'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    
      
        
          {children}
        
      
    
  )
}

Step 5 — Add Middleware for Route Protection

Create middleware.ts at the project root:

import {
  thunderIDMiddleware,
  createRouteMatcher,
} from '@thunderid/nextjs/middleware'

const isProtectedRoute = createRouteMatcher(['/dashboard(.*)'])

export default thunderIDMiddleware(async (thunderid, request) => {
  if (isProtectedRoute(request)) {
    await thunderid.protectRoute()
  }
})

export const config = {
  matcher: ['/((?!_next/static|_next/image|favicon.ico).*)'],
}

Step 6 — Add Auth UI

import {
  SignedIn,
  SignedOut,
  SignInButton,
  SignOutButton,
  UserDropdown,
} from '@thunderid/nextjs'

export default function Home() {
  return (
    
      Next.js Auth Demo
      
        Sign In
      
      
        
        Sign Out
      
    
  )
}

Step 7 — Run and Verify

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.

invalid_client — Double-check the Client ID and Client Secret in .env.local.

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.