Secure your NextJS Apps with Azure AD and NextAuth (Part 2)
Setting Azure Active Directory (Azure AD) as your Identity Provider (IdP)
Disclaimer: This is part 2 of a 7 part tutorial. Click the below link to go back to Part 1 to learn more about the intent of this tutorial.
Setting up Azure Active Directory
First thing we want to do is setup our IdP. In this case we are using Azure Active Directory as the IdP. If you don’t have an account you can go here to get a free account by clicking the Start Free button and following the sign up UI. Note that the email address you sign up with is what we will be using when we login with NextAuth.
Once you’ve got your account and are logged in you should see a UI similar to this:
Click the Azure Active Directory button to navigate to Azure AD
Click the Add dropdown and select App Registrations
Give your application a name and select the first option in Supported account types . For now you can ignore the Redirect URI field. Click Register to complete the app registration
On the resulting screen you will see the Essentials section which lists details about your application. From here you want to take note of the Application (client) ID and Directory (tenant) ID as we will need these later on. We will also need Client Credentials (aka client secret).
To create your Client Credentials click the Add a certificate or secret link to navigate to the Certificates & Secrets page for your application
On the Client Secrets tab click New client secret
Give your secret a description and set when it expires then click Add. This should take you back to the Certificates & Secrets screen with your newly created client secret. You will need the Value for later in the article so store it in a secure location.
While you’re still in Azure AD let’s modify our registered app to have redirect URI. Click Add a Redirect URI on the Overview >> Essentials tab
Click the Add a platform button under Platform configurations and select Single-page Application
Enter http://localhost:3000/api/auth/callback/azure-ad as the Redirect URI and select ID Tokens in the Implicit grant and hybrid flows section.
Click Configure to save your settings
Note: We selected ID Tokens in the above configuration so that we can pass that through to AppSync later on.
Why is the Redirect URI important?
The Redirect URI allows Azure AD to ONLY respond to the URIs you configure when responding to authentication requests. This means that you are protected from other services requesting to authenticate a user in hopes of receiving a security token.
With that, we are ready to move on to the next part of this tutorial!
What’s next?
Part 3 — Project Setup: Next.js + Serverless Stack (SST) + AWS
Part 4 — Using NextAuth inYour Application
Part 5 — Securing your API Routes with NextAuth
Part 6 — Deploying with Serverless Stack
Part 7 — Third-Party Authentication and Authorization with AWS AppSync
Tools used in this tutorial
Core Concepts
My goal is to provide content that leaves readers with a bit more knowledge than they started with.
If this tutorial helped you in anyway please leave a clap or two! If you have any questions or I got something wrong, leave a comment and let me know how I can improve!
