Next.js with OpenID Connect

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 your own

Deploy the project using Vercel:

Deploy the project using Cloudflare:

Prerequisites

Before getting started, make sure you have the following:

• Node.js installed on your machine
• An OpenID Connect provider that supports the Authorization Code Flow with PKCE

Getting Started

1. Clone the repository:

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

1. Install the dependencies:

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

1. Configure the OpenID Connect provider (see the Configuration section below).

2. Start the development server:

1
npm run dev

1. Open your browser and navigate to http://localhost:5173/.

2. Click on the "Login" button to initiate the authorization code flow.

3. After successful authentication, you will be redirected back to the application and the user information will be displayed.

Configuration

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:

1
AUTH_SECRET=secret
2
AUTH_CLIENT_ID=your-client-id
3
AUTH_CLIENT_SECRET=your-client-secret

Generate a random secret using the following command:

1
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.

Additional Resources

• Auth.js
• OpenID Connect
• OAuth 2.0 Authorization Code Flow
• PKCE
• Awesome OpenID Connect
• Next.js
• React