DEV Community: Hari Manoj

Microsoft Auth in Next.js Finally Makes Sense

Hari Manoj — Mon, 13 Apr 2026 09:41:09 +0000

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

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>
  );
}

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>;
}

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

NPM: npmjs.com/package/@chemmangat/msal-next
GitHub: github.com/chemmangat/msal-next
Docs: msal.chemmangathari.in/

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

I added Microsoft Auth to my Next.js app in 5 minutes. Here's how.

Hari Manoj — Tue, 07 Apr 2026 15:22:06 +0000

No, seriously. One command.

npx @chemmangat/msal-next-cli init

That's it. It asks you three questions, writes your .env.local, wires up layout.tsx, and creates a starter auth page. You didn't misread that.

The problem with MSAL in Next.js

If you've tried it before, you know. The official docs are verbose. Middleware breaks on the edge runtime. Token expiry is hardcoded. Cookie sync is manual. And MSAL v5 just dropped with enough breaking changes to ruin your afternoon.

@chemmangat/msal-next fixes all of that.

What v5.3.0 ships

Auto cookie sync — MsalAuthProvider now writes and clears msal.account on every login/logout automatically. Middleware works with zero manual setup.
Edge runtime fixed — createAuthMiddleware now lives in its own import path, no more Next.js edge crashes.
Real token expiry — reads actual expiresOn from the token. No more hardcoded 3600 seconds sneaking up on you in prod.
MSAL v3, v4, v5 all supported — runtime version detection. You update MSAL, nothing breaks.

The whole auth setup, start to finish

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

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

export default function RootLayout({ children }) {
  return (
    <html><body>
      <MSALProvider clientId={process.env.NEXT_PUBLIC_CLIENT_ID!}>
        {children}
      </MSALProvider>
    </body></html>
  );
}

// app/page.tsx
'use client';
import { MicrosoftSignInButton, useMsalAuth } from '@chemmangat/msal-next';

export default function Home() {
  const { isAuthenticated, account } = useMsalAuth();
  if (!isAuthenticated) return <MicrosoftSignInButton />;
  return <div>Hello, {account?.name}!</div>;
}

That's the full implementation. Sign in with Microsoft, working.

Already using it? Upgrading to MSAL v5?

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

Done. Every v5 breaking change is handled internally — event payload types, removed config options, redirect promise signature. You change nothing in your app code.

It also does...

Multi-account support (switch between 5 Microsoft accounts)
Multi-tenant control — allow/block by domain or tenant ID
Protected routes in one line
Auto token refresh — no more surprise logouts
100% TypeScript, 2.9k+ weekly downloads

Sounds too good to be true? Try it.

📦 npmjs.com/package/@chemmangat/msal-next
🌐 msal.chemmangathari.in

Microsoft Login for Next.js That Actually Works (Finally)

Hari Manoj — Wed, 18 Mar 2026 05:53:07 +0000

If you've added Microsoft login to a Next.js App Router project, you know the drill: hours of MSAL docs, client/server boundary issues, and debugging token renewals.

@chemmangat/msal-next is a production-ready wrapper that gives you Azure AD authentication in minutes, not days.

Independent AI Audit

This package was submitted for honest, unbiased reviews across three leading AI models:

Reviewer	Score
DeepSeek	8.5 / 10
ChatGPT	8.0 / 10
Claude	7.5 / 10

No prompt engineering. No leading questions. Just the code and the docs.

Setup

One command scaffolds your entire auth setup:

npx @chemmangat/msal-next-cli init

It creates your .env.local, wraps your layout with MSALProvider, and generates a starter auth page. You're two steps away from a working sign-in button.

What's Included

This isn't just a login button. It's a complete auth toolkit built for the App Router:

Zero-config components — drop in <MicrosoftSignInButton> and you're done
Hooks — useMsalAuth(), useUserProfile(), useRoles()
Multi-tenant and multi-account support — available from v5.1.0
Route protection — via HOCs, guards, or Edge middleware
Server component support — use getServerSession() where you need it

Installation

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

View the full documentation on GitHub →

useMemo vs useCallback - Simply Explained

Hari Manoj — Wed, 18 Mar 2026 05:45:47 +0000

