Does MSAL.js work directly in Cloudflare Workers?

No, MSAL.js relies on browser or Node.js APIs not available in Workers. This skill uses the 'jose' library for server-side JWT validation to ensure compatibility with the Workers V8 runtime.

How does this skill handle the 24-hour refresh token limit in SPAs?

It implements a robust catch-and-retry pattern for AADSTS700084 errors, automatically detecting expired refresh tokens and triggering an interactive login redirect when silent acquisition fails.

Why is 'jose' used for JWT validation?

'jose' is a lightweight, dependency-free library that works perfectly in Cloudflare Workers' restricted environment, unlike 'jsonwebtoken' which requires Node.js specific modules like 'crypto'.

Is this compatible with React Router v6?

Yes, it includes a custom NavigationClient implementation that allows MSAL to use React Router's internal navigation, preventing the common infinite redirect loop caused by hash fragment stripping.

Azure Entra ID Auth Pattern

Name: Azure Entra ID Auth Pattern
Author: dennislee928

bydennislee928

•

セキュリティとテスト

Implements secure Microsoft Entra ID (Azure AD) authentication for React SPAs and Cloudflare Workers using MSAL.js and JWT validation.

This skill provides a comprehensive full-stack pattern for integrating Microsoft Entra ID into modern web applications. It bridges the gap between frontend React SPAs using MSAL.js and serverless backends like Cloudflare Workers by implementing Authorization Code Flow with PKCE and robust JWT validation via the jose library. It is specifically designed to solve common integration hurdles such as silent sign-in loops (AADSTS50058), 24-hour refresh token expirations (AADSTS700084) in SPAs, and React Router navigation conflicts, ensuring a production-grade authentication flow that adheres to the latest security standards.

主な機能

01Full-stack Authorization Code Flow + PKCE implementation

02Secure JWT validation for Cloudflare Workers using the jose library

03Optimized JWKS caching and OpenID configuration fetching for serverless environments

043 GitHub stars

05Error handling for AADSTS50058 (Silent Sign-In) and AADSTS700084 (Refresh Token) errors

06React Router v6 compatibility with custom NavigationClient

ユースケース

01Building Enterprise SaaS applications requiring Microsoft SSO/Entra ID integration

02Troubleshooting complex MSAL.js redirect loops and state-management issues in React

03Securing Cloudflare Workers APIs with Azure AD bearer tokens

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add dennislee928/smart_zone azure-auth

For use in Claude.ai and ChatGPT

Download Skill