azure-auth

Microsoft Entra ID (Azure AD) authentication for React SPAs with MSAL.js and Cloudflare Workers JWT validation using jose library. Full-stack pattern with Authorization Code Flow + PKCE. Prevents 8 documented errors.\n\nUse when: implementing Microsoft SSO, troubleshooting AADSTS50058 loops, AADSTS700084 refresh token errors, React Router redirects, setActiveAccount re-render issues, or validating Entra ID tokens in Workers.

1. Zainstaluj zależności: npm install @azure/msal-react @azure/msal-browser na froncie (React SPA) i npm install jose na backendzie (Cloudflare Workers).

2. Przejdź do Microsoft Entra ID w Azure Portal, wybierz App registrations i utwórz nową rejestrację aplikacji. Skonfiguruj Redirect URI na adres Twojej aplikacji React (np. http://localhost:3000).

3. Skonfiguruj MSAL.js w React: zainicjuj PublicClientApplication z clientId i authority (login.microsoft.com), następnie otocz aplikację komponentem MsalProvider. Dodaj MsalAuthenticationTemplate do chronienia tras wymagających logowania.

4. Implementuj Authorization Code Flow z PKCE: użyj useMsalAuthentication hook do obsługi logowania, MSAL automatycznie zarządza tokenami dostępu i odświeżania. Pobierz token z getAccessTokenSilently() i wyślij go w nagłówku Authorization do backendu.

5. Na backendzie (Cloudflare Workers) waliduj JWT token: użyj biblioteki jose do weryfikacji podpisu tokenu i wyodrębnienia danych użytkownika. Sprawdź, czy token pochodzi z Microsoft Entra ID i czy nie wygasł.

6. Obsługuj typowe błędy: jeśli napotkasz pętle AADSTS50058 (wymóg interaktywnego logowania), użyj acquireTokenInteractive(), dla błędów AADSTS700084 (refresh token wygasł) wymuś ponowne logowanie. Upewnij się, że setActiveAccount jest wywoływany po zalogowaniu, aby uniknąć problemów z re-renderowaniem.