If you've worked with React, you've likely seen these two hooks show up in code reviews and wonder whether you actually need them.

The short answer: sometimes yes, often no.

The one-line distinction

useMemo remembers a value
useCallback remembers a function

That's the entire mental model. Everything else follows from this.

Why do they exist?

Every time a React component re-renders, variables and functions inside it are recreated from scratch — even if nothing logically changed. Most of the time, this is fine. But it becomes a problem when those recreated values are passed as props.

function Parent() {
  const handleClick = () => console.log("clicked");
  return <Child onClick={handleClick} />;
}

On every render, handleClick is a brand new function. To React, a new function means a changed prop — so Child re-renders, even though the behavior is identical.

useCallback fixes this by holding onto the same function reference across renders:

const handleClick = useCallback(() => {
  console.log("clicked");
}, []);

Same idea applies to derived data. This runs on every render:

const filtered = items.filter(item => item.active);

useMemo runs it only when the dependency changes:

const filtered = useMemo(() => items.filter(item => item.active), [items]);

When to actually use them

Use useCallback when passing functions to child components, particularly ones wrapped in React.memo.

Use useMemo when performing expensive computations or transforming large datasets.

When to skip them: small components, simple logic, anything that isn't measurably slow. These hooks add complexity and have their own overhead — they're optimizations, not defaults.

If nothing is slow or broken, you likely don't need either.

Preparing for Javascript interviews? Don't miss out this free resource.

Hari Manoj — Mon, 16 Mar 2026 11:36:49 +0000

I was browsing through the internet to gather sample questions that are frequently asked in interviews in multiple companies. Those articles were great but most of them are either old or need some sort of premium subscriptions.

But what if I tell you there's a GitHub Repo where there are active contributions from real devs who have attended interviews and are updating frequently asked questions on the go and the list isn't merely 100 questions, but a whopping 450+ actual useful Javascript interview questions.

If you are also looking for some resource I hope this will be useful. (It's not a promotion or any kind of similar stuff, I found it while browsing and thought the community might need it.)

GitHub Repo Link: Repo Link

Cheers and happy coding.

Track any npm package's downloads, trends, and health score for free

Hari Manoj — Sun, 08 Mar 2026 15:00:13 +0000

I Made Something for npm Package Analytics

Hey devs! 👋

I kept finding myself checking npm package stats manually, so I built a simple dashboard to make it easier. Thought I'd share in case it's useful to anyone else.

👉 packfolio.dev (no signup, just search)

What It Does

📊 Health Score - Quick 0-100 rating based on downloads, freshness, and activity

🔥 Trending Packages - See what's gaining traction in the ecosystem

📈 Download Heatmap - 365-day visualization (like GitHub contributions)

🏆 Developer Stats - Compare impact across the community

📉 Charts - Trend analysis and package comparisons

⏱️ Timeline - Track releases and milestones

Why I Built It

Honestly, I just wanted to:

Check my own packages without opening multiple tabs
Compare libraries before choosing dependencies
See what's trending in the npm world

Figured others might find it helpful too.

How It Works

Search by username (like sindresorhus) or package name (like react). Everything runs in your browser - no backend, no tracking, no data collection.

Built with Next.js 16, TypeScript, and the npm Registry API.

Try It Out

packfolio.dev

It's completely free and open source. If you find bugs or have ideas for improvements, I'd genuinely appreciate the feedback!

What npm packages do you check most often? Curious to hear what you all use! 💬

javascript #webdev #opensource #nextjs #typescript #npm #react #analytics #devtools #frontend #coding #programming #developer #tech #buildinpublic

I Protected My Next.js Routes with MSAL in One Line of Code (No Middleware Required)

Hari Manoj — Sat, 07 Mar 2026 08:38:45 +0000

Setting up Microsoft authentication in Next.js used to mean writing 50+ lines of middleware, manual redirects, and boilerplate in every protected page. Not anymore.

The Problem

Here's what protecting a route looked like before:

// middleware.ts - 30 lines
export async function middleware(request: NextRequest) {
  const session = await getServerSession();
  if (!session) {
    return NextResponse.redirect(new URL('/login', request.url));
  }
  // ... more boilerplate
}

// app/dashboard/page.tsx - 20 more lines
export default async function Dashboard() {
  const session = await getServerSession();
  if (!session) {
    redirect('/login');
  }

  // Finally, your actual code
  return <div>Dashboard</div>;
}

Painful. Repetitive. Error-prone.

The Solution

// app/dashboard/page.tsx
export const auth = { required: true };

export default function Dashboard() {
  return <div>Dashboard</div>;
}

That's it. One line. The page is now protected.

How It Works

Install the package:

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

Wrap your app:

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

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <MSALProvider
          clientId={process.env.NEXT_PUBLIC_CLIENT_ID}
          tenantId={process.env.NEXT_PUBLIC_TENANT_ID}
        >
          {children}
        </MSALProvider>
      </body>
    </html>
  );
}

