Authentication App with Next.js and Microsoft Graph
Level: Beginner-Intermediate
Introduction
In this workshop, you will learn how to build a simple authentication app using Next.js, TypeScript, and Microsoft Graph. The app will allow users to sign in with their Microsoft account 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
To follow this workshop, you will need:
- Visual Studio Code
- Microsoft Teams
- Microsoft 365 Developer Program
- Microsoft Graph
- Microsoft Graph JavaScript SDK
- Node.js 16.x
- Next.js
Beyond that, you will need a Microsoft 365 Developer Program account.
If you have doubt how to create it, you can watch this video. It explains how to create the account. This account it's free.
Sessions
| Session | Topics |
|---|---|
| Introduction | Here you will have an introduction to the workshop. |
| 1. Configuring an Application in Azure Active Directory | Here you will learn how to create an application in AAD and configure the necessary permissions so that the application can access the user's data. |
| 2. Structuring the Project | In this in this session, we will create the project structure and configure the environment. |
| 3. Creating the Application Components | In this session, we will create the components that will be used in the application. |
| 4. Defining AAD Provider in Next.js | In this session we will define the AAD Provider in Next.js. |
| 5. Creating the pages for the application | In this session, we are going to create the pages for the application. |
| 6. Creating Configuration Files | In this session we will create the configuration files for our application. |
| 7. Important changes in the Admin & Reminder Pages | In this session we will make some important changes in the Admin and Reminder pages. |
| 8. Next Steps & Final Words | And finally what is the next steps and some important links and resources. |