@opencoredev/loginwithchatgpt-react

React UI primitives for Login with ChatGPT.

This package includes:

• LoginWithChatGPT, a styled drop-in widget.
• useLoginWithChatGPT, the hook behind the widget.
• ChatGPTMark, the compact mark used by the default UI.

OpenAIMark is still exported as a deprecated alias for compatibility.

Button

"use client";

import { LoginWithChatGPT } from "@opencoredev/loginwithchatgpt-react";

export function SignIn() {
  return <LoginWithChatGPT basePath="/api/chatgpt" consent={{ appName: "Acme" }} />;
}

The drop-in widget opens a consent tab/window by default. If the user continues, that same tab/window navigates to OpenAI's verification page. The consent step is not skippable in the drop-in widget; pass consent only to customize the app name, button copy, or security link.

Hook

"use client";

import {
  openLoginWithChatGPTConsentPopup,
  useLoginWithChatGPT,
} from "@opencoredev/loginwithchatgpt-react";

export function CustomButton() {
  const auth = useLoginWithChatGPT({ basePath: "/api/chatgpt" });

  if (auth.status === "authenticated") {
    return <button onClick={() => void auth.logout()}>Disconnect ChatGPT</button>;
  }

  if (auth.status === "pending") {
    return <button onClick={() => void auth.copyCode()}>{auth.userCode}</button>;
  }

  function start() {
    const popup = openLoginWithChatGPTConsentPopup({
      appName: "Acme",
      login: auth.login,
      securityHref: "https://acme.dev/security",
    });

    if (!popup) {
      // Render equivalent inline consent, then call auth.login() from that button.
    }
  }

  return (
    <button onClick={start}>Login with ChatGPT</button>
  );
}

The hook opens the verification window, copies the code when allowed, polls /status, hydrates /session on mount, and exposes retry/logout actions.

Peer dependency: react@^18 || ^19.