Protect any page:

export const auth = { required: true };

Done. Users get redirected to login automatically. Return URLs handled. Loading states included.

Real-World Examples

Role-based access:

export const auth = {
  required: true,
  roles: ['admin', 'editor']
};

Custom validation:

export const auth = {
  required: true,
  validate: (account) => account.username.endsWith('@company.com')
};

Custom UI:

export const auth = {
  required: true,
  loading: <Spinner />,
  unauthorized: <AccessDenied />
};

Why This Matters

Before:

30 minutes to set up middleware
Boilerplate in every protected page
Easy to forget protection
Hard to maintain

After:

30 seconds to protect a route
Zero boilerplate
Explicit and visible
Easy to maintain

The Full Feature Set

Beyond zero-config protection, you get:

Pre-built components: Sign-in button, user avatar, auth status
Powerful hooks: useMsalAuth(), useGraphApi(), useUserProfile()
TypeScript first: Full type safety
Production ready: Error handling, token refresh, retry logic
Next.js 14+ optimized: Built for App Router

Quick Start

// 1. Install
npm install @chemmangat/msal-next

// 2. Wrap your app
<MSALProvider clientId="..." tenantId="...">
  {children}
</MSALProvider>

// 3. Protect routes
export const auth = { required: true };

// 4. Add login page
import { MicrosoftSignInButton } from '@chemmangat/msal-next';
<MicrosoftSignInButton />

Under the Hood

The package uses React Context and Next.js App Router features to:

Check auth state on page load
Redirect to login if needed (with return URL)
Show loading state during check
Render page when authorized

All automatic. All configurable.

Migration from v3.x

Good news: v4.0 is 100% backward compatible. Your existing code works. The new protection feature is optional but recommended.

Why I Built This

I was tired of copying the same middleware code across projects. Tired of forgetting to protect routes. Tired of debugging auth issues.

So I built what I wanted: protection that's explicit, visible, and requires zero boilerplate.

Try It

npm install @chemmangat/msal-next

npm: @chemmangat/msal-next
GitHub: chemmangat/msal-next
Docs: Full documentation in the README

2,200+ developers are already using it. Join them.

TL;DR: Protect Next.js routes with Microsoft auth using one line: export const auth = { required: true }. No middleware, no boilerplate, just works.

Add Microsoft Authentication to Next.js in 5 Minutes

Hari Manoj — Fri, 27 Feb 2026 09:26:49 +0000

Add Microsoft Authentication to Next.js in 5 Minutes

No fluff. No theory. Just working code.

By the end of this tutorial, you'll have a Next.js app with Microsoft authentication that actually works.

What You'll Build

A Next.js app where users can:

✅ Sign in with their Microsoft account
✅ See their profile information
✅ Sign out

Prerequisites

Node.js 18+ installed
A Microsoft account (personal or work)
5 minutes

Step 1: Create Next.js App (30 seconds)

npx create-next-app@latest my-auth-app
cd my-auth-app

Choose these options:

TypeScript: Yes
ESLint: Yes
Tailwind CSS: Yes
App Router: Yes
Everything else: Default

Step 2: Install Auth Package (15 seconds)

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

Step 3: Get Azure Credentials (2 minutes)

Go to Azure Portal
Search for "Azure Active Directory"
Click "App registrations" → "New registration"
Fill in:
- Name: my-auth-app
- Supported account types: "Accounts in any organizational directory and personal Microsoft accounts"
- Redirect URI: http://localhost:3000
Click "Register"
Copy the "Application (client) ID"

