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

Introduction

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.

What is Microsoft Graph?

Microsoft Graph is an API that allows you to access data and services from Microsoft 365. You can use the Microsoft Graph API to build applications that interact with millions of users around the world, accessing data in a consistent way across the Microsoft 365 ecosystem.

Prerequisites

• VS Code
• Azure Account (Click Here to create an Azure Account)
• Access to add an application to Microsoft Entra
• Node
• Next.js
• Typescript

1. Configuring an Application in Microsoft Entra ID

In this session, you will learn how to create an application in Microsoft Entra ID ( formally Azure Active Directory (AAD)) and configure the necessary permissions so that the application can access the user's data.

Before starting to develop the application, you need to create an application in the Microsoft Entra. For this, go now to the Azure Portal, and click on Microsoft Entra ID.

Now, let's go to the step by step!

Step by Step

1. Go to Azure Portal and click on Microsoft Entra ID.

1. Click on App Registrations.

1. Click on New Registration.

1. Fill in the fields as shown below and click on Register.

1. Go to Overview and copy:

• Application (client) ID
• Directory (tenant) ID

We will use these values to configure the application in the env.local file.

Configure the Application

1. Go to Certificates & secrets and click on New client secret.

1. Fill the field Description and click on Add.

1. Copy the Value of the Client secret.

Obs.: don't forget to save this value, you will need it later. If you lose it, you will need to create a new one.

1. Go to API permissions and click on Add a permission.

1. Click on Microsoft Graph amd then on Delegated permissions.

1. Select the following permissions and click on Add permissions.

• email
• offline_access
• openid
• Presence.Read
• profile

1. Go to Microsoft Graph again and click on Application permissions.

1. Select the following permissions and click on Add permissions.

• Presence.ReadWrite.All: Allows the app to read all presence information and write activity and availability of all users in the directory without a signed-in user. Presence information includes activity, availability, status note, calendar out-of-office message, time zone and location.

1. Click on Grant admin consent for 'your-tenant-name' and click on Yes.

Congratulations! ??????

You have successfully created an application in Microsoft Entra and configured the necessary permissions so that the application can access the user's data.

In Part 2, I'll show you how to create the Next.js application and configure it to work with Microsoft Entra.