@authon/react 0.1.0

package/README.md

@@ -0,0 +1,137 @@
+# @authon/react
+
+React SDK for [Authon](https://authon.dev) — Provider, hooks, and pre-built components.
+
+## Install
+
+```bash
+npm install @authon/react
+# or
+pnpm add @authon/react
+```
+
+Requires `react >= 18.0.0`.
+
+## Quick Start
+
+```tsx
+import {
+  AuthonProvider,
+  SignedIn,
+  SignedOut,
+  UserButton,
+  useUser,
+  useAuthon,
+} from '@authon/react';
+
+function App() {
+  return (
+    <AuthonProvider publishableKey="pk_live_...">
+      <Header />
+      <Main />
+    </AuthonProvider>
+  );
+}
+
+function Header() {
+  return (
+    <nav>
+      <SignedIn>
+        <UserButton />
+      </SignedIn>
+      <SignedOut>
+        <SignInButton />
+      </SignedOut>
+    </nav>
+  );
+}
+
+function SignInButton() {
+  const { openSignIn } = useAuthon();
+  return <button onClick={() => openSignIn()}>Sign In</button>;
+}
+
+function Main() {
+  const { user, isLoading } = useUser();
+  if (isLoading) return <p>Loading...</p>;
+  if (!user) return <p>Please sign in.</p>;
+  return <h1>Welcome, {user.displayName}</h1>;
+}
+```
+
+## API Reference
+
+### `<AuthonProvider>`
+
+Wraps your app and provides auth context.
+
+```tsx
+<AuthonProvider
+  publishableKey="pk_live_..."
+  config={{
+    apiUrl: 'https://api.authon.dev',
+    theme: 'auto',
+    locale: 'en',
+    appearance: { primaryColorStart: '#7c3aed' },
+  }}
+>
+  {children}
+</AuthonProvider>
+```
+
+### Hooks
+
+#### `useAuthon()`
+
+Returns the full auth context:
+
+```ts
+const {
+  isSignedIn,  // boolean
+  isLoading,   // boolean
+  user,        // AuthonUser | null
+  signOut,     // () => Promise<void>
+  openSignIn,  // () => Promise<void>
+  openSignUp,  // () => Promise<void>
+  getToken,    // () => string | null
+  client,      // Authon instance
+} = useAuthon();
+```
+
+#### `useUser()`
+
+Shorthand for user data:
+
+```ts
+const { user, isLoading } = useUser();
+```
+
+### Components
+
+| Component | Props | Description |
+|-----------|-------|-------------|
+| `<SignedIn>` | `children` | Renders children only when signed in |
+| `<SignedOut>` | `children` | Renders children only when signed out |
+| `<UserButton>` | none | Avatar dropdown with sign-out action |
+| `<SignIn>` | `mode?` | Opens sign-in modal or renders embedded form |
+| `<SignUp>` | `mode?` | Opens sign-up modal or renders embedded form |
+| `<Protect>` | `fallback?`, `condition?` | Guards content, optionally with a custom condition |
+
+### `<Protect>` Example
+
+```tsx
+<Protect
+  fallback={<p>You need admin access.</p>}
+  condition={(user) => user.publicMetadata?.role === 'admin'}
+>
+  <AdminPanel />
+</Protect>
+```
+
+## Documentation
+
+[authon.dev/docs](https://authon.dev/docs)
+
+## License
+
+[MIT](../../LICENSE)

package/dist/index.cjs

@@ -0,0 +1,310 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AuthonProvider: () => AuthonProvider,
+  Protect: () => Protect,
+  SignIn: () => SignIn,
+  SignUp: () => SignUp,
+  SignedIn: () => SignedIn,
+  SignedOut: () => SignedOut,
+  UserButton: () => UserButton,
+  useAuthon: () => useAuthon,
+  useUser: () => useUser
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/AuthonProvider.tsx
+var import_react = require("react");
+var import_js = require("@authon/js");
+var import_jsx_runtime = require("react/jsx-runtime");
+var AuthonContext = (0, import_react.createContext)(null);
+function AuthonProvider({ publishableKey, children, config }) {
+  const [user, setUser] = (0, import_react.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react.useState)(true);
+  const clientRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    const client = new import_js.Authon(publishableKey, config);
+    clientRef.current = client;
+    client.on("signedIn", (u) => {
+      setUser(u);
+      setIsLoading(false);
+    });
+    client.on("signedOut", () => {
+      setUser(null);
+    });
+    client.on("error", () => {
+      setIsLoading(false);
+    });
+    setIsLoading(false);
+    return () => {
+      client.destroy();
+      clientRef.current = null;
+    };
+  }, [publishableKey]);
+  const signOut = (0, import_react.useCallback)(async () => {
+    await clientRef.current?.signOut();
+    setUser(null);
+  }, []);
+  const openSignIn = (0, import_react.useCallback)(async () => {
+    await clientRef.current?.openSignIn();
+  }, []);
+  const openSignUp = (0, import_react.useCallback)(async () => {
+    await clientRef.current?.openSignUp();
+  }, []);
+  const getToken = (0, import_react.useCallback)(() => {
+    return clientRef.current?.getToken() ?? null;
+  }, []);
+  const value = (0, import_react.useMemo)(
+    () => ({
+      isSignedIn: !!user,
+      isLoading,
+      user,
+      signOut,
+      openSignIn,
+      openSignUp,
+      getToken,
+      client: clientRef.current
+    }),
+    [user, isLoading, signOut, openSignIn, openSignUp, getToken]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AuthonContext.Provider, { value, children });
+}
+
+// src/useAuthon.ts
+var import_react2 = require("react");
+function useAuthon() {
+  const ctx = (0, import_react2.useContext)(AuthonContext);
+  if (!ctx) {
+    throw new Error("useAuthon must be used within an <AuthonProvider>");
+  }
+  return ctx;
+}
+
+// src/useUser.ts
+function useUser() {
+  const { user, isLoading } = useAuthon();
+  return { user, isLoading };
+}
+
+// src/SignIn.tsx
+var import_react3 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function SignIn({ mode = "popup" }) {
+  const { client } = useAuthon();
+  const containerRef = (0, import_react3.useRef)(null);
+  (0, import_react3.useEffect)(() => {
+    if (mode === "popup") {
+      client?.openSignIn();
+    }
+  }, [client, mode]);
+  if (mode === "embedded") {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref: containerRef, id: "authon-signin-container" });
+  }
+  return null;
+}
+
+// src/SignUp.tsx
+var import_react4 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function SignUp({ mode = "popup" }) {
+  const { client } = useAuthon();
+  (0, import_react4.useEffect)(() => {
+    if (mode === "popup") {
+      client?.openSignUp();
+    }
+  }, [client, mode]);
+  if (mode === "embedded") {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { id: "authon-signup-container" });
+  }
+  return null;
+}
+
+// src/UserButton.tsx
+var import_react5 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function UserButton() {
+  const { user, signOut, openSignIn, isSignedIn } = useAuthon();
+  const [open, setOpen] = (0, import_react5.useState)(false);
+  const dropdownRef = (0, import_react5.useRef)(null);
+  const handleClickOutside = (0, import_react5.useCallback)((e) => {
+    if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+      setOpen(false);
+    }
+  }, []);
+  (0, import_react5.useEffect)(() => {
+    if (open) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [open, handleClickOutside]);
+  if (!isSignedIn) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "button",
+      {
+        onClick: () => openSignIn(),
+        style: {
+          padding: "8px 16px",
+          borderRadius: "8px",
+          border: "none",
+          background: "linear-gradient(135deg, #7c3aed, #4f46e5)",
+          color: "#fff",
+          cursor: "pointer",
+          fontSize: "14px",
+          fontWeight: 600
+        },
+        children: "Sign In"
+      }
+    );
+  }
+  const initials = user?.displayName ? user.displayName.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2) : (user?.email?.[0] ?? "?").toUpperCase();
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { ref: dropdownRef, style: { position: "relative", display: "inline-block" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "button",
+      {
+        onClick: () => setOpen((v) => !v),
+        style: {
+          width: "36px",
+          height: "36px",
+          borderRadius: "50%",
+          border: "2px solid #7c3aed",
+          background: user?.avatarUrl ? "transparent" : "linear-gradient(135deg, #7c3aed, #4f46e5)",
+          cursor: "pointer",
+          padding: 0,
+          overflow: "hidden",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: "#fff",
+          fontSize: "13px",
+          fontWeight: 700
+        },
+        children: user?.avatarUrl ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "img",
+          {
+            src: user.avatarUrl,
+            alt: user.displayName ?? "avatar",
+            style: { width: "100%", height: "100%", objectFit: "cover" }
+          }
+        ) : initials
+      }
+    ),
+    open && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          right: 0,
+          top: "44px",
+          minWidth: "200px",
+          background: "#fff",
+          border: "1px solid #e5e7eb",
+          borderRadius: "12px",
+          boxShadow: "0 8px 24px rgba(0,0,0,0.12)",
+          zIndex: 9999,
+          overflow: "hidden"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+            "div",
+            {
+              style: {
+                padding: "12px 16px",
+                borderBottom: "1px solid #f3f4f6"
+              },
+              children: [
+                user?.displayName && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: "14px", fontWeight: 600, color: "#111827" }, children: user.displayName }),
+                user?.email && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: "12px", color: "#6b7280", marginTop: "2px" }, children: user.email })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "button",
+            {
+              onClick: async () => {
+                setOpen(false);
+                await signOut();
+              },
+              style: {
+                display: "block",
+                width: "100%",
+                padding: "10px 16px",
+                textAlign: "left",
+                background: "none",
+                border: "none",
+                cursor: "pointer",
+                fontSize: "14px",
+                color: "#ef4444",
+                fontWeight: 500
+              },
+              onMouseEnter: (e) => {
+                e.currentTarget.style.background = "#fef2f2";
+              },
+              onMouseLeave: (e) => {
+                e.currentTarget.style.background = "none";
+              },
+              children: "Sign out"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+
+// src/SignedIn.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function SignedIn({ children }) {
+  const { isSignedIn, isLoading } = useAuthon();
+  if (isLoading || !isSignedIn) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children });
+}
+
+// src/SignedOut.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function SignedOut({ children }) {
+  const { isSignedIn, isLoading } = useAuthon();
+  if (isLoading || isSignedIn) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children });
+}
+
+// src/Protect.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function Protect({ children, fallback = null, condition }) {
+  const { isSignedIn, isLoading, user } = useAuthon();
+  if (isLoading) return null;
+  if (!isSignedIn || !user) return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: fallback });
+  if (condition && !condition(user)) return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: fallback });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AuthonProvider,
+  Protect,
+  SignIn,
+  SignUp,
+  SignedIn,
+  SignedOut,
+  UserButton,
+  useAuthon,
+  useUser
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/AuthonProvider.tsx","../src/useAuthon.ts","../src/useUser.ts","../src/SignIn.tsx","../src/SignUp.tsx","../src/UserButton.tsx","../src/SignedIn.tsx","../src/SignedOut.tsx","../src/Protect.tsx"],"sourcesContent":["export { AuthonProvider } from './AuthonProvider';\nexport type { AuthonContextValue } from './AuthonProvider';\nexport { useAuthon } from './useAuthon';\nexport { useUser } from './useUser';\nexport { SignIn } from './SignIn';\nexport { SignUp } from './SignUp';\nexport { UserButton } from './UserButton';\nexport { SignedIn } from './SignedIn';\nexport { SignedOut } from './SignedOut';\nexport { Protect } from './Protect';\n","import { createContext, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { Authon } from '@authon/js';\nimport type { AuthonConfig } from '@authon/js';\nimport type { AuthonUser } from '@authon/shared';\n\nexport interface AuthonContextValue {\n  isSignedIn: boolean;\n  isLoading: boolean;\n  user: AuthonUser | null;\n  signOut: () => Promise<void>;\n  openSignIn: () => Promise<void>;\n  openSignUp: () => Promise<void>;\n  getToken: () => string | null;\n  client: Authon | null;\n}\n\nexport const AuthonContext = createContext<AuthonContextValue | null>(null);\n\ninterface AuthonProviderProps {\n  publishableKey: string;\n  children: ReactNode;\n  config?: Omit<AuthonConfig, 'mode'>;\n}\n\nexport function AuthonProvider({ publishableKey, children, config }: AuthonProviderProps) {\n  const [user, setUser] = useState<AuthonUser | null>(null);\n  const [isLoading, setIsLoading] = useState(true);\n  const clientRef = useRef<Authon | null>(null);\n\n  useEffect(() => {\n    const client = new Authon(publishableKey, config);\n    clientRef.current = client;\n\n    client.on('signedIn', (u) => {\n      setUser(u as AuthonUser);\n      setIsLoading(false);\n    });\n\n    client.on('signedOut', () => {\n      setUser(null);\n    });\n\n    client.on('error', () => {\n      setIsLoading(false);\n    });\n\n    setIsLoading(false);\n\n    return () => {\n      client.destroy();\n      clientRef.current = null;\n    };\n  }, [publishableKey]);\n\n  const signOut = useCallback(async () => {\n    await clientRef.current?.signOut();\n    setUser(null);\n  }, []);\n\n  const openSignIn = useCallback(async () => {\n    await clientRef.current?.openSignIn();\n  }, []);\n\n  const openSignUp = useCallback(async () => {\n    await clientRef.current?.openSignUp();\n  }, []);\n\n  const getToken = useCallback(() => {\n    return clientRef.current?.getToken() ?? null;\n  }, []);\n\n  const value = useMemo<AuthonContextValue>(\n    () => ({\n      isSignedIn: !!user,\n      isLoading,\n      user,\n      signOut,\n      openSignIn,\n      openSignUp,\n      getToken,\n      client: clientRef.current,\n    }),\n    [user, isLoading, signOut, openSignIn, openSignUp, getToken],\n  );\n\n  return <AuthonContext.Provider value={value}>{children}</AuthonContext.Provider>;\n}\n","import { useContext } from 'react';\nimport { AuthonContext } from './AuthonProvider';\nimport type { AuthonContextValue } from './AuthonProvider';\n\nexport function useAuthon(): AuthonContextValue {\n  const ctx = useContext(AuthonContext);\n  if (!ctx) {\n    throw new Error('useAuthon must be used within an <AuthonProvider>');\n  }\n  return ctx;\n}\n","import type { AuthonUser } from '@authon/shared';\nimport { useAuthon } from './useAuthon';\n\nexport function useUser(): { user: AuthonUser | null; isLoading: boolean } {\n  const { user, isLoading } = useAuthon();\n  return { user, isLoading };\n}\n","import { useEffect, useRef } from 'react';\nimport { useAuthon } from './useAuthon';\n\ninterface SignInProps {\n  mode?: 'popup' | 'embedded';\n  redirectUrl?: string;\n}\n\nexport function SignIn({ mode = 'popup' }: SignInProps) {\n  const { client } = useAuthon();\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (mode === 'popup') {\n      client?.openSignIn();\n    }\n  }, [client, mode]);\n\n  if (mode === 'embedded') {\n    return <div ref={containerRef} id=\"authon-signin-container\" />;\n  }\n\n  return null;\n}\n","import { useEffect } from 'react';\nimport { useAuthon } from './useAuthon';\n\ninterface SignUpProps {\n  mode?: 'popup' | 'embedded';\n}\n\nexport function SignUp({ mode = 'popup' }: SignUpProps) {\n  const { client } = useAuthon();\n\n  useEffect(() => {\n    if (mode === 'popup') {\n      client?.openSignUp();\n    }\n  }, [client, mode]);\n\n  if (mode === 'embedded') {\n    return <div id=\"authon-signup-container\" />;\n  }\n\n  return null;\n}\n","import { useCallback, useEffect, useRef, useState } from 'react';\nimport { useAuthon } from './useAuthon';\n\nexport function UserButton() {\n  const { user, signOut, openSignIn, isSignedIn } = useAuthon();\n  const [open, setOpen] = useState(false);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n\n  const handleClickOutside = useCallback((e: MouseEvent) => {\n    if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {\n      setOpen(false);\n    }\n  }, []);\n\n  useEffect(() => {\n    if (open) {\n      document.addEventListener('mousedown', handleClickOutside);\n    }\n    return () => document.removeEventListener('mousedown', handleClickOutside);\n  }, [open, handleClickOutside]);\n\n  if (!isSignedIn) {\n    return (\n      <button\n        onClick={() => openSignIn()}\n        style={{\n          padding: '8px 16px',\n          borderRadius: '8px',\n          border: 'none',\n          background: 'linear-gradient(135deg, #7c3aed, #4f46e5)',\n          color: '#fff',\n          cursor: 'pointer',\n          fontSize: '14px',\n          fontWeight: 600,\n        }}\n      >\n        Sign In\n      </button>\n    );\n  }\n\n  const initials = user?.displayName\n    ? user.displayName\n        .split(' ')\n        .map((n) => n[0])\n        .join('')\n        .toUpperCase()\n        .slice(0, 2)\n    : (user?.email?.[0] ?? '?').toUpperCase();\n\n  return (\n    <div ref={dropdownRef} style={{ position: 'relative', display: 'inline-block' }}>\n      <button\n        onClick={() => setOpen((v) => !v)}\n        style={{\n          width: '36px',\n          height: '36px',\n          borderRadius: '50%',\n          border: '2px solid #7c3aed',\n          background: user?.avatarUrl ? 'transparent' : 'linear-gradient(135deg, #7c3aed, #4f46e5)',\n          cursor: 'pointer',\n          padding: 0,\n          overflow: 'hidden',\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          color: '#fff',\n          fontSize: '13px',\n          fontWeight: 700,\n        }}\n      >\n        {user?.avatarUrl ? (\n          <img\n            src={user.avatarUrl}\n            alt={user.displayName ?? 'avatar'}\n            style={{ width: '100%', height: '100%', objectFit: 'cover' }}\n          />\n        ) : (\n          initials\n        )}\n      </button>\n\n      {open && (\n        <div\n          style={{\n            position: 'absolute',\n            right: 0,\n            top: '44px',\n            minWidth: '200px',\n            background: '#fff',\n            border: '1px solid #e5e7eb',\n            borderRadius: '12px',\n            boxShadow: '0 8px 24px rgba(0,0,0,0.12)',\n            zIndex: 9999,\n            overflow: 'hidden',\n          }}\n        >\n          <div\n            style={{\n              padding: '12px 16px',\n              borderBottom: '1px solid #f3f4f6',\n            }}\n          >\n            {user?.displayName && (\n              <div style={{ fontSize: '14px', fontWeight: 600, color: '#111827' }}>\n                {user.displayName}\n              </div>\n            )}\n            {user?.email && (\n              <div style={{ fontSize: '12px', color: '#6b7280', marginTop: '2px' }}>\n                {user.email}\n              </div>\n            )}\n          </div>\n\n          <button\n            onClick={async () => {\n              setOpen(false);\n              await signOut();\n            }}\n            style={{\n              display: 'block',\n              width: '100%',\n              padding: '10px 16px',\n              textAlign: 'left',\n              background: 'none',\n              border: 'none',\n              cursor: 'pointer',\n              fontSize: '14px',\n              color: '#ef4444',\n              fontWeight: 500,\n            }}\n            onMouseEnter={(e) => {\n              (e.currentTarget as HTMLButtonElement).style.background = '#fef2f2';\n            }}\n            onMouseLeave={(e) => {\n              (e.currentTarget as HTMLButtonElement).style.background = 'none';\n            }}\n          >\n            Sign out\n          </button>\n        </div>\n      )}\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { useAuthon } from './useAuthon';\n\ninterface SignedInProps {\n  children: ReactNode;\n}\n\nexport function SignedIn({ children }: SignedInProps) {\n  const { isSignedIn, isLoading } = useAuthon();\n  if (isLoading || !isSignedIn) return null;\n  return <>{children}</>;\n}\n","import type { ReactNode } from 'react';\nimport { useAuthon } from './useAuthon';\n\ninterface SignedOutProps {\n  children: ReactNode;\n}\n\nexport function SignedOut({ children }: SignedOutProps) {\n  const { isSignedIn, isLoading } = useAuthon();\n  if (isLoading || isSignedIn) return null;\n  return <>{children}</>;\n}\n","import type { ReactNode } from 'react';\nimport type { AuthonUser } from '@authon/shared';\nimport { useAuthon } from './useAuthon';\n\ninterface ProtectProps {\n  children: ReactNode;\n  fallback?: ReactNode;\n  condition?: (user: AuthonUser) => boolean;\n}\n\nexport function Protect({ children, fallback = null, condition }: ProtectProps) {\n  const { isSignedIn, isLoading, user } = useAuthon();\n\n  if (isLoading) return null;\n  if (!isSignedIn || !user) return <>{fallback}</>;\n  if (condition && !condition(user)) return <>{fallback}</>;\n\n  return <>{children}</>;\n}\n"],"mappings":"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","names":["import_react","import_react","import_jsx_runtime","import_react","import_jsx_runtime","import_react","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime"]}

