Production-ready MSAL for Next.js

Authentication
Made Simple

Fully configurable MSAL authentication for Next.js App Router.
Zero config to get started. Infinite flexibility when you need it.

Get StartedView on GitHub
npm install @chemmangat/msal-next

The Problem We Solve

MSAL authentication shouldn't be complicated. We've done the heavy lifting so you don't have to.

Without @chemmangat/msal-next

  • Complex MSAL setup with boilerplate code
  • Managing authentication state manually
  • Handling token refresh and expiration
  • Configuring for different environments
  • Dealing with popup vs redirect flows

With @chemmangat/msal-next

  • One-line provider setup with sensible defaults
  • Built-in hooks for authentication state
  • Automatic token refresh with fallback
  • Environment-based configuration support
  • Simple API for both popup and redirect

Powerful Features

Everything you need for enterprise-grade authentication in a simple, elegant package.

Zero Config

Get started with just your client ID. Sensible defaults for everything else.

Fully Configurable

Override any setting when you need more control. From cache location to custom loggers.

Production Ready

Built-in token refresh, error handling, and security best practices.

TypeScript First

Full type definitions included. Autocomplete and type safety out of the box.

Next.js 14+ Ready

Built specifically for Next.js App Router with React Server Components support.

Developer Experience

Simple hooks, clear errors, and comprehensive documentation.

See It In Action

Three simple steps to add Microsoft authentication to your Next.js app.

1

Setup Provider

Wrap your app with MsalAuthProvider

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

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <MsalAuthProvider
          clientId={process.env.NEXT_PUBLIC_CLIENT_ID!}
          scopes={['User.Read']}
        >
          {children}
        </MsalAuthProvider>
      </body>
    </html>
  );
}
2

Use Authentication

Simple hooks for authentication

// app/page.tsx
'use client';

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

export default function Home() {
  const { isAuthenticated, account, loginPopup, logoutPopup } = useMsalAuth();

  if (!isAuthenticated) {
    return <button onClick={() => loginPopup()}>Sign In</button>;
  }

  return (
    <div>
      <h1>Hello, {account?.name}!</h1>
      <button onClick={() => logoutPopup()}>Sign Out</button>
    </div>
  );
}
3

Call Protected APIs

Automatic token acquisition

const { acquireToken } = useMsalAuth();

const fetchUserProfile = async () => {
  const token = await acquireToken(['User.Read']);
  
  const response = await fetch('https://graph.microsoft.com/v1.0/me', {
    headers: { Authorization: `Bearer ${token}` }
  });
  
  return response.json();
};

Quick Start

Get up and running in less than 5 minutes. No complex configuration required.

Step 1

Install Package

Add the package and peer dependencies to your project

npm install @chemmangat/msal-next @azure/msal-browser @azure/msal-react
Step 2

Configure Azure AD

Get your client ID from Azure Portal and add to .env.local

NEXT_PUBLIC_CLIENT_ID=your-client-id
Step 3

Wrap Your App

Add the provider to your root layout

<MsalAuthProvider clientId={...}>{children}</MsalAuthProvider>
Step 4

Start Building

Use the hook in your components

const { loginPopup } = useMsalAuth();
Read Full Documentation→

Ready to Get Started?

Join developers who are building secure, production-ready authentication with @chemmangat/msal-next.

Install NowView on GitHub
MIT Licensed
TypeScript
Next.js 14+