Step 4: Add Environment Variable (10 seconds)

Create .env.local:

NEXT_PUBLIC_CLIENT_ID=paste-your-client-id-here

Step 5: Add Auth Provider (30 seconds)

Edit app/layout.tsx:

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { MsalAuthProvider } from '@chemmangat/msal-next';

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "My Auth App",
  description: "Microsoft authentication demo",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <MsalAuthProvider clientId={process.env.NEXT_PUBLIC_CLIENT_ID!}>
          {children}
        </MsalAuthProvider>
      </body>
    </html>
  );
}

Step 6: Create Login Page (2 minutes)

Replace app/page.tsx:

'use client';

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

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

  if (!isAuthenticated) {
    return (
      <main className="flex min-h-screen flex-col items-center justify-center p-24">
        <div className="text-center">
          <h1 className="text-4xl font-bold mb-8">Welcome!</h1>
          <p className="text-xl mb-8">Sign in to continue</p>
          <MicrosoftSignInButton variant="dark" size="large" />
        </div>
      </main>
    );
  }

  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-24">
      <div className="text-center">
        <h1 className="text-4xl font-bold mb-4">Hello, {account?.name}!</h1>
        <p className="text-xl mb-2">Email: {account?.username}</p>
        <p className="text-gray-600 mb-8">ID: {account?.homeAccountId}</p>
        <SignOutButton variant="light" size="medium" />
      </div>
    </main>
  );
}

Step 7: Run It! (5 seconds)

npm run dev

Open http://localhost:3000

Click "Sign in with Microsoft" and you're done! 🎉

What Just Happened?

MsalAuthProvider initialized MSAL with your client ID
MicrosoftSignInButton handled the entire login flow
useMsalAuth gave you access to user data
SignOutButton handled logout

That's it. Production-ready Microsoft authentication in 5 minutes.

Bonus: Add User Profile (2 more minutes)

Want to show more user info? Add this:

'use client';

import {
  MicrosoftSignInButton,
  useMsalAuth,
  SignOutButton,
  useUserProfile,
  UserAvatar,
} from '@chemmangat/msal-next';

export default function Home() {
  const { isAuthenticated } = useMsalAuth();
  const { profile, loading } = useUserProfile();

  if (!isAuthenticated) {
    return (
      <main className="flex min-h-screen flex-col items-center justify-center p-24">
        <div className="text-center">
          <h1 className="text-4xl font-bold mb-8">Welcome!</h1>
          <MicrosoftSignInButton variant="dark" size="large" />
        </div>
      </main>
    );
  }

  if (loading) {
    return (
      <main className="flex min-h-screen flex-col items-center justify-center">
        <div>Loading profile...</div>
      </main>
    );
  }

  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-24">
      <div className="text-center">
        <UserAvatar size={100} className="mb-4" />
        <h1 className="text-4xl font-bold mb-4">{profile?.displayName}</h1>
        <div className="text-left mb-8 space-y-2">
          <p>📧 Email: {profile?.mail}</p>
          <p>💼 Job Title: {profile?.jobTitle || 'N/A'}</p>
          <p>🏢 Office: {profile?.officeLocation || 'N/A'}</p>
          <p>📱 Phone: {profile?.mobilePhone || 'N/A'}</p>
        </div>
        <SignOutButton variant="light" size="medium" />
      </div>
    </main>
  );
}

Now you get:

✅ User's profile photo
✅ Job title
✅ Office location
✅ Phone number
✅ All from Microsoft Graph API

Bonus: Protect a Page (1 minute)

Create app/dashboard/page.tsx:

'use client';

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

export default function DashboardPage() {
  return (
    <AuthGuard>
      <main className="p-24">
        <h1 className="text-4xl font-bold">Protected Dashboard</h1>
        <p className="mt-4">Only authenticated users can see this!</p>
      </main>
    </AuthGuard>
  );
}

Try visiting /dashboard without logging in - you'll be redirected to login automatically.

Bonus: Add Role-Based Access (2 minutes)

First, add roles in Azure AD (see enterprise guide for details).

Then use them:

'use client';

