You can allow users to bring their own ChatGPT accounts to your application using the @openai-oauth/react component and @openai-oauth/ai-sdk adapter. This works for both free and paid ChatGPT plans.
Installation:
npm i @openai-oauth/react @openai-oauth/ai-sdk ai @ai-sdk/react
Client-side implementation (Next.js App Router):
Use <SignInWithChatGPT /> to show the login button and openaiAuthHeaders() to attach the user's credentials to outgoing requests.
Server-side implementation (Next.js Route Handler):
Use openaiCredentials(request) from @openai-oauth/react/server to extract the credentials from the incoming request and pass them to the AI SDK adapter.
// app/page.tsx
"use client";
import { openaiAuthHeaders, SignInWithChatGPT } from "@openai-oauth/react";
import { useCompletion } from "@ai-sdk/react";
export default function Page() {
const { complete, completion, isLoading } = useCompletion({
api: "/api/chat",
streamProtocol: "text",
});
return (
<>
<SignInWithChatGPT />
<button
disabled={isLoading}
onClick={async () => {
await complete("Hello!", {
headers: await openaiAuthHeaders(),
});
}}
>
Ask
</button>
<p>{completion}</p>
</>
);
}
// app/api/chat/route.ts
import { createOpenAIOAuth } from "@openai-oauth/ai-sdk";
import { openaiCredentials } from "@openai-oauth/react/server";
import { streamText } from "ai";
export async function POST(request: Request) {
const { prompt } = await request.json();
const openai = createOpenAIOAuth(openaiCredentials(request));
const result = streamText({
model: openai("gpt-5.4-mini"),
prompt,
});
return result.toTextStreamResponse();
}
