@relipay/react 0.1.0-beta.0

package/AGENTS.md

@@ -0,0 +1,45 @@
+# AGENTS.md — `@relipay/react`
+
+React hooks + headless components for end-user auth state.
+
+## When to use
+
+The user wants browser-side knowledge of "is this user signed in" — to render `<SignedIn>` / `<SignedOut>` regions, show the user's email in a header, gate UI features.
+
+**Do NOT use** for:
+- Server-only auth (use `@relipay/nextjs/server` `auth()`).
+- Sign-in form rendering — `@relipay/react` is headless. Build your own form, post to your `/api/sign-in` route, and call `useRelipay().refresh()` to update the provider after.
+
+## Surface
+
+```ts
+<RelipayProvider apiUrl initialUser? accessToken? meEndpoint?>{children}</RelipayProvider>
+useUser()                       → { user, signedIn, loading }
+useRelipay()                    → { refresh }
+<SignedIn>{children}</SignedIn> → renders only if signed in
+<SignedOut>{children}</SignedOut>
+<Loading>{children}</Loading>
+```
+
+## Auth model — important to internalise
+
+The browser **never sees the Application secret key**. The flow is:
+
+```
+Browser → your customer's server → @relipay/node → ReliPay
+                                                    ↓
+                                returns { user, accessToken } via cookie
+                                                    ↓
+SSR seeds <RelipayProvider initialUser={user} accessToken={accessToken}>
+```
+
+The `accessToken` here is the **end-user's** JWT, *not* the Application secret. It's safe to expose to client JS for the duration of the user's session — but rotate it via cookie on the server.
+
+The provider's `meEndpoint` defaults to `/api/v1/users/me/by-token`. The server-side ReliPay API today requires both an Application secret and a user JWT for `/users/me` — so for the browser to call it directly, your customer's app needs a tiny passthrough route that adds the secret. Or pre-fetch `initialUser` server-side (the recommended pattern) and skip the round-trip.
+
+## What NOT to do
+
+- Don't ship the Application secret key to the browser. Ever. Even in a hidden field, even encoded.
+- Don't use `useUser()` outside `<RelipayProvider>` — it throws explicitly.
+- Don't add styled sign-in/sign-up components here. Headless on purpose. Customers style their own.
+- Don't pre-render `<SignedIn>` content during SSR with `loading=true` — the helper returns null until the provider resolves, which is correct.

package/dist/client.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Browser-side ReliPay client.
+ *
+ * Differs from `@relipay/node` in two important ways:
+ *   1. **Auth model**. The browser never sees the server-side secret key.
+ *      Instead, your customer's *server* signs in via @relipay/node and
+ *      hands the browser a short-lived `accessToken` (the user JWT). All
+ *      browser-side calls use that token directly — there's no separate
+ *      "Application API key" leg from the browser.
+ *   2. **No secrets in the bundle**. The only ReliPay credential the
+ *      browser holds is the user's JWT — and even that is rotatable.
+ *
+ * `apiUrl` is required. Bring-your-own fetch is supported for SSR/SSE
+ * shims and tests.
+ */
+import type { EndUserDto, RelipayError as RelipayErrorShape } from '@relipay/shared-types';
+export interface ReliPayBrowserConfig {
+    apiUrl: string;
+    fetch?: typeof fetch;
+}
+export declare class RelipayError extends Error implements RelipayErrorShape {
+    readonly code: string;
+    readonly fix: string | undefined;
+    readonly docs: string | undefined;
+    readonly statusCode: number | undefined;
+    constructor(error: RelipayErrorShape & {
+        statusCode?: number;
+    });
+}
+export declare class RelipayBrowserClient {
+    private readonly apiUrl;
+    private readonly fetchImpl;
+    constructor(config: ReliPayBrowserConfig);
+    /**
+     * Fetch the current end-user given an access token. Returns null on
+     * USER_TOKEN_INVALID so callers can render signed-out state without
+     * try/catch noise.
+     *
+     * NOTE: this hits a *user-token-only* endpoint that doesn't exist yet on
+     * the server. The browser SDK uses a thin proxy at
+     * `/api/v1/users/me-by-token` that the customer's server will provide
+     * (because the API surface today still requires the secret key for
+     * /users/me). For Phase 5 we expose the contract — the server-side
+     * proxy is one route handler in the customer's Next.js app.
+     *
+     * For deployments that *do* expose user-token-only endpoints, override
+     * `meEndpoint` in config.
+     */
+    getCurrentUser(accessToken: string, meEndpoint?: string): Promise<EndUserDto | null>;
+    private raw;
+}
+export type { EndUserDto } from '@relipay/shared-types';
+//# sourceMappingURL=client.d.ts.map

