Crie uma bancada de trabalho OAuth com Next.js

​

Projeto de exemplo

• GitHub: examples/oauth-client-nextjs
• Caminho local no repositório: examples/oauth-client-nextjs

​

O que este aplicativo inclui

• login com OAuth 2.1 + PKCE
• armazenamento e renovação de tokens associados à sessão
• um proxy unificado para rotas de controle e geração
• descoberta de modelos
• um fluxo de chat por /responses
• um testador genérico para outras rotas do gateway

​

Quando começar com este exemplo

• usuários finais devem entrar com acesso delegado
• você precisar de mais do que uma página de chat simples
• você quiser uma rota segura no servidor para vários endpoints da Phaseo

• você só precisar de uma interface de chat simples com chave de API
• você quiser começar por um script ou CLI

​

Arquivos principais

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

​

Por que o exemplo foi estruturado assim

​

1. O OAuth fica separado da lógica do gateway

• lógica de início de autenticação e callback
• gerenciamento de sessão criptografada
• renovação de tokens

​

2. Uma única rota de proxy gerencia as chamadas ao gateway

• verifica a lista de permissões de endpoints
• inclui o token bearer atual
• renova os tokens quando necessário
• encaminha os corpos das solicitações e respostas

​

3. O painel também funciona como bancada interna

• descobre modelos
• testa /responses
• também pode testar endpoints que não são de chat

​

Pré-requisitos

• • Node.js e um gerenciador de pacotes compatível
• • um cliente OAuth configurado com a URL de callback local
• • um segredo de sessão forte

​

Execute o exemplo

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

​

Verifique o resultado

• O login retorna ao callback configurado e cria uma sessão.
• O painel consegue descobrir modelos pelo proxy.
• Uma solicitação à Responses API é concluída sem expor um token de acesso ao navegador.
• Um endpoint fora da lista de permissões do proxy é rejeitado.

​

Como adaptar o exemplo

• • reduza a lista de permissões do proxy aos endpoints de que seu produto realmente precisa
• • mantenha a bancada para uso interno enquanto cria uma interface mais simples para os usuários
• • substitua o testador genérico por fluxos específicos do produto quando a integração estiver estável

​

Guias relacionados

• Crie um aplicativo de chat web com Next.js
• Prompts para iniciar um miniaplicativo
• Exemplos