OAuth対応のNext.jsワークベンチを構築する

​

サンプルプロジェクト

• GitHub: examples/oauth-client-nextjs
• リポジトリ内のパス: examples/oauth-client-nextjs

​

このアプリで扱う内容

• OAuth 2.1 + PKCEログイン
• セッションベースのトークン保存と更新
• 制御ルートと生成ルートをまとめるプロキシ
• モデル検出
• を使ったチャットフロー /responses
• 他のGatewayルート用の汎用エンドポイントテスター

​

このサンプルから始める場合

• エンドユーザーに委任アクセスでログインしてもらう
• シンプルなチャットページ以上の機能が必要
• 複数のPhaseoエンドポイントを1つの安全なサーバールートで扱いたい

• APIキーを使うシンプルなチャットUIだけが必要
• まずスクリプトやCLIを作りたい

​

主なファイル

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

​

この構成を採用している理由

​

1. OAuthとGatewayのロジックを分離する

• 認証開始とコールバックのロジック
• 暗号化されたセッションの処理
• トークン更新

​

2. 1つのプロキシルートでGateway呼び出しを処理する

• エンドポイント許可リストを確認する
• 現在のBearerトークンを追加する
• 必要に応じてトークンを更新する
• リクエストとレスポンスの本文を転送する

​

3. ダッシュボードを内部ワークベンチとしても使う

• モデルを検出する
• を試す /responses
• チャット以外のエンドポイントもテストする

​

前提条件

• • Node.jsと対応するパッケージマネージャー
• • ローカルのコールバックURLを設定したOAuthクライアント
• • 十分に強力なセッションシークレット

​

サンプルを実行する

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

​

動作を確認する

• ログイン後、設定したコールバックに戻り、セッションが作成されます。
• ダッシュボードからプロキシ経由でモデルを検出できます。
• アクセス用トークンをブラウザーに公開せずにResponses APIリクエストが完了します。
• プロキシ許可リストにないエンドポイントは拒否されます。

​

独自の用途に合わせる方法

• • プロキシ許可リストを製品に必要なエンドポイントだけに絞る
• • ユーザー向けの分かりやすいUIを上に構築しつつ、ワークベンチは内部用に残す
• • 統合が安定したら汎用テスターを製品専用のフローに置き換える

​

関連ガイド

• Next.jsでWebチャットアプリを作成する
• ミニアプリ用の開始プロンプト
• サンプル