package/dist/client.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,IAAI,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE3F,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,KAAK,CAAC;CACtB;AAED,qBAAa,YAAa,SAAQ,KAAM,YAAW,iBAAiB;IAClE,SAAgB,IAAI,EAAE,MAAM,CAAC;IAC7B,SAAgB,GAAG,EAAE,MAAM,GAAG,SAAS,CAAC;IACxC,SAAgB,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IACzC,SAAgB,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;gBACnC,KAAK,EAAE,iBAAiB,GAAG;QAAE,UAAU,CAAC,EAAE,MAAM,CAAA;KAAE;CAQ/D;AAOD,qBAAa,oBAAoB;IAC/B,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAS;IAChC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAe;gBAE7B,MAAM,EAAE,oBAAoB;IAYxC;;;;;;;;;;;;;;OAcG;IACG,cAAc,CAAC,WAAW,EAAE,MAAM,EAAE,UAAU,SAA8B,GAAG,OAAO,CAAC,UAAU,GAAG,IAAI,CAAC;YAYjG,GAAG;CA2BlB;AAED,YAAY,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/client.js

@@ -0,0 +1,91 @@
+/**
+ * Browser-side ReliPay client.
+ *
+ * Differs from `@relipay/node` in two important ways:
+ *   1. **Auth model**. The browser never sees the server-side secret key.
+ *      Instead, your customer's *server* signs in via @relipay/node and
+ *      hands the browser a short-lived `accessToken` (the user JWT). All
+ *      browser-side calls use that token directly — there's no separate
+ *      "Application API key" leg from the browser.
+ *   2. **No secrets in the bundle**. The only ReliPay credential the
+ *      browser holds is the user's JWT — and even that is rotatable.
+ *
+ * `apiUrl` is required. Bring-your-own fetch is supported for SSR/SSE
+ * shims and tests.
+ */
+export class RelipayError extends Error {
+    code;
+    fix;
+    docs;
+    statusCode;
+    constructor(error) {
+        super(error.message);
+        this.name = 'RelipayError';
+        this.code = error.code;
+        this.fix = error.fix;
+        this.docs = error.docs;
+        this.statusCode = error.statusCode;
+    }
+}
+export class RelipayBrowserClient {
+    apiUrl;
+    fetchImpl;
+    constructor(config) {
+        if (!config.apiUrl) {
+            throw new RelipayError({
+                code: 'CONFIG_MISSING_API_URL',
+                message: '@relipay/react: apiUrl is required.',
+                fix: 'Pass apiUrl when constructing RelipayBrowserClient or via <RelipayProvider apiUrl=...>',
+            });
+        }
+        this.apiUrl = config.apiUrl.replace(/\/$/, '');
+        this.fetchImpl = config.fetch ?? fetch.bind(globalThis);
+    }
+    /**
+     * Fetch the current end-user given an access token. Returns null on
+     * USER_TOKEN_INVALID so callers can render signed-out state without
+     * try/catch noise.
+     *
+     * NOTE: this hits a *user-token-only* endpoint that doesn't exist yet on
+     * the server. The browser SDK uses a thin proxy at
+     * `/api/v1/users/me-by-token` that the customer's server will provide
+     * (because the API surface today still requires the secret key for
+     * /users/me). For Phase 5 we expose the contract — the server-side
+     * proxy is one route handler in the customer's Next.js app.
+     *
+     * For deployments that *do* expose user-token-only endpoints, override
+     * `meEndpoint` in config.
+     */
+    async getCurrentUser(accessToken, meEndpoint = '/api/v1/users/me/by-token') {
+        try {
+            const res = await this.raw('GET', meEndpoint, undefined, accessToken);
+            return res.data;
+        }
+        catch (err) {
+            if (err instanceof RelipayError && err.code === 'USER_TOKEN_INVALID') {
+                return null;
+            }
+            throw err;
+        }
+    }
+    async raw(method, path, body, accessToken) {
+        const res = await this.fetchImpl(`${this.apiUrl}${path}`, {
+            method,
+            headers: {
+                ...(accessToken ? { 'X-Relipay-User-Token': accessToken } : {}),
+                ...(body !== undefined ? { 'Content-Type': 'application/json' } : {}),
+            },
+            ...(body !== undefined ? { body: JSON.stringify(body) } : {}),
+            credentials: 'include',
+        });
+        const json = (await res.json().catch(() => ({})));
+        if (!res.ok || ('success' in json && json.success === false)) {
+            const err = 'error' in json
+                ? json.error
+                : { code: 'UNKNOWN_ERROR', message: `HTTP ${res.status}` };
+            throw new RelipayError({ ...err, statusCode: res.status });
+        }
+        return { data: json.data, status: res.status };
+    }
+}
+//# sourceMappingURL=client.js.map

