Authentication with Next.js, Azure AD, and MSAL

Building a secure, scalable, and efficient web application can be a complex task. With the rise of cloud-based authentication solutions, many developers are turning to Microsoft Azure Active Directory (AAD) to handle user authentication. To simplify the integration of AAD into your Next.js application, Microsoft has developed the Microsoft Authentication Library (MSAL) to simplify authentication with Azure services. In this article, we’ll walk you through the steps required to integrate MSAL into your Next.js application using TypeScript.

Before we begin, it’s important to note that MSAL supports several platforms and libraries, including Node.js, Angular, React, and more. For this article, we’ll be using Next.js, a popular React-based framework for building server-side rendered (SSR) web applications, along with TypeScript, a statically typed programming language that builds on JavaScript.

Step 1: Create an Azure AAD instance

The first step in the integration process is to create an instance of Azure AAD. If you don’t already have an Azure account, you’ll need to create one. Once you have an account, log in to the Azure portal and create a new instance of Azure Active Directory. Make note of your tenant ID, as you’ll need it later.

Step 2: Create a new Next.js application

With your Azure AAD instance in place, the next step is to create a new Next.js application. You can create a new Next.js application by running the following command in your terminal:

npx create-next-app my-app

Step 3: Install MSAL and configure your application

With your Next.js application created, the next step is to install MSAL and configure your application. You can install MSAL by running the following command in your terminal:

npm install @azure/msal-browser

Next, you’ll need to configure MSAL by creating a new MSAL configuration object. This object will contain information about your Azure AAD instance, such as your tenant ID and client ID. Here’s an example of a typical MSAL configuration object:

const msalConfig = {
  auth: {
    clientId: 'your-client-id',
    authority: `https://login.microsoftonline.com/your-tenant-id`
  }
};

Step 4: Add MSAL to your Next.js application

With MSAL installed and configured, the next step is to add it to your Next.js application. You’ll need to import MSAL into your application and initialize a new MSAL instance. Here’s an example of how to do this in TypeScript:

import { UserAgentApplication } from '@azure/msal-browser';

const msalInstance = new UserAgentApplication(msalConfig);

Step 5: Implement authentication in your Next.js application

With MSAL added to your application, the final step is to implement authentication. MSAL provides several methods for authenticating users, including sign-in, sign-out, and acquiring tokens. For this article, we’ll focus on the sign-in method.

In this example, we’re using the loginRedirect method to initiate the sign-in process and redirect the user to the Azure AAD sign-in page. Once the user has signed in, they’ll be redirected back to your Next.js application, and the isAuthenticated state will be set to true, indicating that the user is now logged in.

To sign in a user, you’ll need to call the loginRedirect method on your MSAL instance. Here’s an example of how to do this in a Next.js component:

import { useState } from 'react';

const Login = () => {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  const handleLogin = async () => {
    try {
      await msalInstance.loginRedirect();
      setIsAuthenticated(true);
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <div>
      {isAuthenticated ? (
        <p>You are logged in!</p>
      ) : (
        <button onClick={handleLogin}>Login</button>
      )}
    </div>
  );
};

Conclusion

In this article, we’ve shown you how to integrate Azure MSAL into your Next.js application using TypeScript. By following these steps, you’ll be able to add secure and scalable authentication to your Next.js applications using Azure AAD.

With MSAL, you can simplify authentication with Azure services and provide your users with a seamless sign-in experience. Whether you’re building a small personal project or a large enterprise application, MSAL and Next.js are a powerful combination for building secure, scalable, and efficient web applications.