import { useRoles, AuthGuard } from '@chemmangat/msal-next';

export default function AdminPage() {
  const { hasRole } = useRoles();

  return (
    <AuthGuard>
      <main className="p-24">
        {hasRole('Admin') ? (
          <div>
            <h1 className="text-4xl font-bold">Admin Panel</h1>
            <p>Welcome, administrator!</p>
          </div>
        ) : (
          <div>
            <h1 className="text-4xl font-bold">Access Denied</h1>
            <p>You need admin role to access this page.</p>
          </div>
        )}
      </main>
    </AuthGuard>
  );
}

Common Issues

"Invalid client" error

Double-check your client ID in .env.local
Make sure you added http://localhost:3000 as a redirect URI in Azure

"AADSTS50011" error

Add http://localhost:3000 to redirect URIs in Azure Portal
Make sure there's no trailing slash

Hydration errors

Make sure you're using 'use client' directive
The provider is in the root layout

"No active account" error

User needs to log in first
Check isAuthenticated before calling acquireToken

What's Next?

You now have working Microsoft authentication! Here's what to explore:

MS Graph API - Access user's emails, calendar, files
Middleware - Protect routes at the edge
Server Components - Check auth server-side
Role-Based Access - Implement RBAC with Azure AD roles

Full Code

Here's the complete app/page.tsx:

'use client';

import {
  MicrosoftSignInButton,
  useMsalAuth,
  SignOutButton,
  useUserProfile,
  UserAvatar,
} from '@chemmangat/msal-next';

export default function Home() {
  const { isAuthenticated } = useMsalAuth();
  const { profile, loading } = useUserProfile();

  // Not logged in
  if (!isAuthenticated) {
    return (
      <main className="flex min-h-screen flex-col items-center justify-center p-24 bg-gradient-to-b from-blue-50 to-white">
        <div className="text-center max-w-md">
          <h1 className="text-5xl font-bold mb-4 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
            Welcome!
          </h1>
          <p className="text-xl text-gray-600 mb-8">
            Sign in with your Microsoft account to continue
          </p>
          <MicrosoftSignInButton variant="dark" size="large" />
          <p className="text-sm text-gray-500 mt-8">
            Secure authentication powered by Microsoft Azure AD
          </p>
        </div>
      </main>
    );
  }

  // Loading profile
  if (loading) {
    return (
      <main className="flex min-h-screen flex-col items-center justify-center">
        <div className="animate-pulse">Loading your profile...</div>
      </main>
    );
  }

  // Logged in
  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-24 bg-gradient-to-b from-blue-50 to-white">
      <div className="bg-white rounded-2xl shadow-xl p-8 max-w-md w-full">
        <div className="text-center mb-6">
          <UserAvatar size={120} className="mx-auto mb-4" />
          <h1 className="text-3xl font-bold text-gray-800">
            {profile?.displayName}
          </h1>
        </div>

        <div className="space-y-3 mb-8">
          <div className="flex items-center gap-3 text-gray-700">
            <span className="text-2xl">📧</span>
            <div>
              <p className="text-sm text-gray-500">Email</p>
              <p className="font-medium">{profile?.mail}</p>
            </div>
          </div>

          {profile?.jobTitle && (
            <div className="flex items-center gap-3 text-gray-700">
              <span className="text-2xl">💼</span>
              <div>
                <p className="text-sm text-gray-500">Job Title</p>
                <p className="font-medium">{profile.jobTitle}</p>
              </div>
            </div>
          )}

          {profile?.officeLocation && (
            <div className="flex items-center gap-3 text-gray-700">
              <span className="text-2xl">🏢</span>
              <div>
                <p className="text-sm text-gray-500">Office</p>
                <p className="font-medium">{profile.officeLocation}</p>
              </div>
            </div>
          )}

          {profile?.mobilePhone && (
            <div className="flex items-center gap-3 text-gray-700">
              <span className="text-2xl">📱</span>
              <div>
                <p className="text-sm text-gray-500">Phone</p>
                <p className="font-medium">{profile.mobilePhone}</p>
              </div>
            </div>
          )}
        </div>

        <div className="text-center">
          <SignOutButton variant="light" size="medium" />
        </div>
      </div>
    </main>
  );
}

