DEV Community

Hari Manoj
Hari Manoj

Posted on

Microsoft Auth in Next.js Finally Makes Sense

#nextjs #microsoftauth #webdev #showdev

Trusted by 4,500+ developers, @chemmangat/msal-next turns one of the most frustrating parts of the Next.js App Router into a 5-minute setup.

Integrating Azure AD/Entra ID shouldn't be this hard. Hydration mismatches, window is not defined crashes, token expiry bugs, and 50+ lines of boilerplate before you even get a login button — it can eat days of engineering time.

The Problem

The official @azure/msal-react library is powerful, but it was not built for the App Router. In practice, that means:

  • Massive boilerplate — 50+ lines of config before anything works.
  • SSR failures — Manual use client wrapping and persistent hydration mismatches.
  • Token expiration surprises — Unexpected logouts when silent refresh fails.
  • Server Component dead ends — No clean way to access sessions in RSC.

The Solution: @chemmangat/msal-next

A lightweight, production-ready wrapper that makes MSAL work the way you'd expect it to.

1. Zero-Config Setup

Initialize your entire auth flow with one command:

npx @chemmangat/msal-next-cli init
Enter fullscreen mode Exit fullscreen mode

2. Clean Integration

No complex provider trees. Wrap your layout and you're done:

// app/layout.tsx
import { MsalAuthProvider } from '@chemmangat/msal-next';

export default function RootLayout({ children }) {
  return (
    <MsalAuthProvider clientId={process.env.NEXT_PUBLIC_CLIENT_ID}>
      {children}
    </MsalAuthProvider>
  );
}
Enter fullscreen mode Exit fullscreen mode

3. Real Server Component Support

Access the user session directly in RSC — no extra API calls:

import { getServerSession } from '@chemmangat/msal-next';

export default async function Dashboard() {
  const session = await getServerSession();

  if (!session) return <p>Access Denied</p>;

  return <h1>Welcome, {session.user.name}</h1>;
}
Enter fullscreen mode Exit fullscreen mode

Key Features

  • Automatic Token Refresh — Silent acquisition runs in the background.
  • Role-Based Access (RBAC) — Secure routes or UI elements based on Azure Roles.
  • Rich User Profiles — 30+ profile fields available via useUserProfile().
  • Pre-built Components — Drop-in <MicrosoftSignInButton /> ready for production.

Why Use It

  • Next.js 14/15 ready — Full support for the latest App Router patterns.
  • Actively maintained — Updated for MSAL Browser v5 and React v19.
  • Lightweight — Built directly on top of official MSAL core, no reinvented wheels.

Get Started 

npm i @chemmangat/msal-next
Enter fullscreen mode Exit fullscreen mode

If this saves you time, a star on GitHub goes a long way. Feedback welcome in the comments.

Top comments (0)