package/dist/index.d.cts

@@ -0,0 +1,60 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { Authon, AuthonConfig } from '@authon/js';
+import { AuthonUser } from '@authon/shared';
+
+interface AuthonContextValue {
+    isSignedIn: boolean;
+    isLoading: boolean;
+    user: AuthonUser | null;
+    signOut: () => Promise<void>;
+    openSignIn: () => Promise<void>;
+    openSignUp: () => Promise<void>;
+    getToken: () => string | null;
+    client: Authon | null;
+}
+interface AuthonProviderProps {
+    publishableKey: string;
+    children: ReactNode;
+    config?: Omit<AuthonConfig, 'mode'>;
+}
+declare function AuthonProvider({ publishableKey, children, config }: AuthonProviderProps): react_jsx_runtime.JSX.Element;
+
+declare function useAuthon(): AuthonContextValue;
+
+declare function useUser(): {
+    user: AuthonUser | null;
+    isLoading: boolean;
+};
+
+interface SignInProps {
+    mode?: 'popup' | 'embedded';
+    redirectUrl?: string;
+}
+declare function SignIn({ mode }: SignInProps): react_jsx_runtime.JSX.Element | null;
+
+interface SignUpProps {
+    mode?: 'popup' | 'embedded';
+}
+declare function SignUp({ mode }: SignUpProps): react_jsx_runtime.JSX.Element | null;
+
+declare function UserButton(): react_jsx_runtime.JSX.Element;
+
+interface SignedInProps {
+    children: ReactNode;
+}
+declare function SignedIn({ children }: SignedInProps): react_jsx_runtime.JSX.Element | null;
+
+interface SignedOutProps {
+    children: ReactNode;
+}
+declare function SignedOut({ children }: SignedOutProps): react_jsx_runtime.JSX.Element | null;
+
+interface ProtectProps {
+    children: ReactNode;
+    fallback?: ReactNode;
+    condition?: (user: AuthonUser) => boolean;
+}
+declare function Protect({ children, fallback, condition }: ProtectProps): react_jsx_runtime.JSX.Element | null;
+
+export { type AuthonContextValue, AuthonProvider, Protect, SignIn, SignUp, SignedIn, SignedOut, UserButton, useAuthon, useUser };