package/dist/client.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"client.js","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AASH,MAAM,OAAO,YAAa,SAAQ,KAAK;IACrB,IAAI,CAAS;IACb,GAAG,CAAqB;IACxB,IAAI,CAAqB;IACzB,UAAU,CAAqB;IAC/C,YAAY,KAAkD;QAC5D,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QACrB,IAAI,CAAC,IAAI,GAAG,cAAc,CAAC;QAC3B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC;QACvB,IAAI,CAAC,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC;QACrB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC;QACvB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC;IACrC,CAAC;CACF;AAOD,MAAM,OAAO,oBAAoB;IACd,MAAM,CAAS;IACf,SAAS,CAAe;IAEzC,YAAY,MAA4B;QACtC,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;YACnB,MAAM,IAAI,YAAY,CAAC;gBACrB,IAAI,EAAE,wBAAwB;gBAC9B,OAAO,EAAE,qCAAqC;gBAC9C,GAAG,EAAE,wFAAwF;aAC9F,CAAC,CAAC;QACL,CAAC;QACD,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QAC/C,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAC1D,CAAC;IAED;;;;;;;;;;;;;;OAcG;IACH,KAAK,CAAC,cAAc,CAAC,WAAmB,EAAE,UAAU,GAAG,2BAA2B;QAChF,IAAI,CAAC;YACH,MAAM,GAAG,GAAG,MAAM,IAAI,CAAC,GAAG,CAAa,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC;YAClF,OAAO,GAAG,CAAC,IAAI,CAAC;QAClB,CAAC;QAAC,OAAO,GAAG,EAAE,CAAC;YACb,IAAI,GAAG,YAAY,YAAY,IAAI,GAAG,CAAC,IAAI,KAAK,oBAAoB,EAAE,CAAC;gBACrE,OAAO,IAAI,CAAC;YACd,CAAC;YACD,MAAM,GAAG,CAAC;QACZ,CAAC;IACH,CAAC;IAEO,KAAK,CAAC,GAAG,CACf,MAAc,EACd,IAAY,EACZ,IAAa,EACb,WAA0B;QAE1B,MAAM,GAAG,GAAG,MAAM,IAAI,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,EAAE,EAAE;YACxD,MAAM;YACN,OAAO,EAAE;gBACP,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,sBAAsB,EAAE,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;gBAC/D,GAAG,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,kBAAkB,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;aACtE;YACD,GAAG,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;YAC7D,WAAW,EAAE,SAAS;SACvB,CAAC,CAAC;QACH,MAAM,IAAI,GAAG,CAAC,MAAM,GAAG,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAEA,CAAC;QACjD,IAAI,CAAC,GAAG,CAAC,EAAE,IAAI,CAAC,SAAS,IAAI,IAAI,IAAI,IAAI,CAAC,OAAO,KAAK,KAAK,CAAC,EAAE,CAAC;YAC7D,MAAM,GAAG,GACP,OAAO,IAAI,IAAI;gBACb,CAAC,CAAC,IAAI,CAAC,KAAK;gBACZ,CAAC,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,OAAO,EAAE,QAAQ,GAAG,CAAC,MAAM,EAAE,EAAE,CAAC;YAC/D,MAAM,IAAI,YAAY,CAAC,EAAE,GAAG,GAAG,EAAE,UAAU,EAAE,GAAG,CAAC,MAAM,EAAE,CAAC,CAAC;QAC7D,CAAC;QACD,OAAO,EAAE,IAAI,EAAG,IAAmC,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,CAAC;IACjF,CAAC;CACF"}

