@prestige-cloud/widget

Drop-in "Login with Prestige Cloud" button widget.

Renders a styled login button and handles the full OAuth 2.0 PKCE flow in a popup window, so the host page's state is never lost during authentication.

Installation

npm install @prestige-cloud/widget

Usage

import { PrestigeWidget } from "@prestige-cloud/widget";

PrestigeWidget.init({
  clientId: "your-client-id",
  scopes: ["profile", "connections:proxy"],
  containerId: "login-container",
  onConnect: (tokens) => console.log("Connected!", tokens),
  onError: (error) => console.error(error),
});

How It Works

1. The widget renders a styled button into the target container (or document.body).
2. When clicked, a popup opens to the Prestige Cloud consent screen.
3. After the user authorizes, the popup posts the authorization code back via postMessage.
4. The widget exchanges the code for tokens using the SDK and calls your onConnect callback.

The popup-based approach avoids full-page redirects and keeps the host site's state intact during authentication.

Configuration

interface WidgetConfig {
  /** OAuth client ID issued by Prestige Cloud. */
  clientId: string;
  /** OAuth scopes to request (e.g. "profile", "vault:standard_api"). */
  scopes: string[];
  /** Base URL of the Prestige Cloud instance. Defaults to the SDK default. */
  baseUrl?: string;
  /** DOM element ID to render the login button into. Falls back to document.body. */
  containerId?: string;
  /** Custom button label. Defaults to "Login with Prestige Cloud". */
  buttonText?: string;
  /** Called with the token set after a successful OAuth exchange. */
  onConnect?: (tokens: TokenSet) => void;
  /** Called when any error occurs during the OAuth flow. */
  onError?: (error: Error) => void;
}

API

• PrestigeWidget.init(config) — Render the button and start listening for callbacks. Returns a widget instance.
• widget.destroy() — Remove the widget and close any open popup.

Callback Page

The widget expects a page at /prestige-callback on your origin that posts the authorization code back to the opener window. If you use @prestige-cloud/react, the <PrestigeCallback /> component handles this automatically.

License

MIT