azure-auth

Gotowy wzorzec integracji logowania Microsoft (SSO) w aplikacjach React z backendem na Cloudflare Workers. Używa MSAL.js na froncie i biblioteki jose do walidacji tokenów JWT na serwerze. Implementuje Authorization Code Flow z PKCE i rozwiązuje 8 typowych błędów autentykacji, takich jak pętle AADSTS50058, problemy z odświeżaniem tokenów czy re-renderowanie komponentów. Obsługuje Microsoft Entra ID (Azure AD) z pełnym stackiem bez konieczności ręcznego zarządzania sesją.

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.