Guide auth OIDC Angular & React

On pensait les SPAs coincées dans le purgatoire de l’auth : roulette russe du localStorage, béquilles aux cookies de session, chorégraphies infinies anti-CSRF. Mais intégrer l’authentification OpenID Connect (OIDC) en Angular et React ? Voilà le twist qui change tout. Ça renverse la vapeur : sécurisé, standard, sans secrets baladés dans le navigateur. D’un coup, votre app ne se contente plus de logger les users ; elle est prête pour le web décentralisé et grouillant d’IA.

OIDC, c’est pas du charabia marketing. C’est OAuth 2.0 boosté à l’identité, la tech derrière chaque bouton « Se connecter avec Google » que vous avez matraqué. Pour les single-page apps ? Le flux Authorization Code + PKCE domine tout. Pas de secrets client qui flottent au vent du navigateur. Fini les cauchemars d’interception. Juste de la magie pure, agnostique aux providers comme Okta, Auth0 ou Keycloak.

Pourquoi OIDC + PKCE, c’est l’alunissage de l’auth web

L’auth SPA traditionnelle ? Du scotch sur une porte moustiquaire : ça a l’air solide jusqu’au premier coup de vent. PKCE ? Une porte de coffre avec générateur de code à usage unique. Le clou du spectacle, direct des experts :

Pour les SPAs, le flux Authorization Code avec PKCE est l’option la plus sécurisée et recommandée car : - Pas de secrets client exposés dans le navigateur - Protection contre l’interception des codes d’autorisation - Compatible avec les providers d’identité modernes (Okta, Auth0, Azure AD, Keycloak, Google)

Paf. Aligné sur OAuth 2.1, il esquive tous les pièges. Tokens en mémoire (adieu localStorage et son appât XSS), docs d’auto-découverte, scopes comme openid profile email. Votre app prend juste ce qu’il faut, rien de plus.

Ma prédiction perso – l’angle que personne ne creuse dans les tutos : ça rappelle le passage HTTP à HTTPS dans les années 90. À l’époque, on haussait les épaules devant les logins en clair ; aujourd’hui, OIDC est le HTTPS de l’identité. Pari osé ? Dans cinq ans, avec les agents IA qui sautillent d’une SPA à l’autre comme des nomades digitaux, les passeports OIDC seront obligatoires. Votre dashboard React qui discute avec un analyste IA ? Impossible sans ça.

D’abord, les prérequis. Lancez votre IdP – Okta ou autre. Créez un client SPA : récupérez l’URL issuer, client ID, redirect URIs (localhost:4200/auth/callback pour Angular, :3000 pour React). Marquez-le public, activé PKCE, sans secret. Scopes ? openid profile email, plus API si vous voulez frimer.

Angular : des logins sécurisés à vitesse grand V

Développeurs Angular, pavoisons. angular-oauth2-oidc est votre acolyte de combat – mature, sans fioritures, prêt pour la prod.

Npm : npm i angular-oauth2-oidc. Puis auth.config.ts :

import { AuthConfig } from 'angular-oauth2-oidc';

export const authConfig: AuthConfig = {
  issuer: 'https://YOUR_ISSUER',
  clientId: 'YOUR_CLIENT_ID',
  redirectUri: window.location.origin + '/auth/callback',
  postLogoutRedirectUri: window.location.origin + '/',
  responseType: 'code',
  scope: 'openid profile email',
  strictDiscoveryDocumentValidation: false,
  showDebugInformation: true,
  requireHttps: false,
};

Au tour du service – auth.service.ts. Injectez OAuthService, configurez, silent refresh, chargez discovery, tentez login. Login lance le code flow ; logout vous renvoie à la maison. isLoggedIn ? hasValidAccessToken(). Claims du token ? Directement là.

async init(): Promise<void> {
  this.oauthService.configure(authConfig);
  this.oauthService.setupAutomaticSilentRefresh();
  await this.oauthService.loadDiscoveryDocumentAndTryLogin();
}

App.module.ts ? Un factory APP_INITIALIZER appelle init(). OAuthModule.forRoot avec resourceServer pour passer les tokens API. Routes avec /auth/callback – composant spinner vide. Guards ? CanActivate vérifie login, redirige si non.

``` canActivate(): boolean { if (!this.auth.isLoggedIn) { this.auth.login();