package/dist/index.d.ts

@@ -0,0 +1,60 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { Authon, AuthonConfig } from '@authon/js';
+import { AuthonUser } from '@authon/shared';
+
+interface AuthonContextValue {
+    isSignedIn: boolean;
+    isLoading: boolean;
+    user: AuthonUser | null;
+    signOut: () => Promise<void>;
+    openSignIn: () => Promise<void>;
+    openSignUp: () => Promise<void>;
+    getToken: () => string | null;
+    client: Authon | null;
+}
+interface AuthonProviderProps {
+    publishableKey: string;
+    children: ReactNode;
+    config?: Omit<AuthonConfig, 'mode'>;
+}
+declare function AuthonProvider({ publishableKey, children, config }: AuthonProviderProps): react_jsx_runtime.JSX.Element;
+
+declare function useAuthon(): AuthonContextValue;
+
+declare function useUser(): {
+    user: AuthonUser | null;
+    isLoading: boolean;
+};
+
+interface SignInProps {
+    mode?: 'popup' | 'embedded';
+    redirectUrl?: string;
+}
+declare function SignIn({ mode }: SignInProps): react_jsx_runtime.JSX.Element | null;
+
+interface SignUpProps {
+    mode?: 'popup' | 'embedded';
+}
+declare function SignUp({ mode }: SignUpProps): react_jsx_runtime.JSX.Element | null;
+
+declare function UserButton(): react_jsx_runtime.JSX.Element;
+
+interface SignedInProps {
+    children: ReactNode;
+}
+declare function SignedIn({ children }: SignedInProps): react_jsx_runtime.JSX.Element | null;
+
+interface SignedOutProps {
+    children: ReactNode;
+}
+declare function SignedOut({ children }: SignedOutProps): react_jsx_runtime.JSX.Element | null;
+
+interface ProtectProps {
+    children: ReactNode;
+    fallback?: ReactNode;
+    condition?: (user: AuthonUser) => boolean;
+}
+declare function Protect({ children, fallback, condition }: ProtectProps): react_jsx_runtime.JSX.Element | null;
+
+export { type AuthonContextValue, AuthonProvider, Protect, SignIn, SignUp, SignedIn, SignedOut, UserButton, useAuthon, useUser };

