NextAuth.js is a complete open-source authentication solution for Next.js applications. It is designed from the ground up to support Next.js and Server less. It has built-in support for many popular sign-in services.

Advantages of NextAuth.js

• Designed to work with any OAuth service, it supports OAuth 1.0, 1.0A, 2.0 and OpenID Connect
• Supports email / password less Authentication
• Supports stateless authentication with any backend (Active Directory, LDAP, etc)
• Supports both JSON Web Tokens and database sessions
• Built-in support for MySQL, MariaDB, PostgreSQL, SQL Server, MongoDB and SQLite
• Can also be used without a database (e.g. OAuth + JWT)
• Designed to be secure by default and encourage best practices for safeguarding user data

Auth Providers :

NextAuth.js offers authentication providers services that can be used to sign in a user.

• Using a built-in OAuth Provider (Ex: Azure, Github, Twitter, Google)
• Using custom OAuth Provider
• Using Email
• Using Credentials

Azure AD configuration :

• Microsoft platform provides indentity and access management only for the registered applications
• To configure Azure AD into your application you need to register an application in azure portal (https://portal.azure.com/)

Prerequisites:

• An Azure account that has an active subscription. If you don’t have an account, create an account for free.
• The Azure account must have permission to manage applications in Azure Active Directory (Azure AD).

Application registration:

Registering application establishes the connection between your app and the Microsoft identity platform.

Follow these steps to register an application in azure portal

• Sign in to the Azure portal
• Search for Azure Active Directory and select your organization.

• Click on the App registration and create a new one

• Enter your application name and choose the account type from the listed options then specify the redirect URI which should be the callback url of your application
• Select register to complete the registration

 

• Once the application is registered, you can copy the application client ID, tenant ID in the overview panel

 

 

• Then you need to create client secret key in certificates & secrets section. After creation copy the client secret value which we need to use in application.

 

• Under Manage section, select Authentication -> Platform configurations, select Add a platform

• In configure platform section, select the application type as web and specify the redirect url of your application then click on configure
• Now your azure app will be able to communicate with your Next JS application

Next JS configuration

• Install NextAuth.js in your Next JS app using the npm command  (npm i next-auth)

• Create .env.local file and add the azure app credentials in it.

• Create […nextauth].js file in pages/api/auth folder and add your app credential in the AzureADProvider.

• Add callback functions after providers to process the Azure AD authentication request. Function jwt() is used to retrieve the user’s account details from azure endpoint.
• In the signIn() callback function, you need to set the state cookie with the expiry time. Once the state cookie is set, it will be automatically included in the Azure AD Authentication request when user is redirected to Azure AD login page.

• In the index.js file, add the following code to redirect the user to Azure AD and to fetch the user’s session after logged in successfully.

• Now you are all set to login into azure active directory. To run the application, use the command below npm run start
• Go to http://localhost:3000/ on your browser and see the output..!