A full-stack authentication pattern for Microsoft Entra ID using MSAL.js in React and JWT validation via the jose library in Cloudflare Workers.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install azure-auth
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install azure-auth using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Azure Auth: Microsoft Entra ID for React & Cloudflare Workers?
This skill provides a production-ready implementation of Microsoft Entra ID (formerly Azure AD) authentication tailored for modern web architectures. It utilizes the Authorization Code Flow with PKCE to secure React single-page applications and provides a lightweight, V8-compatible backend validation strategy for Cloudflare Workers using the jose library. By leveraging Openclaw Skills, developers can bypass the limitations of MSAL in edge environments and implement robust SSO with built-in fixes for common redirect and token expiration issues.
The solution is specifically designed to handle the complexities of the Microsoft identity platform, including silent sign-in loops, token expiration in SPAs, and the specific JWKS endpoint requirements of Azure AD. It ensures that your frontend and backend stay synchronized while maintaining high security standards across the entire stack.
Azure Auth: Microsoft Entra ID for React & Cloudflare Workers Use Cases
- Implementing Microsoft SSO in React-based enterprise applications.
- Securing Cloudflare Workers APIs with Microsoft Entra ID JWT validation.
- Resolving AADSTS50058 silent sign-in loops and AADSTS700084 refresh token errors.
- Migrating from legacy ADAL or Azure AD B2C to Microsoft Entra External ID.
- Managing authentication state in Safari and Edge browsers with strict cookie policies.
How Azure Auth: Microsoft Entra ID for React & Cloudflare Workers Works
- The React SPA initiates login via MSAL.js using the Authorization Code Flow with PKCE.
- Microsoft Entra ID authenticates the user and returns access and ID tokens to the frontend.
- The SPA includes the access token as a Bearer token in the Authorization header of API requests.
- The Cloudflare Worker intercepts the request and fetches the current JWKS from Microsoft's openid-configuration endpoint.
- The jose library validates the token signature, issuer, and audience against the cached JWKS within the Worker's V8 isolate environment.
Azure Auth: Microsoft Entra ID for React & Cloudflare Workers Setup
Install the necessary dependencies for both your frontend and backend environments as supported by Openclaw Skills:
# Frontend installation
npm install @azure/msal-react @azure/msal-browser
# Backend installation
npm install jose
Configure your environment variables with your Application (client) ID and Directory (tenant) ID obtained from the Microsoft Entra ID App registration. Ensure your Redirect URIs are correctly set to the SPA type and that Access/ID tokens are enabled in the Azure Portal.
Azure Auth: Microsoft Entra ID for React & Cloudflare Workers Data Schema & Taxonomy
The skill processes JWT payloads and organizes authentication metadata according to the following schema:
| Field | Description |
|---|---|
| aud | Audience (Client ID or API URI) |
| iss | Token Issuer (Entra ID V2.0 endpoint) |
| sub | Subject (User unique identifier) |
| oid | Object ID (Azure AD user object ID) |
| scp | Scopes (Space-separated permissions) |
| tid | Tenant ID (Directory identifier for multi-tenant apps) |
Azure Auth: Microsoft Entra ID for React & Cloudflare Workers Advanced Features
- Cross-browser compatibility fixes for Safari and Edge cookie policies via storeAuthStateInCookie.
- Multi-tenant support with dynamic issuer validation logic for organization-wide apps.
- Custom NavigationClient implementation for seamless React Router v6 integration.
- Optimized JWKS caching mechanism to reduce latency in Cloudflare Worker environments.
- Pre-configured handlers for the MSAL v4 to v5 migration and Entra External ID transition.
SKILL.md
Loading
Related Openclaw Skills
AutoAnimate
A lightweight, zero-config animation utility that provides drop-in transitions for modern web frameworks while preventing 15 common implementation errors.
Architecture Designer
A principal-level AI architect skill for designing scalable systems, documenting ADRs, and evaluating technical trade-offs.
API Designer
A specialized architectural skill for designing professional-grade REST and GraphQL APIs with comprehensive OpenAPI 3.1 documentation.
Angular Architect
A senior-level AI skill for building scalable Angular 17+ applications using standalone components and signals.
Backtest Expert
A systematic framework for stress-testing and validating quantitative trading strategies to ensure real-world robustness.
Better Auth: Self-Hosted Authentication for Cloudflare Workers
A comprehensive self-hosted authentication framework for TypeScript and Cloudflare Workers with native support for 15+ enterprise-grade plugins.
Featured*
