OAuth Next.js workbench बनाएं

​

सैंपल प्रोजेक्ट

• GitHub: examples/oauth-client-nextjs
• रिपॉज़िटरी में स्थानीय पथ: examples/oauth-client-nextjs

​

इस ऐप में क्या शामिल है

• OAuth 2.1 + PKCE लॉगिन
• session-आधारित token संग्रहण और refresh
• control और generation routes के लिए एकीकृत proxy
• मॉडल खोज
• /responses पर एक चैट फ़्लो
• अन्य Gateway routes के लिए एक सामान्य endpoint जाँच-उपकरण

​

इस उदाहरण से कब शुरू करें

• अंतिम उपयोगकर्ताओं को delegated access के साथ साइन इन करना हो
• आपको साधारण चैट पेज से अधिक चाहिए
• कई Phaseo endpoints के लिए एक सुरक्षित server route चाहिए

• आपको केवल साधारण API-key चैट UI चाहिए
• आप पहले script या 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 logic से अलग रखें

• प्रमाणीकरण शुरू करने और callback संभालने का लॉजिक
• एन्क्रिप्टेड session का प्रबंधन
• token refresh

​

2. एक proxy route Gateway calls संभालता है

• endpoint allowlist जांचता है
• मौजूदा bearer token जोड़ता है
• ज़रूरत पड़ने पर tokens refresh करता है
• request और response bodies आगे भेजता है

​

3. Dashboard एक internal workbench का काम भी करता है

• मॉडल खोजता है
• का परीक्षण करता है /responses
• non-chat endpoints भी जांच सकता है

​

ज़रूरी चीज़ें

• • Node.js और समर्थित package manager
• • local callback URL वाला OAuth client
• • मज़बूत session secret

​

सैंपल चलाएं

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

​

काम की जांच करें

• Sign-in configured callback पर लौटता है और session बनाता है।
• Dashboard proxy से मॉडल खोज सकता है।
• एक Responses API अनुरोध browser में access token उजागर किए बिना पूरा होता है।
• Proxy allowlist के बाहर का endpoint अस्वीकार हो जाता है।

​

इसे अपने मुताबिक कैसे बनाएं

• • proxy allowlist को केवल product के ज़रूरी endpoints तक सीमित करें
• • साफ़ user-facing UI बनाते समय workbench को internal इस्तेमाल के लिए रखें
• • integration स्थिर होने पर generic tester को product के लिए बने flows से बदलें

​

संबंधित गाइड

• Next.js वेब चैट ऐप बनाएं
• मिनी ऐप के लिए शुरुआती prompts
• उदाहरण