Eine OAuth-Next.js-Workbench erstellen

​

Beispielprojekt

• GitHub: examples/oauth-client-nextjs
• Lokaler Repository-Pfad: examples/oauth-client-nextjs

​

Was die App abdeckt

• OAuth-2.1- und PKCE-Anmeldung
• sitzungsgebundene Token-Speicherung und -Erneuerung
• einen einheitlichen Proxy für Steuerungs- und Generierungsrouten
• Modellerkennung
• einen Chat-Ablauf über /responses
• einen allgemeinen Endpoint-Tester für weitere Gateway-Routen

​

Wann du mit diesem Beispiel starten solltest

• Endnutzer sich mit delegiertem Zugriff anmelden sollen
• du mehr als eine einfache Chat-Seite brauchst
• du eine sichere Serverroute für mehrere Phaseo-Endpoints möchtest

• du nur eine einfache Chat-UI mit API-Schlüssel brauchst
• du zuerst ein Skript oder eine CLI möchtest

​

Wichtige Dateien

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

​

Warum das Beispiel so aufgebaut ist

​

1. OAuth bleibt von der Gateway-Logik getrennt

• Start- und Callback-Logik der Authentifizierung
• verschlüsselte Sitzungsverwaltung
• Token-Erneuerung

​

2. Eine Proxy-Route verarbeitet die Gateway-Aufrufe

• prüft die Endpoint-Allowlist
• fügt das aktuelle Bearer-Token ein
• erneuert Tokens bei Bedarf
• leitet Anfrage- und Antwort-Bodies weiter

​

3. Das Dashboard dient zugleich als interne Workbench

• sie ermittelt Modelle
• sie testet /responses
• sie kann auch Nicht-Chat-Endpoints testen

​

Voraussetzungen

• • Node.js und ein unterstützter Paketmanager
• • ein OAuth-Client mit konfigurierter lokaler Callback-URL
• • ein starkes Sitzungsgeheimnis

​

Beispiel ausführen

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

​

Ergebnis prüfen

• Nach der Anmeldung wird die konfigurierte Callback-URL aufgerufen und eine Sitzung erstellt.
• Das Dashboard kann Modelle über den Proxy ermitteln.
• Eine Responses-API-Anfrage wird abgeschlossen, ohne ein Zugriffstoken im Browser offenzulegen.
• Ein Endpoint außerhalb der Proxy-Allowlist wird abgelehnt.

​

Das Beispiel anpassen

• • kürze die Proxy-Allowlist auf die Endpoints, die dein Produkt wirklich benötigt
• • behalte die Workbench intern und entwickle darauf eine übersichtlichere Nutzeroberfläche
• • ersetze den allgemeinen Tester durch produktspezifische Abläufe, sobald die Integration stabil ist

​

Verwandte Anleitungen

• Eine Web-Chat-App mit Next.js erstellen
• Prompts für den Einstieg mit einer Mini-App
• Beispiele