Resources

That's it! You just added Microsoft authentication to Next.js in 5 minutes.

Questions? Drop them in the comments! 👇

Found this helpful? Give it a ⭐ on GitHub!

Microsoft Auth in Next.js is a Nightmare — Here's How I Fixed It

Hari Manoj — Fri, 27 Feb 2026 09:24:59 +0000

If you've ever tried implementing Microsoft authentication (Azure AD/Entra ID) in a Next.js application, you know the pain. MSAL.js is powerful but complex, and the official examples don't quite fit the Next.js App Router paradigm.

After building authentication for multiple enterprise applications, I created @chemmangat/msal-next — a production-ready library that makes Microsoft auth as simple as it should be.

The Problem with MSAL in Next.js

Let's be honest — integrating MSAL.js with Next.js App Router is frustrating:

❌ SSR/hydration issues everywhere
❌ Boilerplate code in every component
❌ Token refresh logic scattered across your app
❌ No clear pattern for protecting routes
❌ MS Graph API calls require manual token handling
❌ Role-based access control is a nightmare

The Solution: 3 Lines of Code

Here's what authentication should look like in Next.js:

// 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!}>
          {children}
        </MsalAuthProvider>
      </body>
    </html>
  );
}

That's it. Your entire app now has Microsoft authentication.

Quick Start

1. Install the package

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

2. Get your Azure AD credentials

Go to the Azure Portal
Navigate to Azure Active Directory → App registrations
Create a new registration or use an existing one
Copy your Application (client) ID
Add http://localhost:3000 to Redirect URIs

3. Add environment variables

NEXT_PUBLIC_CLIENT_ID=your-client-id-here

4. Add the provider

// 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!}>
          {children}
        </MsalAuthProvider>
      </body>
    </html>
  );
}

5. Add authentication to your page

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

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

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

  if (!isAuthenticated) {
    return (
      <div>
        <h1>Welcome!</h1>
        <MicrosoftSignInButton />
      </div>
    );
  }

  return (
    <div>
      <h1>Hello, {account?.name}!</h1>
      <p>Email: {account?.username}</p>
    </div>
  );
}

Run npm run dev and you have working Microsoft authentication! 🎉

Real-World Features

Beautiful Pre-Built Components

No need to design authentication UI from scratch:

import {
  MicrosoftSignInButton,
  SignOutButton,
  UserAvatar,
  AuthStatus,
  AuthGuard,
} from '@chemmangat/msal-next';

function MyApp() {
  return (
    <div>
      {/* Microsoft-branded sign-in button */}
      <MicrosoftSignInButton variant="dark" size="large" />

      {/* User avatar with MS Graph photo */}
      <UserAvatar size={48} showTooltip />

      {/* Current auth status */}
      <AuthStatus showDetails />

      {/* Protect sensitive content */}
      <AuthGuard>
        <AdminPanel />
      </AuthGuard>
    </div>
  );
}

MS Graph API Made Easy

Calling Microsoft Graph API is now trivial:

'use client';

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

function EmailList() {
  const graph = useGraphApi();

  const fetchEmails = async () => {
    // Automatically handles token acquisition and injection
    const response = await graph.get('/me/messages');
    return response.value;
  };

  const sendEmail = async () => {
    await graph.post('/me/sendMail', {
      message: {
        subject: 'Hello from Next.js!',
        body: { content: 'Sent via MS Graph API' },
      },
    });
  };

  return <div>{/* Your UI */}</div>;
}

User Profile with Caching

Get user data with automatic caching:

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

function ProfilePage() {
  const { profile, loading, error } = useUserProfile();

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <h1>{profile.displayName}</h1>
      <p>{profile.mail}</p>
      <p>{profile.jobTitle}</p>
      <p>{profile.officeLocation}</p>
    </div>
  );
}

Role-Based Access Control

Implement RBAC in seconds:

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

function AdminPanel() {
  const { hasRole, hasAnyRole, roles } = useRoles();

  if (!hasRole('Admin')) {
    return <div>Access denied</div>;
  }

  return (
    <div>
      <h1>Admin Panel</h1>
      {hasAnyRole(['Editor', 'Contributor']) && (
        <button>Edit Content</button>
      )}
    </div>
  );
}

