@outseta/react 0.0.0 → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Outseta
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,29 @@
+# @outseta/react
+
+React hooks and components for the [Outseta](https://www.outseta.com) API. Built on [TanStack Query](https://tanstack.com/query) with auto-generated hooks from the Outseta OpenAPI spec.
+
+## Install
+
+```bash
+npm install @outseta/react
+```
+
+### Peer dependencies
+
+- `react` ^18.0.0 || ^19.0.0
+
+## Usage
+
+```ts
+import { createClient } from "@outseta/react";
+
+const client = createClient({
+  subdomain: "your-company",
+  apiKey: "your-api-key",
+  apiSecret: "your-api-secret",
+});
+```
+
+## License
+
+[MIT](../../LICENSE)

package/dist/index.js

@@ -1,3 +1,210 @@
+// src/components/OutsetaProvider.tsx
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import { jsxDEV } from "react/jsx-dev-runtime";
+var OutsetaContext = createContext(null);
+function useOutseta() {
+  const context = useContext(OutsetaContext);
+  if (!context) {
+    throw new Error("useOutseta must be used within an OutsetaProvider");
+  }
+  return context;
+}
+function getOutseta() {
+  if (typeof window !== "undefined" && window.Outseta) {
+    return window.Outseta;
+  }
+  return null;
+}
+function OutsetaProvider({ children }) {
+  const [status, setStatus] = useState("init");
+  const [user, setUser] = useState(null);
+  const outsetaRef = useRef(null);
+  useEffect(() => {
+    const outseta = getOutseta();
+    if (!outseta)
+      return;
+    outsetaRef.current = outseta;
+    const updateUser = async () => {
+      try {
+        const outsetaUser = await outseta.getUser();
+        setUser(outsetaUser);
+      } catch {
+        setUser(null);
+      } finally {
+        setStatus("ready");
+      }
+    };
+    outseta.on("subscription.update", updateUser);
+    outseta.on("profile.update", updateUser);
+    outseta.on("account.update", updateUser);
+    const params = new URLSearchParams(window.location.search);
+    const accessToken = params.get("access_token");
+    if (accessToken) {
+      outseta.setAccessToken(accessToken);
+      params.delete("access_token");
+      const newSearch = params.toString();
+      const newUrl = window.location.pathname + (newSearch ? `?${newSearch}` : "") + window.location.hash;
+      window.history.replaceState({}, "", newUrl);
+    }
+    const checkAuth = async () => {
+      try {
+        const token = await outseta.getAccessToken();
+        if (token) {
+          await updateUser();
+        } else {
+          setStatus("ready");
+        }
+      } catch {
+        setStatus("ready");
+      }
+    };
+    checkAuth();
+    return () => {
+      outseta.on("subscription.update", () => {});
+      outseta.on("profile.update", () => {});
+      outseta.on("account.update", () => {});
+    };
+  }, []);
+  const logout = () => {
+    const outseta = outsetaRef.current;
+    if (!outseta)
+      return;
+    outseta.setAccessToken("");
+    setUser(null);
+    outseta.logout();
+  };
+  const openLogin = (options = {}) => {
+    outsetaRef.current?.auth.open({
+      widgetMode: "login|register",
+      authenticationCallbackUrl: window.location.href,
+      ...options
+    });
+  };
+  const openSignup = (options = {}) => {
+    outsetaRef.current?.auth.open({
+      widgetMode: "register",
+      authenticationCallbackUrl: window.location.href,
+      ...options
+    });
+  };
+  const openProfile = (options = {}) => {
+    outsetaRef.current?.profile.open({ tab: "profile", ...options });
+  };
+  return /* @__PURE__ */ jsxDEV(OutsetaContext.Provider, {
+    value: {
+      user,
+      isLoading: status !== "ready",
+      logout,
+      openLogin,
+      openSignup,
+      openProfile
+    },
+    children
+  }, undefined, false, undefined, this);
+}
+// src/components/AuthEmbed.tsx
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+function AuthEmbed({
+  widgetMode = "login|register",
+  registrationDefaults,
+  ...props
+}) {
+  const defaults = typeof registrationDefaults === "string" ? registrationDefaults : registrationDefaults ? JSON.stringify(registrationDefaults) : undefined;
+  return /* @__PURE__ */ jsxDEV2("div", {
+    ...props,
+    children: /* @__PURE__ */ jsxDEV2("div", {
+      "data-o-auth": "1",
+      "data-mode": "embed",
+      "data-widget-mode": widgetMode,
+      "data-registration-defaults": defaults
+    }, undefined, false, undefined, this)
+  }, widgetMode, false, undefined, this);
+}
+// src/components/ProfileEmbed.tsx
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+function ProfileEmbed({ tab = "profile", ...props }) {
+  return /* @__PURE__ */ jsxDEV3("div", {
+    ...props,
+    children: /* @__PURE__ */ jsxDEV3("div", {
+      "data-o-profile": "1",
+      "data-mode": "embed",
+      "data-tab": tab
+    }, undefined, false, undefined, this)
+  }, tab, false, undefined, this);
+}
+// src/components/ProtectedRoute.tsx
+import { jsxDEV as jsxDEV4, Fragment } from "react/jsx-dev-runtime";
+function ProtectedRoute({
+  plans,
+  children,
+  loading = null,
+  accessDenied = null,
+  unauthenticated = null
+}) {
+  const { user, isLoading } = useOutseta();
+  if (isLoading)
+    return /* @__PURE__ */ jsxDEV4(Fragment, {
+      children: loading
+    }, undefined, false, undefined, this);
+  if (!user)
+    return /* @__PURE__ */ jsxDEV4(Fragment, {
+      children: unauthenticated
+    }, undefined, false, undefined, this);
+  const userPlanUid = user.Account?.CurrentSubscription?.Plan?.Uid;
+  const hasAccess = userPlanUid ? plans.includes(userPlanUid) : false;
+  if (!hasAccess)
+    return /* @__PURE__ */ jsxDEV4(Fragment, {
+      children: accessDenied
+    }, undefined, false, undefined, this);
+  return /* @__PURE__ */ jsxDEV4(Fragment, {
+    children
+  }, undefined, false, undefined, this);
+}
+// src/components/PurchaseAddonButton.tsx
+import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
+function PurchaseAddonButton({
+  addonUid,
+  billingRenewalTerm = 4,
+  children = "Buy Add-on",
+  ...props
+}) {
+  const { openProfile } = useOutseta();
+  return /* @__PURE__ */ jsxDEV5("button", {
+    onClick: () => openProfile({
+      mode: "popup",
+      tab: "purchaseAddOn",
+      stateProps: { addOnUid: addonUid, billingRenewalTerm }
+    }),
+    ...props,
+    children
+  }, undefined, false, undefined, this);
+}
+// src/components/LogoutButton.tsx
+import { jsxDEV as jsxDEV6 } from "react/jsx-dev-runtime";
+function LogoutButton({
+  children = "Logout",
+  ...props
+}) {
+  const { logout } = useOutseta();
+  return /* @__PURE__ */ jsxDEV6("button", {
+    onClick: logout,
+    ...props,
+    children
+  }, undefined, false, undefined, this);
+}
 export {
-  createClient
+  useOutseta,
+  createClient,
+  PurchaseAddonButton,
+  ProtectedRoute,
+  ProfileEmbed,
+  OutsetaProvider,
+  LogoutButton,
+  AuthEmbed
 };

package/package.json

@@ -1,7 +1,13 @@
 {
   "name": "@outseta/react",
-  "version": "0.0.0",
+  "version": "0.2.0",
   "description": "React hooks and components for the Outseta API",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/outseta/outseta-js.git",
+    "directory": "packages/react"
+  },
   "type": "module",
   "main": "./dist/index.js",
   "types": "./src/index.ts",
@@ -28,8 +34,12 @@
     "typescript": "^5.7.0"
   },
   "sideEffects": false,
