Next.js with OpenID Connect

Next.js with OpenID Connect is an example Next.js application from the Cerberauth openid-connect-examples repository that implements the OAuth 2.0 Authorization Code Flow with PKCE against any OpenID Connect provider, using Auth.js for the login and session handshake. It ships as the examples/nextjs-app project inside that repository and is intended as a reference implementation rather than production-ready code.

What is Next.js with OpenID Connect?

It is a runnable Next.js app that takes three environment values — a client ID, a client secret, and an Auth.js secret — plus a redirect URI registered with an OpenID Connect provider, and turns them into a working login flow. Clicking the Login button sends the visitor to the provider through the Authorization Code Flow with PKCE, and after successful authentication the app displays the returned user information. The project is maintained in the Cerberauth openid-connect-examples collection, ships with live demos on Cloudflare Pages and Vercel, and carries an explicit disclaimer that it is for educational purposes only.

Key Features

• Next.js and React — built on Next.js (nextjs.org) with React, started with npm run dev and reached at http://localhost:5173/ in the documented workflow.
• Auth.js integration — authentication is handled by Auth.js (authjs.dev), which drives the OpenID Connect handshake and session handling.
• Authorization Code Flow with PKCE — the demo implements the PKCE extension to the OAuth 2.0 Authorization Code grant, so it works with public/confidential clients that require a code challenge.
• Provider-agnostic configuration — any OpenID Connect provider supporting the Authorization Code Flow with PKCE can be plugged in; a free Test Client on the TestID OpenID Connect provider is suggested if you do not have one.
• Environment-based secrets — configuration lives in .env.local (copied from .env.example) using AUTH_SECRET, AUTH_CLIENT_ID, and AUTH_CLIENT_SECRET, with a random secret generated by openssl rand -base64 33.
• One-click deployment — dedicated deploy buttons for Vercel (prompting for the three environment variables) and Cloudflare Pages.
• Live hosted demos — working deployments at cerberauth-nextjs-app-oidc.pages.dev and cerberauth-nextjs-app-oidc.vercel.app.

Who is it for?

• Developers learning OpenID Connect: read a complete, minimal Next.js implementation of the Authorization Code Flow with PKCE instead of piecing it together from specs.
• Engineers debugging an identity provider: run the app against your own provider to confirm that the client ID, client secret, and redirect URI registration behave as expected.
• Teams starting a Next.js app with login: clone the repository and use the Auth.js wiring as a starting point for their own authentication layer.
• Hackathon and demo builders: deploy the same code to Vercel or Cloudflare Pages in minutes without writing an auth flow from scratch.

What can you do with Next.js with OpenID Connect?

• Test an OIDC provider: point the app at a provider, register the redirect URI, and confirm that PKCE authentication and the user-info response work end to end.
• Ship a hosted login demo: use the Vercel or Cloudflare deploy buttons to publish a public instance that shows the flow to stakeholders.
• Bootstrap a Next.js auth layer: lift the Auth.js configuration and login button pattern into a larger app that needs the same flow.

How does it work?

1. Clone https://github.com/cerberauth/openid-connect-examples.git and install dependencies with npm ci inside the nextjs-app directory.
2. Register the redirect URI with your OpenID Connect provider and write the client ID, client secret, and a generated secret into .env.local.
3. Run npm run dev, open the local URL, and click Login to start the authorization code flow; after authentication the browser returns to the app and the user information is displayed.

FAQ

What does this Next.js example do?

It demonstrates the Authorization Code Flow with PKCE for a Next.js application using Auth.js against any OpenID Connect provider. Users click a Login button, authenticate at the provider, are redirected back, and the app renders the user information retrieved from the provider.

Is this project production-ready?

No. The repository states the project is for educational purposes only and should not be used in production without a proper security review and testing. Treat the code as a reference implementation and harden it before handling real user accounts.

Can it work with any OpenID Connect provider?

Any provider that supports the Authorization Code Flow with PKCE will work, as long as you register the redirect URI and supply the client ID and client secret. The README suggests creating a free Test Client on the TestID OpenID Connect provider if you do not already have one.

Can I deploy it to Vercel or Cloudflare Pages?

Yes. The README includes a Deploy with Vercel button that prompts for the Auth.js secret, client ID, and client secret, and a Deploy to Cloudflare Pages link. Both hosted demo instances are linked from the project.

Do I need Node.js to run it?

Yes. Node.js must be installed locally, along with an OpenID Connect provider that supports PKCE. The documented workflow uses npm ci to install dependencies and npm run dev to start the development server.