Protect Routes with Middleware

Secure your entire app at the edge:

// middleware.ts
import { createAuthMiddleware } from '@chemmangat/msal-next';

export const middleware = createAuthMiddleware({
  protectedRoutes: ['/dashboard', '/profile', '/api/protected'],
  publicOnlyRoutes: ['/login'],
  loginPath: '/login',
});

export const config = {
  matcher: ['/((?!_next/static|_next/image|favicon.ico).*)'],
};

Server-Side Authentication

Check auth status in Server Components:

// app/dashboard/page.tsx
import { getServerSession } from '@chemmangat/msal-next/server';
import { redirect } from 'next/navigation';

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

  if (!session.isAuthenticated) {
    redirect('/login');
  }

  return (
    <div>
      <h1>Welcome {session.username}</h1>
    </div>
  );
}

Production-Ready Features

Automatic Token Refresh with Retry

Built-in exponential backoff for token acquisition:

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

const token = await retryWithBackoff(
  () => acquireToken(['User.Read']),
  {
    maxRetries: 3,
    initialDelay: 1000,
    backoffMultiplier: 2,
  }
);

Comprehensive Error Handling

Catch and handle auth errors gracefully:

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

function App() {
  return (
    <ErrorBoundary
      fallback={(error, reset) => (
        <div>
          <h2>Authentication Error</h2>
          <p>{error.message}</p>
          <button onClick={reset}>Try Again</button>
        </div>
      )}
    >
      <YourApp />
    </ErrorBoundary>
  );
}

Debug Mode

Enable detailed logging for troubleshooting:

<MsalAuthProvider
  clientId="..."
  enableLogging={true}
>
  {children}
</MsalAuthProvider>

TypeScript Support

Full type safety with custom claims:

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

interface MyCustomClaims extends CustomTokenClaims {
  roles: string[];
  department: string;
  employeeId: string;
}

const { account } = useMsalAuth();
const claims = account?.idTokenClaims as MyCustomClaims;

console.log(claims.roles);      // Type-safe!
console.log(claims.department); // Type-safe!

Comparison with Alternatives

Feature	@chemmangat/msal-next	next-auth	clerk
Microsoft Auth	✅ Native	⚠️ Via provider	✅ Yes
Setup Complexity	🟢 Minimal	🟡 Medium	🟢 Minimal
MS Graph API	✅ Built-in	❌ Manual	❌ Manual
Role-Based Access	✅ Built-in	⚠️ Custom	✅ Yes
Edge Middleware	✅ Yes	✅ Yes	✅ Yes
Pricing	🟢 Free	🟢 Free	🔴 Paid
Bundle Size	🟢 Small	🟡 Medium	🟡 Medium

Common Use Cases

Enterprise SaaS Application

// Multi-tenant support out of the box
<MsalAuthProvider
  clientId="..."
  authorityType="common" // Supports any Azure AD tenant
>
  {children}
</MsalAuthProvider>

Internal Business Application

// Single-tenant with specific permissions
<MsalAuthProvider
  clientId="..."
  tenantId="your-tenant-id"
  scopes={['User.Read', 'Mail.Read', 'Calendars.Read']}
>
  {children}
</MsalAuthProvider>

API Route Protection

// app/api/data/route.ts
import { getServerSession } from '@chemmangat/msal-next/server';

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

  if (!session.isAuthenticated) {
    return new Response('Unauthorized', { status: 401 });
  }

  return Response.json({ data: 'protected data' });
}

Migration Guide

From next-auth

// Before (next-auth)
import { useSession, signIn, signOut } from 'next-auth/react';

const { data: session } = useSession();
if (session) {
  // authenticated
}

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

const { isAuthenticated, account, loginPopup, logoutPopup } = useMsalAuth();
if (isAuthenticated) {
  // authenticated
}

From Raw MSAL

// Before (raw MSAL)
const msalInstance = new PublicClientApplication(config);
await msalInstance.initialize();
const accounts = msalInstance.getAllAccounts();
// ... lots of boilerplate

// After (@chemmangat/msal-next)
<MsalAuthProvider clientId="...">
  {children}
</MsalAuthProvider>