-  "files": ["dist", "src"],
+  "files": [
+    "dist",
+    "src"
+  ],
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "provenance": true
   }
 }

package/src/components/AuthEmbed.tsx

@@ -0,0 +1,38 @@
+import type { HTMLAttributes } from "react";
+
+export interface AuthEmbedProps extends HTMLAttributes<HTMLDivElement> {
+  /** Widget mode: "login", "register", or "login|register" */
+  widgetMode?: "login" | "register" | "login|register";
+  /** Registration defaults as a JSON string or object */
+  registrationDefaults?: string | Record<string, unknown>;
+}
+
+/**
+ * Renders an embedded Outseta auth widget (login/register).
+ *
+ * Uses `key={widgetMode}` internally so React re-mounts the widget
+ * when the mode changes.
+ */
+export function AuthEmbed({
+  widgetMode = "login|register",
+  registrationDefaults,
+  ...props
+}: AuthEmbedProps) {
+  const defaults =
+    typeof registrationDefaults === "string"
+      ? registrationDefaults
+      : registrationDefaults
+        ? JSON.stringify(registrationDefaults)
+        : undefined;
+
+  return (
+    <div key={widgetMode} {...props}>
+      <div
+        data-o-auth="1"
+        data-mode="embed"
+        data-widget-mode={widgetMode}
+        data-registration-defaults={defaults}
+      />
+    </div>
+  );
+}

