Communitygithub.com

Fournisseurs OAuth

Flux OAuth Google/GitHub/Discord, PKCE, rafraîchissement des tokens et gestion de session.

Qu'est-ce que Fournisseurs OAuth ?

Cette compétence fournit une implémentation complète et sécurisée des flux OAuth 2.0 pour les fournisseurs Google, GitHub et Discord. Elle couvre le flux Authorization Code avec PKCE pour les clients publics (SPA, mobile) et l'échange côté serveur pour les applications web, garantissant que le secret client ne quitte jamais le serveur. La compétence inclut la génération et la vérification du paramètre `state` pour prévenir les attaques CSRF, la gestion du rafraîchissement des tokens via `refresh_token`, et la création de sessions applicatives serveur après un callback OAuth réussi. Elle permet également de lier plusieurs fournisseurs OAuth à un seul compte utilisateur via une table `accounts`. Des extraits de code sont fournis pour le callback OAuth, l'échange de code et la récupération des informations utilisateur, avec des recommandations sur ce qu'il faut éviter (stocker les secrets côté client, sauter le paramètre `state`, stocker les tokens bruts dans les cookies).

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/YepAPI/skills/tree/HEAD/skills/oauth-providers

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

Que fait Fournisseurs OAuth ?

Règles

  • Utiliser le flux Authorization Code avec PKCE pour les clients publics (SPA, mobiles) — jamais le flux implicite
  • Échange côté serveur pour les applications web — le secret client ne quitte jamais le serveur
  • Paramètre state : générer un state aléatoire, le stocker dans la session/cookie, vérifier lors du callback — empêche les attaques CSRF
  • OAuth Google : scopes openid email profile, utiliser id_token pour les informations utilisateur
  • OAuth GitHub : scope read:user user:email, échanger le code à https://github.com/login/oauth/access_token
  • OAuth Discord : scope identify email, point de terminaison de token à https://discord.com/api/oauth2/token
  • Rafraîchissement du token : stocker refresh_token côté serveur, rafraîchir avant l'expiration de access_token
  • Gestion de session : créer une session applicative lors d'un callback OAuth réussi, ne pas stocker les tokens OAuth dans les cookies
  • Lier les comptes : permettre aux utilisateurs de connecter plusieurs fournisseurs à un seul compte via la table accounts

Modèles

// Gestionnaire de callback OAuth
export async function GET(req: Request) {
  const { searchParams } = new URL(req.url);
  const code = searchParams.get("code");
  const state = searchParams.get("state");

  // Vérifier que state correspond à la valeur stockée
  if (state !== cookies().get("oauth_state")?.value) {
    return new Response("État invalide", { status: 400 });
  }

  // Échanger le code contre des tokens
  const tokens = await exchangeCodeForTokens(code);
  const userInfo = await fetchUserInfo(tokens.access_token);

  // Créer ou lier le compte, créer la session
  const user = await upsertUser(userInfo);
  await createSession(user.id);

  return redirect("/dashboard");
}

À éviter

  • Stocker les secrets client dans le code frontend — toujours échanger les tokens côté serveur
  • Sauter le paramètre state — les attaques CSRF sont réelles
  • Stocker les tokens OAuth bruts dans les cookies — utiliser des sessions côté serveur
  • Oublier de gérer le cas « l'utilisateur existe déjà avec cet email » lors de la liaison des fournisseurs

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

YepAPI/skills

WCAG 2.1 AA — semantic HTML, keyboard navigation, screen readers.

YepAPI/skills

Experiment setup, variant splitting, statistical significance, and feature flag integration.

YepAPI/skills

CRUD generators, data tables, user management, role-based access, and bulk operations.

YepAPI/skills

Monitor what ChatGPT and Gemini say about your brand using YepAPI.

YepAPI/skills

Queue workers with BullMQ/Inngest/Trigger.dev, job retries, dead letter queues, concurrency.

YepAPI/skills

Commander.js, interactive prompts with Clack, spinners, colors, config files, exit codes, and npm publishing.

YepAPI/skills

cmdk integration, Cmd+K trigger, fuzzy search, grouped actions, keyboard navigation, and dynamic action registration.

YepAPI/skills

Content planning with trend and sentiment data from YepAPI.

YepAPI/skills

Content calendar, keyword-driven planning, and content briefs.

YepAPI/skills

Theme switching with CSS variables, system preference detection, next-themes, and persistence.

YepAPI/skills

Threaded comments, @mentions, reactions, moderation queue, optimistic UI, and cursor pagination.

YepAPI/skills

Competitive analysis between domains using YepAPI.

YepAPI/skills

Layout grids, KPI cards, data tables with sorting/filtering, sidebar navigation, and responsive breakpoints.

YepAPI/skills

Data encryption — TLS everywhere, AES-256-GCM for PII, bcrypt passwords, encrypted backups.

YepAPI/skills

Chart patterns with Recharts/Nivo/D3, responsive containers, color scales, and accessibility.

YepAPI/skills

Drizzle schema definition, push vs migrate, type-safe queries, relations, transactions, and prepared statements.

YepAPI/skills

Upload handling, resize/compress, CDN delivery, blur placeholders, and next/image patterns.

YepAPI/skills

Local business and Google Maps research using YepAPI.

YepAPI/skills

Cursor-based pagination, IntersectionObserver, virtualized lists with @tanstack/react-virtual, and scroll position restoration.

YepAPI/skills

Chat UI components, streaming responses with AI SDK, context window management, and RAG patterns.

Skills associés