@prestige-cloud/react

React components for Prestige Cloud API integration.

Provides a drop-in "API Cloud" panel that manages OAuth login, connected API templates, and manual API key entry -- all without requiring external CSS.

Installation

npm install @prestige-cloud/react

Peer dependencies: react ^18 || ^19 and react-dom ^18 || ^19.

Quick Start

import { PrestigeAPICloud, PrestigeCallback } from "@prestige-cloud/react";

// Main component -- drop into your "API Cloud" tab
function APITab() {
  return (
    <PrestigeAPICloud
      clientId="your-client-id"
      scopes={["profile", "connections:proxy"]}
      redirectUri="http://localhost:3000/prestige-callback"
      onManualSave={(templateId, values) => {
        // Handle manual API key entry (without Prestige Cloud account)
        console.log("Saved:", templateId, values);
      }}
      onReady={() => console.log("Connected!")}
    />
  );
}

// OAuth callback page -- mount at your redirectUri route
function CallbackPage() {
  return <PrestigeCallback />;
}

Components

<PrestigeAPICloud />

Full API management component. Shows a login prompt when disconnected, displays connected API templates when authenticated, and supports manual API key entry as a fallback for users without a Prestige Cloud account.

Props:

| Prop | Type | Required | Description | |------|------|----------|-------------| | clientId | string | Yes | OAuth client ID issued by Prestige Cloud | | scopes | string[] | Yes | OAuth scopes to request | | redirectUri | string | Yes | URI that Prestige Cloud redirects to after authorization | | baseUrl | string | No | Base URL of the Prestige Cloud instance | | onReady | () => void | No | Called when authenticated and app config is loaded | | onError | (error: Error) => void | No | Called on auth or API errors | | onTokens | (tokens: TokenSet) => void | No | Called when tokens are obtained or refreshed | | onManualSave | (templateId, values) => void | No | Called when user saves API keys manually | | className | string | No | CSS class applied to the root container |

<PrestigeCallback />

OAuth callback handler for the popup flow. Mount this component at your redirectUri route. It reads the authorization code from the URL query string and posts it back to the opener window via postMessage.

Props:

| Prop | Type | Required | Description | |------|------|----------|-------------| | onSuccess | () => void | No | Called after the code is relayed to the opener | | onError | (error: string) => void | No | Called when the callback contains an error |

usePrestigeAuth(config)

Hook for building custom auth UI. Returns the current auth state, the SDK client instance, tokens, app config, and login/logout functions.

Works Without Account

Users can fill in API keys manually without creating a Prestige Cloud account. Values are stored in localStorage via the SDK's manual storage API, and the onManualSave callback notifies your app so it can start using the keys immediately.

Exported Types

• PrestigeAPICloudProps
• PrestigeCallbackProps
• AuthState — "loading" | "connected" | "disconnected"
• TemplateInfo

License

MIT