azure-auth

Full-stack Microsoft Entra ID authentication for React SPAs with Cloudflare Workers backend validation.

jezweb/claude-skills|Updated Apr 8, 2026

Works with

Claude CodeCursorClineWindsurfCodexGoose

What it does

Authorization Code Flow + PKCE with MSAL.js 5.0.2 on frontend; jose library for JWT validation in Workers (MSAL.js incompatible with Workers runtime)
Covers 8 documented error scenarios including AADSTS50058 silent sign-in loops, AADSTS700084 refresh token expiry, React Router redirect issues, and Safari/iOS 18 cookie limitations
Single-tenant and multi-tenant configuration pattern

Repository

jezweb/claude-skills

Last updated

Apr 8, 2026

Installation Guide

Select your AI agent

How to use azure-auth on Cursor

AI-first code editor with Composer

Prerequisites

Before installing skills in Cursor, ensure your development environment meets these requirements:

›Cursor installed and configured on your machine
›Node.js 16+ with npm — verify with node --version
›Active project directory where you want to add azure-auth

Run the install command

Execute the skills CLI command in your project's root directory to begin installation:

$npx skills add https://github.com/jezweb/claude-skills --skill azure-auth

Fetches azure-auth from jezweb/claude-skills and configures it for Cursor.

Select Cursor when prompted

The CLI shows a list of agents. Use arrow keys and space to select Cursor:

◆ Which agents do you want to install to?

│

│ ── Universal (.agents/skills) ────────────────

│ · Cline · Codex · Goose · Windsurf

│ ●Cursor(selected)

│ · Cursor · Aider · Continue

Verify installation

Confirm successful installation by checking the skill directory location:

.cursor/skills/azure-auth

Restart Cursor to activate azure-auth. Access via /azure-auth in your agent's command palette.

⚠

Security Notice

We perform automated surface-level scans (Gen AI Scanner, Socket, Snyk) during installation. These checks detect common vulnerabilities but do not guarantee complete security. Always review skill source code and verify the publisher's reputation before production use.

Skills execute code in your environment. Always review source, verify the publisher, and test in isolation before production.

›View source on GitHub ›Skills CLI docs ›About Cursor ›What are agent skills?

Documentation

List & Monetize Your Skill

Submit your Claude Code skill and start earning

Get started →

Use Cases

Task Automation & Efficiency

Automate repetitive workflows and reduce manual effort

Example

Generate reports, summarize documents, draft communications

✓

Save 3-5 hours per week on routine tasks

Knowledge Enhancement

Learn new skills, understand complex topics, get expert guidance

Example

Explain concepts, provide examples, suggest learning resources

✓

Accelerate learning and skill development by 2x

Quality Improvement

Enhance output quality through reviews, suggestions, and refinements

Example

Review drafts, suggest improvements, catch errors

✓

Improve work quality by 30-40% with less effort

Architecture Overview

┌─────────────────────┐ ┌──────────────────────┐ ┌─────────────────────┐ │ React SPA │────▶│ Microsoft Entra ID │────▶│ Cloudflare Worker │ │ @azure/msal-react │ │ (login.microsoft) │ │ jose JWT validation│ └─────────────────────┘ └──────────────────────┘ └─────────────────────┘ │ │ │ Authorization Code + PKCE │ │ (access_token, id_token) │ └──────────────────────────────────────────────────────────┘ Bearer token in Authorization header

Key Constraint: MSAL.js does NOT work in Cloudflare Workers (relies on browser/Node.js APIs). Use jose library for backend token validation.

Quick Start

1. Install Dependencies

# Frontend (React SPA) npm install @azure/msal-react @azure/msal-browser # Backend (Cloudflare Workers) npm install jose

2. Azure Portal Setup

Go to Microsoft Entra ID → App registrations → New registration

Set Redirect URI to http://localhost:5173 (SPA type)

Note the Application (client) ID and Directory (tenant) ID

Under Authentication:

Enable Access tokens and ID tokens
Add production redirect URI

Under API permissions:

Add User.Read (Microsoft Graph)
Grant admin consent if required