package/dist/components.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Headless wrappers — render-prop style components.
+ *
+ * `<SignedIn>` renders children iff there's a user.
+ * `<SignedOut>` renders children iff signed out.
+ * `<Loading>` renders children while resolving.
+ *
+ * These are intentionally header-less — no opinions about your auth UI.
+ * Your customer's app supplies the styled forms; we just give them the
+ * "is the user signed in?" primitive.
+ */
+import * as React from 'react';
+export declare function SignedIn({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element | null;
+export declare function SignedOut({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element | null;
+export declare function Loading({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element | null;
+//# sourceMappingURL=components.d.ts.map

package/dist/components.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../src/components.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CAI9F;AAED,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CAI/F;AAED,wBAAgB,OAAO,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CAG7F"}

package/dist/components.js

@@ -0,0 +1,19 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useUser } from './hooks.js';
+export function SignedIn({ children }) {
+    const { signedIn, loading } = useUser();
+    if (loading)
+        return null;
+    return signedIn ? _jsx(_Fragment, { children: children }) : null;
+}
+export function SignedOut({ children }) {
+    const { signedIn, loading } = useUser();
+    if (loading)
+        return null;
+    return signedIn ? null : _jsx(_Fragment, { children: children });
+}
+export function Loading({ children }) {
+    const { loading } = useUser();
+    return loading ? _jsx(_Fragment, { children: children }) : null;
+}
+//# sourceMappingURL=components.js.map

package/dist/components.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components.js","sourceRoot":"","sources":["../src/components.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAErC,MAAM,UAAU,QAAQ,CAAC,EAAE,QAAQ,EAAiC;IAClE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,OAAO,EAAE,CAAC;IACxC,IAAI,OAAO;QAAE,OAAO,IAAI,CAAC;IACzB,OAAO,QAAQ,CAAC,CAAC,CAAC,4BAAG,QAAQ,GAAI,CAAC,CAAC,CAAC,IAAI,CAAC;AAC3C,CAAC;AAED,MAAM,UAAU,SAAS,CAAC,EAAE,QAAQ,EAAiC;IACnE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,OAAO,EAAE,CAAC;IACxC,IAAI,OAAO;QAAE,OAAO,IAAI,CAAC;IACzB,OAAO,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,4BAAG,QAAQ,GAAI,CAAC;AAC3C,CAAC;AAED,MAAM,UAAU,OAAO,CAAC,EAAE,QAAQ,EAAiC;IACjE,MAAM,EAAE,OAAO,EAAE,GAAG,OAAO,EAAE,CAAC;IAC9B,OAAO,OAAO,CAAC,CAAC,CAAC,4BAAG,QAAQ,GAAI,CAAC,CAAC,CAAC,IAAI,CAAC;AAC1C,CAAC"}

package/dist/context.d.ts

@@ -0,0 +1,39 @@
+/**
+ * RelipayProvider — wraps the app, exposes user + signed-in state.
+ *
+ * Two ways to feed it:
+ *   1. Initial user + access token from your SSR (Next.js App Router server
+ *      component): `<RelipayProvider initialUser={...} initialAccessToken={...}>`
+ *   2. Fetch on mount: pass only `accessToken` — the provider calls
+ *      getCurrentUser on mount + on token change.
+ *
+ * Auth state changes (sign-in, sign-out, refresh) are usually handled by
+ * the customer's server (cookie rotation). Components here read from the
+ * context, so they reflect whatever the server says about the user on the
+ * next page load.
+ */
+import * as React from 'react';
+import type { EndUserDto } from '@relipay/shared-types';
+import { RelipayBrowserClient } from './client.js';
+export interface RelipayContextValue {
+    user: EndUserDto | null;
+    signedIn: boolean;
+    loading: boolean;
+    client: RelipayBrowserClient;
+    /** Manual refresh — re-fetch the current user. Useful after sign-in. */
+    refresh: () => Promise<void>;
+}
+export interface RelipayProviderProps {
+    children: React.ReactNode;
+    apiUrl: string;
+    /** Pre-fetched user to seed initial render (typical SSR pattern). */
+    initialUser?: EndUserDto | null;
+    /** Token to use for client-side calls. Provider re-fetches user when this changes. */
+    accessToken?: string | null;
+    /** Override the /me-by-token endpoint your customer server proxies to ReliPay. */
+    meEndpoint?: string;
+}
+export declare function RelipayProvider({ children, apiUrl, initialUser, accessToken, meEndpoint, }: RelipayProviderProps): React.JSX.Element;
+/** Internal — use the public hooks instead. */
+export declare function useRelipayContext(): RelipayContextValue;
+//# sourceMappingURL=context.d.ts.map

package/dist/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../src/context.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAEnD,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,UAAU,GAAG,IAAI,CAAC;IACxB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,oBAAoB,CAAC;IAC7B,wEAAwE;IACxE,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC9B;AAID,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,qEAAqE;IACrE,WAAW,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IAChC,sFAAsF;IACtF,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,kFAAkF;IAClF,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,MAAM,EACN,WAAkB,EAClB,WAAkB,EAClB,UAAU,GACX,EAAE,oBAAoB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAiC1C;AAED,+CAA+C;AAC/C,wBAAgB,iBAAiB,IAAI,mBAAmB,CAQvD"}

package/dist/context.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * RelipayProvider — wraps the app, exposes user + signed-in state.
+ *
+ * Two ways to feed it:
+ *   1. Initial user + access token from your SSR (Next.js App Router server
+ *      component): `<RelipayProvider initialUser={...} initialAccessToken={...}>`
+ *   2. Fetch on mount: pass only `accessToken` — the provider calls
+ *      getCurrentUser on mount + on token change.
+ *
+ * Auth state changes (sign-in, sign-out, refresh) are usually handled by
+ * the customer's server (cookie rotation). Components here read from the
+ * context, so they reflect whatever the server says about the user on the
+ * next page load.
+ */
+import * as React from 'react';
+import { RelipayBrowserClient } from './client.js';
+const Ctx = React.createContext(null);
+export function RelipayProvider({ children, apiUrl, initialUser = null, accessToken = null, meEndpoint, }) {
+    const client = React.useMemo(() => new RelipayBrowserClient({ apiUrl }), [apiUrl]);
+    const [user, setUser] = React.useState(initialUser);
+    const [loading, setLoading] = React.useState(initialUser === null && Boolean(accessToken));
+    const refresh = React.useCallback(async () => {
+        if (!accessToken) {
+            setUser(null);
+            setLoading(false);
+            return;
+        }
+        setLoading(true);
+        try {
+            const u = await client.getCurrentUser(accessToken, meEndpoint);
+            setUser(u);
+        }
+        catch {
+            // Network or unknown error → treat as signed-out for UI purposes.
+            setUser(null);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [client, accessToken, meEndpoint]);
+    React.useEffect(() => {
+        void refresh();
+    }, [refresh]);
+    const value = React.useMemo(() => ({ user, signedIn: user !== null, loading, client, refresh }), [user, loading, client, refresh]);
+    return _jsx(Ctx.Provider, { value: value, children: children });
+}
+/** Internal — use the public hooks instead. */
+export function useRelipayContext() {
+    const ctx = React.useContext(Ctx);
+    if (!ctx) {
+        throw new Error('@relipay/react: hooks must be used inside <RelipayProvider>. Wrap your app at the root.');
+    }
+    return ctx;
+}
+//# sourceMappingURL=context.js.map

package/dist/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sourceRoot":"","sources":["../src/context.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAWnD,MAAM,GAAG,GAAG,KAAK,CAAC,aAAa,CAA6B,IAAI,CAAC,CAAC;AAalE,MAAM,UAAU,eAAe,CAAC,EAC9B,QAAQ,EACR,MAAM,EACN,WAAW,GAAG,IAAI,EAClB,WAAW,GAAG,IAAI,EAClB,UAAU,GACW;IACrB,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IACnF,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAoB,WAAW,CAAC,CAAC;IACvE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAU,WAAW,KAAK,IAAI,IAAI,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC;IAEpG,MAAM,OAAO,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,IAAmB,EAAE;QAC1D,IAAI,CAAC,WAAW,EAAE,CAAC;YACjB,OAAO,CAAC,IAAI,CAAC,CAAC;YACd,UAAU,CAAC,KAAK,CAAC,CAAC;YAClB,OAAO;QACT,CAAC;QACD,UAAU,CAAC,IAAI,CAAC,CAAC;QACjB,IAAI,CAAC;YACH,MAAM,CAAC,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,WAAW,EAAE,UAAU,CAAC,CAAC;YAC/D,OAAO,CAAC,CAAC,CAAC,CAAC;QACb,CAAC;QAAC,MAAM,CAAC;YACP,kEAAkE;YAClE,OAAO,CAAC,IAAI,CAAC,CAAC;QAChB,CAAC;gBAAS,CAAC;YACT,UAAU,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,UAAU,CAAC,CAAC,CAAC;IAEtC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,KAAK,OAAO,EAAE,CAAC;IACjB,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,MAAM,KAAK,GAAwB,KAAK,CAAC,OAAO,CAC9C,GAAG,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,KAAK,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,EACnE,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,CACjC,CAAC;IAEF,OAAO,KAAC,GAAG,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAAgB,CAAC;AAC/D,CAAC;AAED,+CAA+C;AAC/C,MAAM,UAAU,iBAAiB;IAC/B,MAAM,GAAG,GAAG,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC;IAClC,IAAI,CAAC,GAAG,EAAE,CAAC;QACT,MAAM,IAAI,KAAK,CACb,yFAAyF,CAC1F,CAAC;IACJ,CAAC;IACD,OAAO,GAAG,CAAC;AACb,CAAC"}

package/dist/hooks.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Public hooks. Idiomatic React — same shape Clerk and Auth.js use, so
+ * developers (and AI agents) recognise them immediately.
+ */
+import type { EndUserDto } from '@relipay/shared-types';
+/**
+ * The current end-user, or `null` if signed out. The narrowing is the same
+ * pattern Clerk uses — check `user` for null, then TypeScript narrows.
+ *
+ * @example
+ * ```tsx
+ * const { user, signedIn, loading } = useUser();
+ * if (loading) return <Spinner />;
+ * if (!signedIn) return <SignedOut />;
+ * return <p>Hi {user.email}</p>;
+ * ```
+ */
+export declare function useUser(): {
+    user: EndUserDto | null;
+    signedIn: boolean;
+    loading: boolean;
+};
+/**
+ * Manual session refresh. Usually called after a sign-in / sign-out
+ * round-trip the customer's server handles, so the provider re-fetches
+ * the latest user state.
+ */
+export declare function useRelipay(): {
+    refresh: () => Promise<void>;
+};
+//# sourceMappingURL=hooks.d.ts.map

package/dist/hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../src/hooks.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAGxD;;;;;;;;;;;GAWG;AACH,wBAAgB,OAAO,IAAI;IACzB,IAAI,EAAE,UAAU,GAAG,IAAI,CAAC;IACxB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;CAClB,CAGA;AAED;;;;GAIG;AACH,wBAAgB,UAAU,IAAI;IAC5B,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC9B,CAGA"}

package/dist/hooks.js

@@ -0,0 +1,31 @@
+/**
+ * Public hooks. Idiomatic React — same shape Clerk and Auth.js use, so
+ * developers (and AI agents) recognise them immediately.
+ */
+import { useRelipayContext } from './context.js';
+/**
+ * The current end-user, or `null` if signed out. The narrowing is the same
+ * pattern Clerk uses — check `user` for null, then TypeScript narrows.
+ *
+ * @example
+ * ```tsx
+ * const { user, signedIn, loading } = useUser();
+ * if (loading) return <Spinner />;
+ * if (!signedIn) return <SignedOut />;
+ * return <p>Hi {user.email}</p>;
+ * ```
+ */
+export function useUser() {
+    const ctx = useRelipayContext();
+    return { user: ctx.user, signedIn: ctx.signedIn, loading: ctx.loading };
+}
+/**
+ * Manual session refresh. Usually called after a sign-in / sign-out
+ * round-trip the customer's server handles, so the provider re-fetches
+ * the latest user state.
+ */
+export function useRelipay() {
+    const ctx = useRelipayContext();
+    return { refresh: ctx.refresh };
+}
+//# sourceMappingURL=hooks.js.map

package/dist/hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.js","sourceRoot":"","sources":["../src/hooks.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEjD;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,OAAO;IAKrB,MAAM,GAAG,GAAG,iBAAiB,EAAE,CAAC;IAChC,OAAO,EAAE,IAAI,EAAE,GAAG,CAAC,IAAI,EAAE,QAAQ,EAAE,GAAG,CAAC,QAAQ,EAAE,OAAO,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;AAC1E,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,UAAU;IAGxB,MAAM,GAAG,GAAG,iBAAiB,EAAE,CAAC;IAChC,OAAO,EAAE,OAAO,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;AAClC,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @relipay/react — React hooks + headless components for end-user auth.
+ *
+ * @example
+ * ```tsx
+ * // Server (Next.js App Router root layout)
+ * const user = await getCurrentUserFromCookie();
+ * return (
+ *   <RelipayProvider apiUrl={env.RELIPAY_URL} initialUser={user} accessToken={user?.accessToken ?? null}>
+ *     {children}
+ *   </RelipayProvider>
+ * );
+ *
+ * // Client component
+ * import { useUser, SignedIn, SignedOut } from '@relipay/react';
+ *
+ * function Header() {
+ *   const { user } = useUser();
+ *   return (
+ *     <>
+ *       <SignedIn>Hi, {user!.email}</SignedIn>
+ *       <SignedOut><a href="/sign-in">Sign in</a></SignedOut>
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+export { RelipayProvider } from './context.js';
+export type { RelipayContextValue, RelipayProviderProps } from './context.js';
+export { useUser, useRelipay } from './hooks.js';
+export { SignedIn, SignedOut, Loading } from './components.js';
+export { RelipayBrowserClient, RelipayError } from './client.js';
+export type { ReliPayBrowserConfig, EndUserDto } from './client.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,YAAY,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAC9E,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,oBAAoB,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACjE,YAAY,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC"}

package/dist/index.js

@@ -0,0 +1,32 @@
+/**
+ * @relipay/react — React hooks + headless components for end-user auth.
+ *
+ * @example
+ * ```tsx
+ * // Server (Next.js App Router root layout)
+ * const user = await getCurrentUserFromCookie();
+ * return (
+ *   <RelipayProvider apiUrl={env.RELIPAY_URL} initialUser={user} accessToken={user?.accessToken ?? null}>
+ *     {children}
+ *   </RelipayProvider>
+ * );
+ *
+ * // Client component
+ * import { useUser, SignedIn, SignedOut } from '@relipay/react';
+ *
+ * function Header() {
+ *   const { user } = useUser();
+ *   return (
+ *     <>
+ *       <SignedIn>Hi, {user!.email}</SignedIn>
+ *       <SignedOut><a href="/sign-in">Sign in</a></SignedOut>
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+export { RelipayProvider } from './context.js';
+export { useUser, useRelipay } from './hooks.js';
+export { SignedIn, SignedOut, Loading } from './components.js';
+export { RelipayBrowserClient, RelipayError } from './client.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE/C,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,oBAAoB,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC"}

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@relipay/react",
+  "version": "0.1.0-beta.0",
+  "description": "ReliPay React hooks + components — useUser, SignedIn/SignedOut, sign-in / sign-up forms.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "AGENTS.md",
+    "README.md"
+  ],
+  "keywords": [
+    "react",
+    "hooks",
+    "auth",
+    "billing",
+    "relipay"
+  ],
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "@relipay/shared-types": "0.1.0-beta.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@testing-library/react": "^16.1.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "jsdom": "^25.0.1",
+    "typescript": "^5.6.3",
+    "vitest": "^2.1.5"
+  },
+  "publishConfig": {
+    "access": "public",
+    "tag": "beta"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "lint": "echo \"(eslint not yet wired)\"",
+    "test": "echo \"(react SDK tests deferred to panel/demo e2e)\""
+  }
+}