package/src/components/LogoutButton.tsx

@@ -0,0 +1,18 @@
+import type { ButtonHTMLAttributes } from "react";
+import { useOutseta } from "./OutsetaProvider.js";
+
+/**
+ * Button that logs the user out of Outseta.
+ */
+export function LogoutButton({
+  children = "Logout",
+  ...props
+}: ButtonHTMLAttributes<HTMLButtonElement>) {
+  const { logout } = useOutseta();
+
+  return (
+    <button onClick={logout} {...props}>
+      {children}
+    </button>
+  );
+}

package/src/components/OutsetaProvider.tsx

@@ -0,0 +1,151 @@
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
+import type {
+  AuthWidgetOptions,
+  OutsetaEmbed,
+  OutsetaUser,
+  ProfileWidgetOptions,
+} from "./types.js";
+
+export interface OutsetaContextValue {
+  user: OutsetaUser | null;
+  isLoading: boolean;
+  logout: () => void;
+  openLogin: (options?: AuthWidgetOptions) => void;
+  openSignup: (options?: AuthWidgetOptions) => void;
+  openProfile: (options?: ProfileWidgetOptions) => void;
+}
+
+const OutsetaContext = createContext<OutsetaContextValue | null>(null);
+
+export function useOutseta(): OutsetaContextValue {
+  const context = useContext(OutsetaContext);
+  if (!context) {
+    throw new Error("useOutseta must be used within an OutsetaProvider");
+  }
+  return context;
+}
+
+function getOutseta(): OutsetaEmbed | null {
+  if (typeof window !== "undefined" && window.Outseta) {
+    return window.Outseta;
+  }
+  return null;
+}
+
+export function OutsetaProvider({ children }: { children: ReactNode }) {
+  const [status, setStatus] = useState<"init" | "ready">("init");
+  const [user, setUser] = useState<OutsetaUser | null>(null);
+  const outsetaRef = useRef<OutsetaEmbed | null>(null);
+
+  useEffect(() => {
+    const outseta = getOutseta();
+    if (!outseta) return;
+    outsetaRef.current = outseta;
+
+    const updateUser = async () => {
+      try {
+        const outsetaUser = await outseta.getUser();
+        setUser(outsetaUser);
+      } catch {
+        setUser(null);
+      } finally {
+        setStatus("ready");
+      }
+    };
+
+    // Subscribe to user-related events
+    outseta.on("subscription.update", updateUser);
+    outseta.on("profile.update", updateUser);
+    outseta.on("account.update", updateUser);
+
+    // Handle OAuth callback access_token from URL
+    const params = new URLSearchParams(window.location.search);
+    const accessToken = params.get("access_token");
+
+    if (accessToken) {
+      outseta.setAccessToken(accessToken);
+
+      // Clean up URL without triggering navigation
+      params.delete("access_token");
+      const newSearch = params.toString();
+      const newUrl =
+        window.location.pathname +
+        (newSearch ? `?${newSearch}` : "") +
+        window.location.hash;
+      window.history.replaceState({}, "", newUrl);
+    }
+
+    // Check existing auth state
+    const checkAuth = async () => {
+      try {
+        const token = await outseta.getAccessToken();
+        if (token) {
+          await updateUser();
+        } else {
+          setStatus("ready");
+        }
+      } catch {
+        setStatus("ready");
+      }
+    };
+
+    checkAuth();
+
+    return () => {
+      // Replace event handlers with no-ops on cleanup
+      outseta.on("subscription.update", () => {});
+      outseta.on("profile.update", () => {});
+      outseta.on("account.update", () => {});
+    };
+  }, []);
+
+  const logout = () => {
+    const outseta = outsetaRef.current;
+    if (!outseta) return;
+    outseta.setAccessToken("");
+    setUser(null);
+    outseta.logout();
+  };
+
+  const openLogin = (options: AuthWidgetOptions = {}) => {
+    outsetaRef.current?.auth.open({
+      widgetMode: "login|register",
+      authenticationCallbackUrl: window.location.href,
+      ...options,
+    });
+  };
+
+  const openSignup = (options: AuthWidgetOptions = {}) => {
+    outsetaRef.current?.auth.open({
+      widgetMode: "register",
+      authenticationCallbackUrl: window.location.href,
+      ...options,
+    });
+  };
+
+  const openProfile = (options: ProfileWidgetOptions = {}) => {
+    outsetaRef.current?.profile.open({ tab: "profile", ...options });
+  };
+
+  return (
+    <OutsetaContext.Provider
+      value={{
+        user,
+        isLoading: status !== "ready",
+        logout,
+        openLogin,
+        openSignup,
+        openProfile,
+      }}
+    >
+      {children}
+    </OutsetaContext.Provider>
+  );
+}

