Flux OAuth côté frontend
Implémentez le flux Authorization Code avec PKCE dans une SPA, échangez le code contre des jetons, stockez les jetons d’accès en toute sécurité et évitez le flux implicite.
Flux OAuth côté frontend est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce qu'OAuth ?
OAuth 2.0 est un protocole de délégation : votre application obtient l'autorisation d'agir au nom de l'utilisateur auprès d'un service tiers (Google, GitHub, etc.) sans jamais voir son mot de passe. Il est utilisé pour « Se connecter avec Google », les applications OAuth GitHub et la plupart des systèmes modernes d'authentification.
Rôles principaux
Propriétaire de la ressource : l'utilisateur. Client : votre application. Serveur d'autorisation : le fournisseur OAuth (Google, Auth0). Serveur de ressources : l'API protégée par le token d'accès.
Flux du code d'autorisation
Le flux standard et sécurisé pour les applications côté serveur : 1) Redirigez l'utilisateur vers la page de connexion du fournisseur. 2) L'utilisateur se connecte et donne son consentement. 3) Le fournisseur redirige l'utilisateur avec un code. 4) Le serveur échange le code contre un token d'accès (secret réservé au serveur).
Pourquoi utiliser PKCE pour les SPA
Les SPA ne peuvent pas conserver de secret client (il se trouverait dans le paquet du navigateur). PKCE (Proof Key for Code Exchange) remplace le secret par un code verifier/challenge propre à chaque requête. C'est désormais la norme pour tous les clients OAuth publics.
Le flux PKCE étape par étape
1) Générez un code_verifier aléatoire. 2) Hachez-le avec SHA-256 : vous obtenez code_challenge. 3) Redirigez l'utilisateur vers /authorize avec le challenge. 4) Après le consentement, récupérez un code. 5) Échangez le code et le verifier contre un token d'accès. Le fournisseur vérifie que challenge = hash(verifier).
Générer le verifier et le challenge
Le verifier est une chaîne aléatoire ; le challenge est son résultat SHA-256 encodé en base64-URL.
function base64url(arr) {
return btoa(String.fromCharCode(...arr))
.replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
}
async function generatePKCE() {
const arr = new Uint8Array(32);
crypto.getRandomValues(arr);
const verifier = base64url(arr);
const hash = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(verifier));
const challenge = base64url(new Uint8Array(hash));
return { verifier, challenge };
}Rediriger vers le fournisseur
Construisez l'URL d'autorisation avec le challenge, state (protection contre le CSRF) et les portées.
const { verifier, challenge } = await generatePKCE();
const state = crypto.randomUUID();
sessionStorage.setItem('pkce_verifier', verifier);
sessionStorage.setItem('oauth_state', state);
const url = new URL('https://accounts.google.com/o/oauth2/v2/auth');
url.searchParams.set('client_id', CLIENT_ID);
url.searchParams.set('redirect_uri', `${origin}/auth/callback`);
url.searchParams.set('response_type', 'code');
url.searchParams.set('scope', 'openid email profile');
url.searchParams.set('code_challenge', challenge);
url.searchParams.set('code_challenge_method', 'S256');
url.searchParams.set('state', state);
window.location.href = url.toString();Gérer le callback
Le fournisseur redirige l'utilisateur vers votre URL de callback avec ?code=...&state=.... Vérifiez state pour empêcher le CSRF, puis échangez le code.
// /auth/callback page:
const params = new URLSearchParams(window.location.search);
const code = params.get('code');
const returnedState = params.get('state');
const expected = sessionStorage.getItem('oauth_state');
if (returnedState !== expected) throw new Error('Bad state');
const verifier = sessionStorage.getItem('pkce_verifier');
const tokens = await fetch('https://oauth2.googleapis.com/token', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: new URLSearchParams({
grant_type: 'authorization_code',
code,
client_id: CLIENT_ID,
redirect_uri: `${origin}/auth/callback`,
code_verifier: verifier
})
}).then(r => r.json());
// tokens: { access_token, id_token, refresh_token, expires_in }Stocker les tokens en toute sécurité
Bonne pratique : ne stockez pas les tokens d'accès dans localStorage (ils peuvent être volés par XSS). Options : 1) En mémoire uniquement (effacés lors de l'actualisation — une nouvelle authentification est nécessaire). 2) Dans un cookie HttpOnly (défini par votre backend après le flux PKCE, et donc inaccessible à JS).
Éviter le flux implicite
L'ancien flux implicite renvoie directement le token d'accès dans le fragment de l'URL. Il est déconseillé par le BCP de sécurité OAuth 2.0, car il expose les tokens à l'historique du navigateur et aux référents. Utilisez toujours Code d'autorisation + PKCE.
Tokens d'actualisation
Les tokens d'accès expirent (généralement après une heure). Un token d'actualisation, dont la durée de vie est plus longue, obtient silencieusement de nouveaux tokens d'accès. Pour les SPA, les tokens d'actualisation sont de plus en plus transmis via des cookies HttpOnly — jamais via localStorage.
Tokens ID et tokens d'accès
Token ID (OpenID Connect) : JWT qui prouve l'identité de l'utilisateur. Token d'accès : valeur opaque ou JWT utilisée pour appeler des API. Vérifiez la signature et les attributs du token ID (iss, aud, exp, nonce) avant de lui faire confiance.
Bibliothèques d'authentification
N'écrivez pas votre propre solution. Utilisez : oidc-client-ts pour un OIDC bas niveau, auth0/spa-js pour Auth0, @clerk/clerk-react pour Clerk, NextAuth.js/Auth.js pour Next et Nuxt-auth pour Nuxt. Elles gèrent PKCE, l'actualisation et le stockage.
Vérification rapide
Pourquoi les applications monopages doivent-elles utiliser PKCE (Proof Key for Code Exchange) avec le flux du code d'autorisation plutôt que le flux du code d'autorisation élémentaire ?
Récapitulatif : OAuth côté frontend
Code d'autorisation + PKCE est la norme moderne pour les SPA. Générez un verifier et un challenge S256 pour chaque requête. Redirigez vers /authorize avec le challenge et state. Vérifiez state lors du callback. Échangez le code et le verifier contre des tokens. N'utilisez jamais le flux implicite. Préférez les cookies HttpOnly pour stocker les tokens. Utilisez des bibliothèques (auth0-spa-js, oidc-client-ts, NextAuth) — ne développez pas votre propre solution.
Questions Fréquemment Posées
La leçon « Flux OAuth côté frontend » est-elle gratuite ?
Oui — le texte complet de « Flux OAuth côté frontend » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Flux OAuth côté frontend » ?
Implémentez le flux Authorization Code avec PKCE dans une SPA, échangez le code contre des jetons, stockez les jetons d’accès en toute sécurité et évitez le flux implicite. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Frontend Academy ?
Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Flux OAuth côté frontend » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?
Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Prévention des XSS : encodage de sortie et CSP
- CSRF : cookies SameSite et jetons
- Content Security Policy : nonce et hachage
- Flux OAuth côté frontend