Secure your NextJS Apps with Azure AD and NextAuth (Part 3)

Project Setup: Next.js + Serverless Stack (SST) + AWS

3 min readMar 5, 2023

Disclaimer: This is part 3 of a 7 part tutorial. Click the below link to go back to Part 1 to learn more about the intent of this tutorial.

Part 1 — Introduction and “What is an Identity Provider?”

Or go back to Part 2 — Setting Azure Active Directory (Azure AD) as your Identity Provider (IdP)

This tutorial uses Next.js, React and Typescript so some knowledge of these is ideal. That being said, you don’t need to be an expert in any of them to gain the most from this tutorial.

You will need an AWS account for this tutorial. To setup the required credentials you can follow the offical AWS instructions for setting up an account and user and storing AWS credentials. Setting up an AWS account is not within the scope of this tutorial, and the AWS documentation is very well done, so you shouldn’t have a problem there.

What is Next.js?

According to Vercel, the creators of Next.js:

Next.js [is a framework that] enables you to create full-stack web applications by extending the latest React features, and integrating powerful Rust-based JavaScript tooling for the fastest builds.

Next.js is a React framework that makes it easier for developers to create and maintain full-stack applications. Next takes care of your React configuration for you and provides additional tooling for creating React components and API endpoints.

Learn more about Next.js in their official docs

This tutorial is using the experimental app directory which you can read more about here

What is Serverless Stack (SST)?

According to the Serverless Stack team:

[Serverless Stack] SST is a framework that makes it easy to build modern full-stack applications on AWS.

SST is built on top of the AWS Cloud Development Kit (CDK) and provides a set of easy to use constructs that enable you to spin up a full-stack application fast. If you’re already using AWS CDK, you can integrate your existing constructs into SST with relative ease.

Learn more about Serverless stack in their official docs
Learn more about AWS CDK in their official docs

Setting up the project

First let’s set up a Serverless Stack project by running the following command

npx create-sst@latest --template=base/example auth-app
cd auth-app
npm install

In the sst.config.ts file you will want to change the region to whichever AWS region you will be deploying this application to.

After the SST dependencies are installed you can add Next to your application. From the root of the project run the following command

npx create-next-app frontend

You can use the same settings as me to avoid any complications when following this tutorial.

When asked What import alias would you like configured? just press enter.

Once that’s done downloading dependencies, you’re almost ready to go!

Now you can move on to Part 4 to get stuck into creating some React components and Securing your App with NextAuth!

What’s next?

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!