Créer un environnement de travail OAuth avec Next.js

​

Projet d’exemple

• GitHub: examples/oauth-client-nextjs
• Chemin local du dépôt : examples/oauth-client-nextjs

​

Fonctionnalités de l’application

• une connexion OAuth 2.1 + PKCE
• le stockage et le renouvellement des jetons associés à la session
• un proxy unifié pour les routes de contrôle et de génération
• la découverte des modèles
• un flux de chat via /responses
• un testeur générique pour les autres routes du gateway

​

Quand commencer avec cet exemple

• les utilisateurs finaux doivent se connecter avec un accès délégué
• il vous faut plus qu’une simple page de chat
• vous voulez une route serveur sécurisée pour plusieurs endpoints Phaseo

• vous avez uniquement besoin d’une interface de chat simple avec clé API
• vous voulez d’abord un script ou une CLI

​

Fichiers principaux

• app/page.tsx
• app/dashboard/page.tsx
• app/dashboard/GatewayWorkbench.tsx
• app/api/gateway/[...surface]/route.ts
• lib/oauth.ts
• lib/session.ts

​

Pourquoi l’exemple est structuré ainsi

​

1. OAuth reste séparé de la logique du gateway

• la logique de démarrage de l’authentification et du callback
• la gestion chiffrée des sessions
• le renouvellement des jetons

​

2. Une seule route proxy gère les appels au gateway

• vérifie la liste d’autorisation des endpoints
• ajoute le jeton bearer actuel
• renouvelle les jetons si nécessaire
• transmet les corps des requêtes et réponses

​

3. Le tableau de bord sert aussi d’environnement de travail interne

• elle découvre les modèles
• elle teste /responses
• elle peut aussi tester des endpoints autres que ceux de chat

​

Prérequis

• • Node.js et un gestionnaire de paquets compatible
• • un client OAuth configuré avec l’URL de callback locale
• • un secret de session robuste

​

Exécuter l’exemple

cd examples/oauth-client-nextjs
npm install
cp .env.example .env.local

cd examples/oauth-client-nextjs
pnpm install
cp .env.example .env.local

cd examples/oauth-client-nextjs
yarn install
cp .env.example .env.local

cd examples/oauth-client-nextjs
bun install
cp .env.example .env.local

• NEXT_PUBLIC_OAUTH_CLIENT_ID
• OAUTH_CLIENT_SECRET
• NEXT_PUBLIC_PHASEO_URL
• NEXT_PUBLIC_REDIRECT_URI
• SESSION_SECRET
• NEXT_PUBLIC_GATEWAY_URL

npm run dev

pnpm dev

yarn dev

bun run dev

​

Vérifier le résultat

• La connexion revient à l’URL de callback configurée et crée une session.
• Le tableau de bord peut découvrir des modèles via le proxy.
• Une requête à l’API Responses aboutit sans exposer de jeton d’accès au navigateur.
• Un endpoint absent de la liste d’autorisation du proxy est rejeté.

​

Personnaliser l’exemple

• • limitez la liste d’autorisation du proxy aux endpoints réellement nécessaires à votre produit
• • conservez l’environnement de travail en interne pendant que vous créez une interface plus claire pour les utilisateurs
• • remplacez le testeur générique par des parcours dédiés une fois l’intégration stabilisée

​

Guides associés

• Créer une application de chat web avec Next.js
• Consignes pour démarrer une mini-application
• Exemples