package/src/components/ProfileEmbed.tsx

@@ -0,0 +1,26 @@
+import type { HTMLAttributes } from "react";
+
+export interface ProfileEmbedProps extends HTMLAttributes<HTMLDivElement> {
+  /** Profile tab to display */
+  tab?:
+    | "profile"
+    | "billing"
+    | "planChange"
+    | "purchaseAddOn"
+    | "passwordChange"
+    | "teamMembers";
+}
+
+/**
+ * Renders an embedded Outseta profile widget.
+ *
+ * Uses `key={tab}` internally so React re-mounts the widget
+ * when the tab changes.
+ */
+export function ProfileEmbed({ tab = "profile", ...props }: ProfileEmbedProps) {
+  return (
+    <div key={tab} {...props}>
+      <div data-o-profile="1" data-mode="embed" data-tab={tab} />
+    </div>
+  );
+}

package/src/components/ProtectedRoute.tsx

@@ -0,0 +1,42 @@
+import type { ReactNode } from "react";
+import { useOutseta } from "./OutsetaProvider.js";
+
+export interface ProtectedRouteProps {
+  /** Plan UIDs that grant access to this route */
+  plans: string[];
+  /** Content to render when access is granted */
+  children: ReactNode;
+  /** Rendered while checking auth status (defaults to null) */
+  loading?: ReactNode;
+  /** Rendered when user is logged in but lacks the right plan */
+  accessDenied?: ReactNode;
+  /** Rendered when user is not logged in */
+  unauthenticated?: ReactNode;
+}
+
+/**
+ * Protects content behind plan-based access control.
+ *
+ * Checks the current user's subscription plan UID against the
+ * provided list of allowed plan UIDs.
+ */
+export function ProtectedRoute({
+  plans,
+  children,
+  loading = null,
+  accessDenied = null,
+  unauthenticated = null,
+}: ProtectedRouteProps) {
+  const { user, isLoading } = useOutseta();
+
+  if (isLoading) return <>{loading}</>;
+
+  if (!user) return <>{unauthenticated}</>;
+
+  const userPlanUid = user.Account?.CurrentSubscription?.Plan?.Uid;
+  const hasAccess = userPlanUid ? plans.includes(userPlanUid) : false;
+
+  if (!hasAccess) return <>{accessDenied}</>;
+
+  return <>{children}</>;
+}

package/src/components/PurchaseAddonButton.tsx

