Skip to content

Latest commit

 

History

History
100 lines (72 loc) · 3.07 KB

05-session.md

File metadata and controls

100 lines (72 loc) · 3.07 KB

Defining AAD Provider in Next.js

Before we start creating the pages, we need to define the AAD provider in NextAuth.

But what is AAD? AAD stands for Azure Active Directory. It is a cloud-based identity and access management service that helps you manage access to your applications and services.

For this, inside the pages/api folder create a new folder called auth. Inside in this folder, create the file [...nextauth]].ts and add the following code:

  • pages/api/auth/[...nextauth].ts
pages/api/auth/[...nextauth].ts 
/**
 * file: pages/api/auth/[...nextauth].ts
 * description: file responsible for the authenticate an user using AAD Provider
 * data: 10/28/2022
 * author: Glaucia Lemos <Twitter: @glaucia_lemos86>
 */

import NextAuth, { NextAuthOptions } from "next-auth";
import AzureADProvider from 'next-auth/providers/azure-ad';

export const authOptions: NextAuthOptions = {
  providers: [
    AzureADProvider({
      clientId: process.env.AZURE_AD_CLIENT_ID,
      clientSecret: process.env.AZURE_AD_CLIENT_SECRET,
      tenantId: process.env.AZURE_AD_TENANT_ID,
    })
  ]
}

export default NextAuth(authOptions);

Now we need to use the environment variables that we created before in Azure Portal in AAD. So let's create the .env.local file in the root of the project and add the following code:

  • .env.local
AZURE_AD_CLIENT_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
AZURE_AD_CLIENT_SECRET=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
AZURE_AD_TENANT_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=123

If you want, I created a file called .env.local.template as sample. You can use as a reference.

Now we need to configure the main project in the project. So let's do it! Open the pages/_app.tsx file and add the following code:

  • pages/_app.tsx
pages/_app.tsx 
/**
 * file: pages/_app.tsx
 * description: file responsible for the application's configuration
 * data: 10/26/2022
 * author: Glaucia Lemos <Twitter: @glaucia_lemos86>
 */

import { SessionProvider } from 'next-auth/react';

import type { AppProps } from 'next/app';
import type { Session } from 'next-auth';

export default function App({
  Component,
  pageProps: { session, ...pageProps },
}: AppProps<{ session: Session }>) {
  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />
    </SessionProvider>
  );
}

We are here defining the SessionProvider from the NextAuth. It is responsible for managing the session of the user.

Now let's run the application again e then open the browser and access the following URL: http://localhost:3000. If you see the following screen, it means that everything is working fine:

image-16

Page links are still not working. But we will fix it in the next section. Let's create these pages in the next section.

⬅️ Back: Session 04 | Next: Session 06 ➡️