Authentication App with Next.js and Microsoft Graph (Part 2)

Recap

This is a starter app for demo purposes, you will learn how to build a simple authentication app using Next.js, NextAuth, Typescript, and Microsoft Graph. The app will allow users to sign in with their Microsoft Entra ID and view their profile information. In Part 1, we configured the Microsoft Entra.

2. Pull the Authentication app from Github and configure .env.local

Once you've already created our application on the Azure Portal, you can configure the code in our application. In this example I have used Next.js. But you can use any other framework you want.

Open your terminal and run the following command to pull the sample authentication app:

gh repo clone ntegral/auth-app-pages         

Now we already have our application created, let's execute it to see if everything is working.

cd auth-app-pages        

code .        

In the root of the auth-app-pages folder, create an .env.local file. (make sure to save the file)

AZURE_AD_CLIENT_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
AZURE_AD_CLIENT_SECRET=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
AZURE_AD_TENANT_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
NEXTAUTH_SECRET=createsomeprivatesecret        

Note: Replace the xxxxxxx's above with the actual values that are in the Microsoft Entra App Registration that you created in Part 1.

Now we already have our application configured, let's execute it to see if everything is working. From the terminal or VS Code terminal:

npm install        

npm run dev        

Open the browser and go to the following address: http://localhost:3000.

Hope this article helps you on your coding journey.