Crea un entorno de trabajo OAuth con Next.js

​

Proyecto de ejemplo

• GitHub: examples/oauth-client-nextjs
• Ruta local del repositorio: examples/oauth-client-nextjs

​

Qué incluye esta aplicación

• inicio de sesión con OAuth 2.1 + PKCE
• almacenamiento y renovación de tokens asociados a la sesión
• un proxy unificado para las rutas de control y generación
• búsqueda de modelos
• un flujo de chat mediante /responses
• un probador genérico para otras rutas del gateway

​

Cuándo empezar con este ejemplo

• los usuarios finales deben iniciar sesión con acceso delegado
• necesitas algo más que una página de chat sencilla
• quieres una ruta segura en el servidor para varios endpoints de Phaseo

• solo necesitas una interfaz de chat sencilla con una clave de API
• primero quieres un script o una CLI

​

Archivos principales

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

​

Por qué el ejemplo está estructurado así

​

1. OAuth se mantiene separado de la lógica del gateway

• la lógica de inicio de autenticación y del callback
• la gestión cifrada de sesiones
• la renovación de tokens

​

2. Una sola ruta de proxy gestiona las llamadas al gateway

• comprueba la lista de endpoints permitidos
• añade el token bearer actual
• renueva los tokens cuando hace falta
• reenvía los cuerpos de solicitud y respuesta

​

3. El panel también funciona como entorno de trabajo interno

• busca modelos
• prueba /responses
• también permite probar endpoints que no son de chat

​

Requisitos previos

• • Node.js y un administrador de paquetes compatible
• • un cliente OAuth configurado con la URL de callback local
• • un secreto de sesión seguro

​

Ejecuta el ejemplo

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

​

Comprueba el resultado

• El inicio de sesión vuelve al callback configurado y crea una sesión.
• El panel puede buscar modelos a través del proxy.
• Una solicitud a la Responses API se completa sin exponer un token de acceso al navegador.
• Se rechaza cualquier endpoint que no esté en la lista de permitidos del proxy.

​

Adapta el ejemplo

• • limita la lista de permitidos del proxy a los endpoints que realmente necesita tu producto
• • mantén el entorno de trabajo para uso interno mientras creas una interfaz más sencilla para los usuarios
• • sustituye el probador genérico por flujos específicos del producto cuando la integración se estabilice

​

Guías relacionadas

• Crea una aplicación de chat web con Next.js
• Instrucciones para iniciar una aplicación pequeña
• Ejemplos