Skip to main content

Next.js Quickstart

This is step 4 of the getting started sequence. By the end you will have a working Next.js app with sign-in and sign-out powered by ThunderID.

What You Will Learn
  • Create a new Next.js app
  • Install the @thunderid/nextjs package
  • Add working sign-in and sign-out
  • Protect routes with middleware
Prerequisites
  • About 15 minutes
  • Steps 1–3 complete: ThunderID running, an application registered, and a sign-in flow built. Start at Get ThunderID if you haven't already.
  • Node.js installed on your system
  • npm, yarn, or pnpm
  • Your preferred code editor
1

Create a Next.js App

Create your new Next.js app:

npx create-next-app@latest my-nextjs-app
cd my-nextjs-app

When prompted, select the App Router option (the default).

2

Install @thunderid/nextjs

Install the ThunderID Next.js SDK in your project:

npm install @thunderid/nextjs
3

Set Environment Variables

Create a .env.local file in your project root with the following:

.env.local
NEXT_PUBLIC_THUNDERID_BASE_URL=https://localhost:8090
NEXT_PUBLIC_THUNDERID_CLIENT_ID=<your-client-id>
THUNDERID_CLIENT_SECRET=<your-client-secret>
THUNDERID_SECRET=<a-random-secret-for-session-signing>
Configuration

Replace <your-client-id> and <your-client-secret> with the values from your ThunderID application. Generate a random string for THUNDERID_SECRET (at least 32 characters).

4

Add ThunderIDProvider to Your Layout

Wrap your root layout with ThunderIDProvider from the server export. This enables authentication across your entire app.

info

ThunderIDProvider handles the OAuth callback automatically — no manual callback route is needed. Make sure the authorized redirect URL in your ThunderID application settings is set to http://localhost:3000.

app/layout.tsx
import { ThunderIDProvider } from '@thunderid/nextjs/server'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        <ThunderIDProvider>
          {children}
        </ThunderIDProvider>
      </body>
    </html>
  )
}
5

Add Middleware for Route Protection

Create a middleware.ts file at your project root to protect routes and handle token refresh:

middleware.ts
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).*)'],
}
6

Add Sign-In and Sign-Out

Update your home page to show sign-in and sign-out buttons:

app/page.tsx
import {
  SignedIn,
  SignedOut,
  SignInButton,
  SignOutButton,
  UserDropdown,
} from '@thunderid/nextjs'

export default function Home() {
  return (
    <main>
      <h1>Next.js Auth Demo</h1>

      <SignedOut>
        <SignInButton>Sign In</SignInButton>
      </SignedOut>

      <SignedIn>
        <UserDropdown />
        <SignOutButton>Sign Out</SignOutButton>
      </SignedIn>
    </main>
  )
}
7

Run Your App

Start the development server:

npm run dev

Visit your app at http://localhost:3000

Success

You should see the sign-in button. Click it to be redirected to the ThunderID-hosted sign-in page. Authenticate with the test user you created in step 2, then return to your app with the user dropdown displayed.

You're Done​

You have completed the full getting started sequence:

  1. ✅ ThunderID running
  2. ✅ Application registered with a Client ID and Secret
  3. ✅ Sign-in flow built in the Flow Designer
  4. ✅ Next.js app integrated and authenticating

What's Next​

ThunderID LogoThunderID Logo

Product

DocsAPIsSDKs

Community

ContributingDiscussionsReport an Issue

Resources

ReleasesGitHub
© WSO2 LLC. All rights reserved.Privacy PolicyCookie Policy