Next.js with NextAuth.js and Azure AD B2C Example

This repository provides a practical example of integrating Next.js version 14, NextAuth.js version 5 (beta version, soon to be Auth.js), and Azure AD B2C for Single Page Applications with Signin User Flow.

The implementation of Login, Logout, and Refresh Token Rotation features is designed to help other developers get a quick start.

For the NextAuth.js Upgrade Guide (v5) click here.

Getting Started

Configure Azure AD B2C

Follow the instructions to obtain the necessary credentials:

• Create a Tenant
• Register a Single Page Application
• Create a SignIn User Flow

Setup and Run

1. Clone this repository:

git clone https://github.com/karoldavid/next-auth-azure-ad-b2c-example.git

2. Install dependencies:

cd next-auth-azure-ad-b2c-example
yarn

3. Configure your Azure AD B2C settings:

Update the .env.local.example file with your B2C configuration and rename it to .env.local.

4. Run the application:

npm run dev

5. Visit http://localhost:3000 in your browser.

Implemented Features

Login

• auth.ts

Logout

• components/auth-components.tsx
• app/signout/page.tsx
• components/signout.tsx

Refresh Token Rotation

• auth.ts

Resources

The following resources were helpful in implementing these features:

• Original Repository: NextAuth.js Example App
• NextAuth.js Upgrade Guide (v5): https://authjs.dev/guides/upgrade-to-v5
• Login: NextAuth.js issue comment
• Logout: Next Auth Azure Ad B2C signout problem session kills on app but not on azure AD
• Refresh Token Rotation: NextAuth Refresh Tokens Example

License

This project is licensed under the terms of the MIT license. For more details, see the LICENSE file in the repository.