npm package: @prestige-app-cloud/react
Description: React components for Prestige Cloud BaaS — Auth, APIs, Billing, AI, Usage, Health Check
Author: Prestige Cloud
Latest version: 0.3.0

# @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

```bash
npm install @prestige-cloud/react
```

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

## Quick Start

```tsx
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