package/dist/index.js

@@ -0,0 +1,275 @@
+// src/AuthonProvider.tsx
+import { createContext, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Authon } from "@authon/js";
+import { jsx } from "react/jsx-runtime";
+var AuthonContext = createContext(null);
+function AuthonProvider({ publishableKey, children, config }) {
+  const [user, setUser] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const clientRef = useRef(null);
+  useEffect(() => {
+    const client = new Authon(publishableKey, config);
+    clientRef.current = client;
+    client.on("signedIn", (u) => {
+      setUser(u);
+      setIsLoading(false);
+    });
+    client.on("signedOut", () => {
+      setUser(null);
+    });
+    client.on("error", () => {
+      setIsLoading(false);
+    });
+    setIsLoading(false);
+    return () => {
+      client.destroy();
+      clientRef.current = null;
+    };
+  }, [publishableKey]);
+  const signOut = useCallback(async () => {
+    await clientRef.current?.signOut();
+    setUser(null);
+  }, []);
+  const openSignIn = useCallback(async () => {
+    await clientRef.current?.openSignIn();
+  }, []);
+  const openSignUp = useCallback(async () => {
+    await clientRef.current?.openSignUp();
+  }, []);
+  const getToken = useCallback(() => {
+    return clientRef.current?.getToken() ?? null;
+  }, []);
+  const value = useMemo(
+    () => ({
+      isSignedIn: !!user,
+      isLoading,
+      user,
+      signOut,
+      openSignIn,
+      openSignUp,
+      getToken,
+      client: clientRef.current
+    }),
+    [user, isLoading, signOut, openSignIn, openSignUp, getToken]
+  );
+  return /* @__PURE__ */ jsx(AuthonContext.Provider, { value, children });
+}
+
+// src/useAuthon.ts
+import { useContext } from "react";
+function useAuthon() {
+  const ctx = useContext(AuthonContext);
+  if (!ctx) {
+    throw new Error("useAuthon must be used within an <AuthonProvider>");
+  }
+  return ctx;
+}
+
+// src/useUser.ts
+function useUser() {
+  const { user, isLoading } = useAuthon();
+  return { user, isLoading };
+}
+
+// src/SignIn.tsx
+import { useEffect as useEffect2, useRef as useRef2 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function SignIn({ mode = "popup" }) {
+  const { client } = useAuthon();
+  const containerRef = useRef2(null);
+  useEffect2(() => {
+    if (mode === "popup") {
+      client?.openSignIn();
+    }
+  }, [client, mode]);
+  if (mode === "embedded") {
+    return /* @__PURE__ */ jsx2("div", { ref: containerRef, id: "authon-signin-container" });
+  }
+  return null;
+}
+
+// src/SignUp.tsx
+import { useEffect as useEffect3 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function SignUp({ mode = "popup" }) {
+  const { client } = useAuthon();
+  useEffect3(() => {
+    if (mode === "popup") {
+      client?.openSignUp();
+    }
+  }, [client, mode]);
+  if (mode === "embedded") {
+    return /* @__PURE__ */ jsx3("div", { id: "authon-signup-container" });
+  }
+  return null;
+}
+
+// src/UserButton.tsx
+import { useCallback as useCallback2, useEffect as useEffect4, useRef as useRef3, useState as useState2 } from "react";
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+function UserButton() {
+  const { user, signOut, openSignIn, isSignedIn } = useAuthon();
+  const [open, setOpen] = useState2(false);
+  const dropdownRef = useRef3(null);
+  const handleClickOutside = useCallback2((e) => {
+    if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+      setOpen(false);
+    }
+  }, []);
+  useEffect4(() => {
+    if (open) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [open, handleClickOutside]);
+  if (!isSignedIn) {
+    return /* @__PURE__ */ jsx4(
+      "button",
+      {
+        onClick: () => openSignIn(),
+        style: {
+          padding: "8px 16px",
+          borderRadius: "8px",
+          border: "none",
+          background: "linear-gradient(135deg, #7c3aed, #4f46e5)",
+          color: "#fff",
+          cursor: "pointer",
+          fontSize: "14px",
+          fontWeight: 600
+        },
+        children: "Sign In"
+      }
+    );
+  }
+  const initials = user?.displayName ? user.displayName.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2) : (user?.email?.[0] ?? "?").toUpperCase();
+  return /* @__PURE__ */ jsxs("div", { ref: dropdownRef, style: { position: "relative", display: "inline-block" }, children: [
+    /* @__PURE__ */ jsx4(
+      "button",
+      {
+        onClick: () => setOpen((v) => !v),
+        style: {
+          width: "36px",
+          height: "36px",
+          borderRadius: "50%",
+          border: "2px solid #7c3aed",
+          background: user?.avatarUrl ? "transparent" : "linear-gradient(135deg, #7c3aed, #4f46e5)",
+          cursor: "pointer",
+          padding: 0,
+          overflow: "hidden",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: "#fff",
+          fontSize: "13px",
+          fontWeight: 700
+        },
+        children: user?.avatarUrl ? /* @__PURE__ */ jsx4(
+          "img",
+          {
+            src: user.avatarUrl,
+            alt: user.displayName ?? "avatar",
+            style: { width: "100%", height: "100%", objectFit: "cover" }
+          }
+        ) : initials
+      }
+    ),
+    open && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          right: 0,
+          top: "44px",
+          minWidth: "200px",
+          background: "#fff",
+          border: "1px solid #e5e7eb",
+          borderRadius: "12px",
+          boxShadow: "0 8px 24px rgba(0,0,0,0.12)",
+          zIndex: 9999,
+          overflow: "hidden"
+        },
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                padding: "12px 16px",
+                borderBottom: "1px solid #f3f4f6"
+              },
+              children: [
+                user?.displayName && /* @__PURE__ */ jsx4("div", { style: { fontSize: "14px", fontWeight: 600, color: "#111827" }, children: user.displayName }),
+                user?.email && /* @__PURE__ */ jsx4("div", { style: { fontSize: "12px", color: "#6b7280", marginTop: "2px" }, children: user.email })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx4(
+            "button",
+            {
+              onClick: async () => {
+                setOpen(false);
+                await signOut();
+              },
+              style: {
+                display: "block",
+                width: "100%",
+                padding: "10px 16px",
+                textAlign: "left",
+                background: "none",
+                border: "none",
+                cursor: "pointer",
+                fontSize: "14px",
+                color: "#ef4444",
+                fontWeight: 500
+              },
+              onMouseEnter: (e) => {
+                e.currentTarget.style.background = "#fef2f2";
+              },
+              onMouseLeave: (e) => {
+                e.currentTarget.style.background = "none";
+              },
+              children: "Sign out"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+
+// src/SignedIn.tsx
+import { Fragment, jsx as jsx5 } from "react/jsx-runtime";
+function SignedIn({ children }) {
+  const { isSignedIn, isLoading } = useAuthon();
+  if (isLoading || !isSignedIn) return null;
+  return /* @__PURE__ */ jsx5(Fragment, { children });
+}
+
+// src/SignedOut.tsx
+import { Fragment as Fragment2, jsx as jsx6 } from "react/jsx-runtime";
+function SignedOut({ children }) {
+  const { isSignedIn, isLoading } = useAuthon();
+  if (isLoading || isSignedIn) return null;
+  return /* @__PURE__ */ jsx6(Fragment2, { children });
+}
+
+// src/Protect.tsx
+import { Fragment as Fragment3, jsx as jsx7 } from "react/jsx-runtime";
+function Protect({ children, fallback = null, condition }) {
+  const { isSignedIn, isLoading, user } = useAuthon();
+  if (isLoading) return null;
+  if (!isSignedIn || !user) return /* @__PURE__ */ jsx7(Fragment3, { children: fallback });
+  if (condition && !condition(user)) return /* @__PURE__ */ jsx7(Fragment3, { children: fallback });
+  return /* @__PURE__ */ jsx7(Fragment3, { children });
+}
+export {
+  AuthonProvider,
+  Protect,
+  SignIn,
+  SignUp,
+  SignedIn,
+  SignedOut,
+  UserButton,
+  useAuthon,
+  useUser
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/AuthonProvider.tsx","../src/useAuthon.ts","../src/useUser.ts","../src/SignIn.tsx","../src/SignUp.tsx","../src/UserButton.tsx","../src/SignedIn.tsx","../src/SignedOut.tsx","../src/Protect.tsx"],"sourcesContent":["import { createContext, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { Authon } from '@authon/js';\nimport type { AuthonConfig } from '@authon/js';\nimport type { AuthonUser } from '@authon/shared';\n\nexport interface AuthonContextValue {\n  isSignedIn: boolean;\n  isLoading: boolean;\n  user: AuthonUser | null;\n  signOut: () => Promise<void>;\n  openSignIn: () => Promise<void>;\n  openSignUp: () => Promise<void>;\n  getToken: () => string | null;\n  client: Authon | null;\n}\n\nexport const AuthonContext = createContext<AuthonContextValue | null>(null);\n\ninterface AuthonProviderProps {\n  publishableKey: string;\n  children: ReactNode;\n  config?: Omit<AuthonConfig, 'mode'>;\n}\n\nexport function AuthonProvider({ publishableKey, children, config }: AuthonProviderProps) {\n  const [user, setUser] = useState<AuthonUser | null>(null);\n  const [isLoading, setIsLoading] = useState(true);\n  const clientRef = useRef<Authon | null>(null);\n\n  useEffect(() => {\n    const client = new Authon(publishableKey, config);\n    clientRef.current = client;\n\n    client.on('signedIn', (u) => {\n      setUser(u as AuthonUser);\n      setIsLoading(false);\n    });\n\n    client.on('signedOut', () => {\n      setUser(null);\n    });\n\n    client.on('error', () => {\n      setIsLoading(false);\n    });\n\n    setIsLoading(false);\n\n    return () => {\n      client.destroy();\n      clientRef.current = null;\n    };\n  }, [publishableKey]);\n\n  const signOut = useCallback(async () => {\n    await clientRef.current?.signOut();\n    setUser(null);\n  }, []);\n\n  const openSignIn = useCallback(async () => {\n    await clientRef.current?.openSignIn();\n  }, []);\n\n  const openSignUp = useCallback(async () => {\n    await clientRef.current?.openSignUp();\n  }, []);\n\n  const getToken = useCallback(() => {\n    return clientRef.current?.getToken() ?? null;\n  }, []);\n\n  const value = useMemo<AuthonContextValue>(\n    () => ({\n      isSignedIn: !!user,\n      isLoading,\n      user,\n      signOut,\n      openSignIn,\n      openSignUp,\n      getToken,\n      client: clientRef.current,\n    }),\n    [user, isLoading, signOut, openSignIn, openSignUp, getToken],\n  );\n\n  return <AuthonContext.Provider value={value}>{children}</AuthonContext.Provider>;\n}\n","import { useContext } from 'react';\nimport { AuthonContext } from './AuthonProvider';\nimport type { AuthonContextValue } from './AuthonProvider';\n\nexport function useAuthon(): AuthonContextValue {\n  const ctx = useContext(AuthonContext);\n  if (!ctx) {\n    throw new Error('useAuthon must be used within an <AuthonProvider>');\n  }\n  return ctx;\n}\n","import type { AuthonUser } from '@authon/shared';\nimport { useAuthon } from './useAuthon';\n\nexport function useUser(): { user: AuthonUser | null; isLoading: boolean } {\n  const { user, isLoading } = useAuthon();\n  return { user, isLoading };\n}\n","import { useEffect, useRef } from 'react';\nimport { useAuthon } from './useAuthon';\n\ninterface SignInProps {\n  mode?: 'popup' | 'embedded';\n  redirectUrl?: string;\n}\n\nexport function SignIn({ mode = 'popup' }: SignInProps) {\n  const { client } = useAuthon();\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (mode === 'popup') {\n      client?.openSignIn();\n    }\n  }, [client, mode]);\n\n  if (mode === 'embedded') {\n    return <div ref={containerRef} id=\"authon-signin-container\" />;\n  }\n\n  return null;\n}\n","import { useEffect } from 'react';\nimport { useAuthon } from './useAuthon';\n\ninterface SignUpProps {\n  mode?: 'popup' | 'embedded';\n}\n\nexport function SignUp({ mode = 'popup' }: SignUpProps) {\n  const { client } = useAuthon();\n\n  useEffect(() => {\n    if (mode === 'popup') {\n      client?.openSignUp();\n    }\n  }, [client, mode]);\n\n  if (mode === 'embedded') {\n    return <div id=\"authon-signup-container\" />;\n  }\n\n  return null;\n}\n","import { useCallback, useEffect, useRef, useState } from 'react';\nimport { useAuthon } from './useAuthon';\n\nexport function UserButton() {\n  const { user, signOut, openSignIn, isSignedIn } = useAuthon();\n  const [open, setOpen] = useState(false);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n\n  const handleClickOutside = useCallback((e: MouseEvent) => {\n    if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {\n      setOpen(false);\n    }\n  }, []);\n\n  useEffect(() => {\n    if (open) {\n      document.addEventListener('mousedown', handleClickOutside);\n    }\n    return () => document.removeEventListener('mousedown', handleClickOutside);\n  }, [open, handleClickOutside]);\n\n  if (!isSignedIn) {\n    return (\n      <button\n        onClick={() => openSignIn()}\n        style={{\n          padding: '8px 16px',\n          borderRadius: '8px',\n          border: 'none',\n          background: 'linear-gradient(135deg, #7c3aed, #4f46e5)',\n          color: '#fff',\n          cursor: 'pointer',\n          fontSize: '14px',\n          fontWeight: 600,\n        }}\n      >\n        Sign In\n      </button>\n    );\n  }\n\n  const initials = user?.displayName\n    ? user.displayName\n        .split(' ')\n        .map((n) => n[0])\n        .join('')\n        .toUpperCase()\n        .slice(0, 2)\n    : (user?.email?.[0] ?? '?').toUpperCase();\n\n  return (\n    <div ref={dropdownRef} style={{ position: 'relative', display: 'inline-block' }}>\n      <button\n        onClick={() => setOpen((v) => !v)}\n        style={{\n          width: '36px',\n          height: '36px',\n          borderRadius: '50%',\n          border: '2px solid #7c3aed',\n          background: user?.avatarUrl ? 'transparent' : 'linear-gradient(135deg, #7c3aed, #4f46e5)',\n          cursor: 'pointer',\n          padding: 0,\n          overflow: 'hidden',\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          color: '#fff',\n          fontSize: '13px',\n          fontWeight: 700,\n        }}\n      >\n        {user?.avatarUrl ? (\n          <img\n            src={user.avatarUrl}\n            alt={user.displayName ?? 'avatar'}\n            style={{ width: '100%', height: '100%', objectFit: 'cover' }}\n          />\n        ) : (\n          initials\n        )}\n      </button>\n\n      {open && (\n        <div\n          style={{\n            position: 'absolute',\n            right: 0,\n            top: '44px',\n            minWidth: '200px',\n            background: '#fff',\n            border: '1px solid #e5e7eb',\n            borderRadius: '12px',\n            boxShadow: '0 8px 24px rgba(0,0,0,0.12)',\n            zIndex: 9999,\n            overflow: 'hidden',\n          }}\n        >\n          <div\n            style={{\n              padding: '12px 16px',\n              borderBottom: '1px solid #f3f4f6',\n            }}\n          >\n            {user?.displayName && (\n              <div style={{ fontSize: '14px', fontWeight: 600, color: '#111827' }}>\n                {user.displayName}\n              </div>\n            )}\n            {user?.email && (\n              <div style={{ fontSize: '12px', color: '#6b7280', marginTop: '2px' }}>\n                {user.email}\n              </div>\n            )}\n          </div>\n\n          <button\n            onClick={async () => {\n              setOpen(false);\n              await signOut();\n            }}\n            style={{\n              display: 'block',\n              width: '100%',\n              padding: '10px 16px',\n              textAlign: 'left',\n              background: 'none',\n              border: 'none',\n              cursor: 'pointer',\n              fontSize: '14px',\n              color: '#ef4444',\n              fontWeight: 500,\n            }}\n            onMouseEnter={(e) => {\n              (e.currentTarget as HTMLButtonElement).style.background = '#fef2f2';\n            }}\n            onMouseLeave={(e) => {\n              (e.currentTarget as HTMLButtonElement).style.background = 'none';\n            }}\n          >\n            Sign out\n          </button>\n        </div>\n      )}\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { useAuthon } from './useAuthon';\n\ninterface SignedInProps {\n  children: ReactNode;\n}\n\nexport function SignedIn({ children }: SignedInProps) {\n  const { isSignedIn, isLoading } = useAuthon();\n  if (isLoading || !isSignedIn) return null;\n  return <>{children}</>;\n}\n","import type { ReactNode } from 'react';\nimport { useAuthon } from './useAuthon';\n\ninterface SignedOutProps {\n  children: ReactNode;\n}\n\nexport function SignedOut({ children }: SignedOutProps) {\n  const { isSignedIn, isLoading } = useAuthon();\n  if (isLoading || isSignedIn) return null;\n  return <>{children}</>;\n}\n","import type { ReactNode } from 'react';\nimport type { AuthonUser } from '@authon/shared';\nimport { useAuthon } from './useAuthon';\n\ninterface ProtectProps {\n  children: ReactNode;\n  fallback?: ReactNode;\n  condition?: (user: AuthonUser) => boolean;\n}\n\nexport function Protect({ children, fallback = null, condition }: ProtectProps) {\n  const { isSignedIn, isLoading, user } = useAuthon();\n\n  if (isLoading) return null;\n  if (!isSignedIn || !user) return <>{fallback}</>;\n  if (condition && !condition(user)) return <>{fallback}</>;\n\n  return <>{children}</>;\n}\n"],"mappings":"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","names":["useEffect","useRef","jsx","useRef","useEffect","useEffect","jsx","useEffect","useCallback","useEffect","useRef","useState","jsx","useState","useRef","useCallback","useEffect","jsx","Fragment","jsx","Fragment","jsx"]}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@authon/react",
+  "version": "0.1.0",
+  "description": "Authon React SDK — Provider, hooks, and components for React apps",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": ["dist"],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mikusnuz/authon-sdk.git",
+    "directory": "packages/react"
+  },
+  "homepage": "https://github.com/mikusnuz/authon-sdk/tree/main/packages/react",
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": ["authon", "auth", "authentication", "react", "hooks", "sdk"],
+  "dependencies": {
+    "@authon/js": "workspace:*",
+    "@authon/shared": "workspace:*"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "react": "^19.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.9.3"
+  }
+}