MSAL Authentication in React: Complete Guide – Part 1: Introduction and Setup

Mastering MSAL Authentication in React Applications

• MSAL Authentication in React: Complete Guide – Part 1: Introduction and Setup
• MSAL Authentication in React: Complete Guide – Part 2: MSAL Provider and Authentication Context
• MSAL Authentication in React: Complete Guide – Part 3: Protected Routes and Route Guards
• MSAL Authentication in React: Complete Guide – Part 4: Token Management and API Calls
• MSAL Authentication in React: Complete Guide – Part 5: Advanced Topics and Production Considerations

Microsoft Authentication Library (MSAL) provides robust authentication capabilities for React applications, enabling seamless integration with Azure Active Directory and Microsoft Identity Platform. In this comprehensive series, we’ll explore how to implement MSAL authentication using the redirect mechanism in React applications.

What is MSAL?

Microsoft Authentication Library (MSAL) is a set of libraries that enable applications to authenticate users and acquire tokens to call protected APIs like Microsoft Graph or your own web APIs. MSAL handles the complexity of modern authentication protocols including OAuth 2.0 and OpenID Connect.

Key Benefits of MSAL

• Security: Implements industry-standard authentication protocols
• Token Management: Automatic token refresh and caching
• Multiple Account Support: Handle multiple user accounts
• Cross-Platform: Works across web, mobile, and desktop applications
• Microsoft Integration: Seamless integration with Microsoft services

Redirect vs Popup Authentication

MSAL supports two authentication flows:

• Popup Flow: Opens authentication in a popup window
• Redirect Flow: Redirects the entire page to the authentication endpoint

In this series, we’ll focus on the redirect mechanism as it provides better security, works reliably across all browsers, and handles various edge cases more effectively.

Prerequisites

• Node.js (version 14 or higher)
• React application (Create React App or Vite)
• Azure Active Directory tenant
• App registration in Azure AD
• Basic understanding of React hooks and components

Setting Up Azure AD App Registration

Before implementing MSAL in your React application, you need to register your application in Azure Active Directory:

Step 1: Create App Registration

1. Navigate to the Azure Portal
2. Go to Azure Active Directory → App registrations
3. Click “New registration”
4. Enter your application name
5. Select “Single-page application (SPA)” as the platform type
6. Add your redirect URI (e.g., http://localhost:3000)

Step 2: Configure Authentication

• Navigate to Authentication in your app registration
• Ensure “Access tokens” and “ID tokens” are checked
• Add any additional redirect URIs for different environments
• Save the configuration

Step 3: Note Important Values

Make note of these values from your app registration:

• Application (client) ID: Found on the Overview page
• Directory (tenant) ID: Found on the Overview page
• Redirect URI: The URI you configured for your application

Installing MSAL React

Install the required MSAL packages for React:

npm install @azure/msal-browser @azure/msal-react

Or with yarn:

yarn add @azure/msal-browser @azure/msal-react

Package Overview

• @azure/msal-browser: Core MSAL library for browser applications
• @azure/msal-react: React-specific wrapper with hooks and components

Basic MSAL Configuration

Create a configuration file for MSAL settings:

// src/config/authConfig.js
export const msalConfig = {
  auth: {
    clientId: "your-client-id-here",
    authority: "https://login.microsoftonline.com/your-tenant-id",
    redirectUri: window.location.origin
  },
  cache: {
    cacheLocation: "sessionStorage",
    storeAuthStateInCookie: false
  }
};

export const loginRequest = {
  scopes: ["User.Read"]
};

Configuration Options Explained

• clientId: Your application’s client ID from Azure AD
• authority: The identity provider URL
• redirectUri: Where users are redirected after authentication
• cacheLocation: Where tokens are stored (sessionStorage recommended)
• storeAuthStateInCookie: Whether to store auth state in cookies

What’s Next?

In Part 2 of this series, we’ll dive into implementing the MSAL Provider and setting up the authentication context in your React application. We’ll cover:

• Setting up MsalProvider
• Configuring the authentication context
• Handling authentication state
• Creating protected routes

Stay tuned for the next part where we’ll start building the actual authentication implementation!