Frontend: MSAL React Setup

Configuration (src/auth/msal-config.ts)

import { Configuration, LogLevel } from "@azure/msal-browser"; export const msalConfig: Configuration = { auth: { clientId: import.meta.env.VITE_AZURE_CLIENT_ID, authority: `https://login.microsoftonline.com/${import.meta.env.VITE_AZURE_TENANT_ID}`, redirectUri: window.location.origin, postLogoutRedirectUri: window.location.origin, navigateToLoginRequestUrl: true, }, cache: { cacheLocation: "localStorage", // or "sessionStorage" storeAuthStateInCookie: true, // Required for Safari/Edge issues }, system: { loggerOptions: { logLevel: LogLevel.Warning, loggerCallback: (level, message) => { if (level === LogLevel.Error) console.error(message); }, }, }, }; // Scopes for token requests export const loginRequest = { scopes: ["User.Read", "openid", "profile", "email"], }; // Scopes for API calls (add your API scope here) export const apiRequest = { scopes: [`api://${import.meta.env.VITE_AZURE_CLIENT_ID}/access_as_user`], };

MsalProvider Setup (src/main.tsx)

import React from "react"; import ReactDOM from "react-dom/client"; import { PublicClientApplication, EventType } from "@azure/msal-browser"; import { MsalProvider } from "@azure/msal-react"; import { msalConfig } from "./auth/msal-config"; import App from "./App"; // CRITICAL: Initialize MSAL outside component tree to prevent re-instantiation const msalInstance = new PublicClientApplication(msalConfig); // Handle redirect promise on page load msalInstance.initialize().then(() => { // Set active account after redirect // IMPORTANT: Use getAllAccounts() (returns array), NOT getActiveAccount() (returns single account or null) const accounts = msalInstance.getAllAccounts(); if (accounts.length > 0) { msalInstance.setActiveAccount(accounts[0]); } // Listen for sign-in events msalInstance.addEventCallback((event) => { if (event.eventType === EventType.LOGIN_SUCCESS && event.payload) { const account = (event.payload as { account: any }).account; msalInstance.setActiveAccount(account); } }); ReactDOM.createRoot(document.getElementById("root")!).render( <React.StrictMode> <MsalProvider instance={msalInstance}> <App /> </MsalProvider> </React.StrictMode> ); });

Protected Route Component

import { useMsal, useIsAuthenticated } from "@azure/msal-react"; import { InteractionStatus } from "@azure/msal-browser"; import { loginRequest } from "./msal-config"; export function ProtectedRoute({ children }: { children: React.ReactNode }) { const { instance, inProgress } = useMsal(); const isAuthenticated = useIsAuthenticated(); // Wait for MSAL to finish any in-progress operations if (inProgress !== InteractionStatus.None) { return <div>Loading...</div>; } if (!isAuthenticated) { // Trigger login redirect instance.loginRedirect(loginRequest); return <div>Redirecting to login...</div>; } return <>{children}</>; }

Acquiring Tokens for API Calls

import { useMsal } from "@azure/msal-react"; import

azure-auth

What it does

Category

Repository

Last updated

Installation Guide

How to use azure-auth on Cursor

Prerequisites

Run the install command

Select Cursor when prompted

Verify installation

Security Notice

Documentation

List & Monetize Your Skill

Use Cases

Task Automation & Efficiency

Knowledge Enhancement

Quality Improvement

Install Skill

Azure Auth - Microsoft Entra ID for React + Cloudflare Workers

Architecture Overview

Quick Start

1. Install Dependencies

2. Azure Portal Setup

Frontend: MSAL React Setup

Configuration (src/auth/msal-config.ts)

MsalProvider Setup (src/main.tsx)

Protected Route Component

Acquiring Tokens for API Calls

Implementation Guide

Best Practices

When to Use This

Learning Path

Related Skills

wordpress-elementor

react-native

zustand-state-management

onboarding-ux

dependency-audit

responsive-images

Reviews

Discussion

`Implementation Guide`

`Best Practices`

`When to Use This`

`Learning Path`

`Related Skills`

`Reviews`

`Discussion`