Troubleshooting

"No active account" error

Make sure the user is logged in before calling acquireToken:

const { isAuthenticated, acquireToken } = useMsalAuth();

if (isAuthenticated) {
  const token = await acquireToken(['User.Read']);
}

SSR hydration mismatch

Always use the 'use client' directive for components using auth hooks:

'use client';

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

Token acquisition fails

Check that required scopes are granted in Azure AD:

Go to Azure Portal → App registrations
Select your app → API permissions
Add required permissions (e.g., User.Read, Mail.Read)
Grant admin consent if needed

Performance Tips

Use session storage (default) for better performance
Enable caching for user profiles and roles (on by default)
Use middleware for route protection instead of client-side checks
Lazy load auth components with dynamic imports

import dynamic from 'next/dynamic';

const AuthGuard = dynamic(
  () => import('@chemmangat/msal-next').then((mod) => mod.AuthGuard),
  { ssr: false }
);

What's Next?

The library is actively maintained with these features already available or in progress:

✅ B2C support
✅ Certificate-based authentication
✅ Advanced caching strategies
✅ React Server Components integration
✅ CLI scaffolding tool

Conclusion

Microsoft authentication in Next.js doesn't have to be complicated. With @chemmangat/msal-next, you get:

✅ Production-ready authentication in 3 lines of code
✅ Beautiful pre-built components
✅ MS Graph API integration
✅ Role-based access control
✅ Full TypeScript support
✅ Zero configuration required

Give it a try:

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

Resources

Found this helpful? Give it a ⭐ on GitHub and drop any questions in the comments below! 👇

DEV Community: Hari Manoj

Microsoft Auth in Next.js Finally Makes Sense

The Problem

The Solution: @chemmangat/msal-next

1. Zero-Config Setup

2. Clean Integration

3. Real Server Component Support

Key Features

Why Use It

Get Started

I added Microsoft Auth to my Next.js app in 5 minutes. Here's how.

The problem with MSAL in Next.js

What v5.3.0 ships

The whole auth setup, start to finish

Already using it? Upgrading to MSAL v5?

It also does...

Microsoft Login for Next.js That Actually Works (Finally)

Independent AI Audit

Setup

What's Included

Installation

useMemo vs useCallback - Simply Explained

The one-line distinction

Why do they exist?

When to actually use them

Preparing for Javascript interviews? Don't miss out this free resource.

Track any npm package's downloads, trends, and health score for free

I Made Something for npm Package Analytics

What It Does

Why I Built It

How It Works

Try It Out

javascript #webdev #opensource #nextjs #typescript #npm #react #analytics #devtools #frontend #coding #programming #developer #tech #buildinpublic

I Protected My Next.js Routes with MSAL in One Line of Code (No Middleware Required)

The Problem

The Solution

How It Works

Real-World Examples

Why This Matters

The Full Feature Set

Quick Start

Under the Hood

Migration from v3.x

Why I Built This

Try It

Add Microsoft Authentication to Next.js in 5 Minutes

Add Microsoft Authentication to Next.js in 5 Minutes

What You'll Build

Prerequisites

Step 1: Create Next.js App (30 seconds)

Step 2: Install Auth Package (15 seconds)

Step 3: Get Azure Credentials (2 minutes)

Step 4: Add Environment Variable (10 seconds)

Step 5: Add Auth Provider (30 seconds)

Step 6: Create Login Page (2 minutes)

Step 7: Run It! (5 seconds)

What Just Happened?

Bonus: Add User Profile (2 more minutes)

Bonus: Protect a Page (1 minute)

Bonus: Add Role-Based Access (2 minutes)

Common Issues

"Invalid client" error

"AADSTS50011" error

Hydration errors

"No active account" error

What's Next?

Full Code

Resources

Microsoft Auth in Next.js is a Nightmare — Here's How I Fixed It

The Problem with MSAL in Next.js

The Solution: 3 Lines of Code

Quick Start

1. Install the package

2. Get your Azure AD credentials

3. Add environment variables

4. Add the provider

5. Add authentication to your page

Real-World Features

Beautiful Pre-Built Components

MS Graph API Made Easy

The Solution: `@chemmangat/msal-next`