@@ -0,0 +1,38 @@
+import type { ButtonHTMLAttributes } from "react";
+import { useOutseta } from "./OutsetaProvider.js";
+
+export interface PurchaseAddonButtonProps
+  extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /** The Outseta add-on UID to purchase */
+  addonUid: string;
+  /** Billing renewal term (4 = one-time purchase by default) */
+  billingRenewalTerm?: number;
+}
+
+/**
+ * Button that opens the Outseta profile widget to the
+ * "Purchase Add-on" tab for a specific add-on.
+ */
+export function PurchaseAddonButton({
+  addonUid,
+  billingRenewalTerm = 4,
+  children = "Buy Add-on",
+  ...props
+}: PurchaseAddonButtonProps) {
+  const { openProfile } = useOutseta();
+
+  return (
+    <button
+      onClick={() =>
+        openProfile({
+          mode: "popup",
+          tab: "purchaseAddOn",
+          stateProps: { addOnUid: addonUid, billingRenewalTerm },
+        })
+      }
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}

package/src/components/index.ts

@@ -0,0 +1,17 @@
+export type {
+  OutsetaUser,
+  OutsetaEmbed,
+  AuthWidgetOptions,
+  ProfileWidgetOptions,
+} from "./types.js";
+export { OutsetaProvider, useOutseta } from "./OutsetaProvider.js";
+export type { OutsetaContextValue } from "./OutsetaProvider.js";
+export { AuthEmbed } from "./AuthEmbed.js";
+export type { AuthEmbedProps } from "./AuthEmbed.js";
+export { ProfileEmbed } from "./ProfileEmbed.js";
+export type { ProfileEmbedProps } from "./ProfileEmbed.js";
+export { ProtectedRoute } from "./ProtectedRoute.js";
+export type { ProtectedRouteProps } from "./ProtectedRoute.js";
+export { PurchaseAddonButton } from "./PurchaseAddonButton.js";
+export type { PurchaseAddonButtonProps } from "./PurchaseAddonButton.js";
+export { LogoutButton } from "./LogoutButton.js";

package/src/components/types.ts

@@ -0,0 +1,72 @@
+/**
+ * Type definitions for the Outseta embed script (window.Outseta).
+ * These describe the client-side SDK loaded via script tag,
+ * NOT the REST API types generated by Orval.
+ */
+
+export interface OutsetaUser {
+  Uid: string;
+  Email: string;
+  FirstName?: string;
+  LastName?: string;
+  FullName?: string;
+  Account?: {
+    Uid?: string;
+    Name?: string;
+    CurrentSubscription?: {
+      Uid?: string;
+      Plan?: {
+        Uid?: string;
+        Name?: string;
+      };
+      SubscriptionAddOns?: Array<{
+        AddOn?: {
+          Uid?: string;
+          Name?: string;
+        };
+      }>;
+    };
+  };
+  [key: string]: unknown;
+}
+
+export interface AuthWidgetOptions {
+  widgetMode?: "login" | "register" | "login|register";
+  authenticationCallbackUrl?: string;
+  mode?: "popup" | "embed";
+  registrationDefaults?: string;
+  [key: string]: unknown;
+}
+
+export interface ProfileWidgetOptions {
+  tab?:
+    | "profile"
+    | "billing"
+    | "planChange"
+    | "purchaseAddOn"
+    | "passwordChange"
+    | "teamMembers";
+  mode?: "popup" | "embed";
+  stateProps?: Record<string, unknown>;
+  [key: string]: unknown;
+}
+
+export interface OutsetaEmbed {
+  setAccessToken: (token: string) => void;
+  getAccessToken: () => Promise<string | null>;
+  getUser: () => Promise<OutsetaUser>;
+  logout: () => void;
+  on: (event: string, callback: () => void) => void;
+  auth: {
+    open: (options?: AuthWidgetOptions) => void;
+  };
+  profile: {
+    open: (options?: ProfileWidgetOptions) => void;
+  };
+}
+
+declare global {
+  interface Window {
+    Outseta?: OutsetaEmbed;
+  }
+}

package/src/index.ts

@@ -1,5 +1,8 @@
 export { createClient } from "@outseta/api-client";
 export type { OutsetaCredentials } from "@outseta/api-client";
 
+// Outseta embed components and hooks
+export * from "./components/index.js";
+
 // Re-export generated React Query hooks once generated
 // export * from "./generated/index.js";