Next.js App using Authorization Code Flow with PKCE

This project demonstrates how to implement the Authorization Code Flow with PKCE for a Next.js App.

Disclaimer: This project is for educational purposes only and should not be used in production without proper security review and testing.

Demo

This project is deployed on Cloudflare Pages and on Vercel.

Deploy the project using Vercel:

Deploy the project using Cloudflare:

Before getting started, make sure you have the following:

git clone https://github.com/cerberauth/openid-connect-examples.git

cd openid-connect-examples/nextjs-app
npm ci

npm run dev

Open your browser and navigate to http://localhost:5173/.
Click on the "Login" button to initiate the authorization code flow.
After successful authentication, you will be redirected back to the application and the user information will be displayed.

Configure the OpenID Connect provider:

If you don't have an OpenID Connect provider, you can create a Test Client on the TestID OpenID Connect Provider.

Obtain the client ID and client secret from your OpenID Connect provider.
Register the redirect URI for your Next.js App in the provider's developer console.

Update the configuration:

Create a .env.local file in the root directory of your project or copy .env.example file.
Add the necessary environment variables to the .env.local file. For example:

AUTH_SECRET=secret
AUTH_CLIENT_ID=your-client-id
AUTH_CLIENT_SECRET=your-client-secret

Generate a random secret using the following command:

openssl rand -base64 33

Replace secret with the generated secret.

Replace your-client-id and your-client-secret with the actual values provided by your OpenID Connect provider.

Save the .env.local file.