@permi/react 0.0.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Permi
+
+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,229 @@
+# @permi/react
+
+React SDK for Permi - OAuth2 + PKCE authentication and wallet management hooks for React applications.
+
+## Installation
+
+```bash
+npm install @permi/react @tanstack/react-query react react-dom
+# or
+pnpm add @permi/react @tanstack/react-query react react-dom
+# or
+yarn add @permi/react @tanstack/react-query react react-dom
+```
+
+## Peer Dependencies
+
+This package requires:
+
+- `react` ^18.0.0
+- `react-dom` ^18.0.0
+- `@tanstack/react-query` ^5.0.0
+
+## Usage
+
+### Setup
+
+Wrap your application with the `PermiProvider`:
+
+```tsx
+import { PermiProvider } from "@permi/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+const queryClient = new QueryClient();
+
+function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <PermiProvider
+        baseUrl="https://permi.xyz"
+        clientId="your-client-id"
+        redirectUri="http://localhost:3000/callback"
+      >
+        <YourApp />
+      </PermiProvider>
+    </QueryClientProvider>
+  );
+}
+```
+
+### Authentication
+
+Use the `useAuth` hook to handle authentication:
+
+```tsx
+import { useAuth } from "@permi/react";
+
+function LoginButton() {
+  const { isAuthenticated, isLoading, login, logout } = useAuth();
+
+  if (isLoading) return <div>Loading...</div>;
+
+  if (isAuthenticated) {
+    return <button onClick={logout}>Logout</button>;
+  }
+
+  return <button onClick={login}>Login</button>;
+}
+```
+
+### Wallet Hooks
+
+#### Get Wallet Address
+
+```tsx
+import { useAddress } from "@permi/react";
+
+function WalletAddress() {
+  const { data: address, isLoading, error } = useAddress();
+
+  if (isLoading) return <div>Loading...</div>;
+  if (error) return <div>Error: {error.message}</div>;
+
+  return <div>Address: {address}</div>;
+}
+```
+
+#### Get Wallet Balance
+
+```tsx
+import { useBalance } from "@permi/react";
+
+function WalletBalance() {
+  const { data: balance, isLoading } = useBalance();
+
+  if (isLoading) return <div>Loading...</div>;
+
+  return (
+    <div>
+      Balance: {balance?.formatted} {balance?.symbol}
+    </div>
+  );
+}
+```
+
+#### Get Viem Account
+
+The `useAccount` hook returns a [viem](https://viem.sh) compatible account that can be used with viem clients:
+
+```tsx
+import { useAccount } from "@permi/react";
+import { createWalletClient, http } from "viem";
+import { mainnet } from "viem/chains";
+
+function SendTransaction() {
+  const { data: account, isLoading } = useAccount();
+
+  const sendTransaction = async () => {
+    if (!account) return;
+
+    const walletClient = createWalletClient({
+      account,
+      chain: mainnet,
+      transport: http(),
+    });
+
+    const hash = await walletClient.sendTransaction({
+      to: "0x...",
+      value: BigInt(1000000000000000000), // 1 ETH
+    });
+
+    console.log("Transaction hash:", hash);
+  };
+
+  if (isLoading) return <div>Loading...</div>;
+
+  return (
+    <button onClick={sendTransaction} disabled={!account}>
+      Send Transaction
+    </button>
+  );
+}
+```
+
+## API Reference
+
+### Components
+
+#### `PermiProvider`
+
+Provider component that must wrap your application.
+
+**Props:**
+
+- `baseUrl: string` - Permi API base URL
+- `clientId: string` - Your OAuth2 client ID
+- `redirectUri: string` - OAuth2 redirect URI
+- `children: ReactNode` - Your application components
+
+### Hooks
+
+#### `useAuth()`
+
+Authentication hook for login/logout functionality.
+
+**Returns:**
+
+- `isAuthenticated: boolean` - Whether user is authenticated
+- `isLoading: boolean` - Whether authentication is loading
+- `user: User | undefined` - Current user info
+- `login: () => void` - Function to initiate login
+- `logout: () => void` - Function to logout
+- `getAccessToken: () => string` - Function to get current access token
+
+#### `useAddress(queryOptions?)`
+
+Hook to get the wallet address.
+
+**Returns:** React Query result with wallet address as `Address`
+
+#### `useBalance(queryOptions?)`
+
+Hook to get the wallet balance.
+
+**Returns:** React Query result with balance data
+
+#### `useAccount()`
+
+Hook to get a viem-compatible account object.
+
+**Returns:**
+
+- `data: Account | undefined` - Viem account object
+- `isLoading: boolean` - Loading state
+
+#### `usePermiContext()`
+
+Access the Permi context directly.
+
+**Returns:**
+
+- `baseUrl: string` - API base URL
+- `getAccessToken: () => string` - Function to get access token
+
+## Advanced Usage
+
+### Custom Query Options
+
+All query hooks accept TanStack Query options:
+
+```tsx
+const { data: address } = useAddress({
+  refetchInterval: 5000, // Refetch every 5 seconds
+  staleTime: 10000, // Consider data stale after 10 seconds
+});
+```
+
+### Error Handling
+
+```tsx
+const { data, error, isError } = useBalance();
+
+if (isError) {
+  console.error("Failed to fetch balance:", error);
+}
+```
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,225 @@
+"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, {
+  PermiProvider: () => PermiProvider,
+  useAccount: () => useAccount,
+  useAddress: () => useAddress,
+  useAuth: () => useAuth2,
+  useBalance: () => useBalance,
+  usePermiContext: () => usePermiContext
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/hooks/index.ts
+var import_react4 = require("react");
+var import_react_query2 = require("@tanstack/react-query");
+var import_accounts = require("viem/accounts");
+var import_hooks = require("@permi/core/hooks");
+var import_core = require("@permi/core");
+
+// src/providers/index.tsx
+var import_react2 = require("react");
+var import_react_query = require("@tanstack/react-query");
+var import_react_oidc_context2 = require("react-oidc-context");
+
+// src/providers/auth.tsx
+var import_react = require("react");
+var import_oidc_client_ts = require("oidc-client-ts");
+var import_react_oidc_context = require("react-oidc-context");
+var import_jsx_runtime = require("react/jsx-runtime");
+var AuthProvider = ({
+  children,
+  clientId,
+  userStore: userStoreProp,
+  baseUrl = "https://permi.xyz"
+}) => {
+  const userStore = (0, import_react.useMemo)(() => {
+    return userStoreProp ?? new import_oidc_client_ts.WebStorageStateStore({
+      store: window.localStorage,
+      prefix: "permi-auth"
+    });
+  }, [userStoreProp]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_oidc_context.AuthProvider,
+    {
+      userManager: new import_oidc_client_ts.UserManager({
+        authority: baseUrl,
+        client_id: clientId,
+        redirect_uri: window.location.origin,
+        silentRequestTimeoutInSeconds: 10,
+        automaticSilentRenew: true,
+        silent_redirect_uri: window.location.origin,
+        metadata: {
+          authorization_endpoint: `${baseUrl}/api/oauth/authorize`,
+          token_endpoint: `${baseUrl}/api/oauth/token`,
+          userinfo_endpoint: `${baseUrl}/api/oauth/userinfo`,
+          issuer: baseUrl
+        },
+        userStore
+      }),
+      onSigninCallback: () => {
+        if (window.location.search.includes("code=")) {
+          window.history.replaceState(
+            {},
+            document.title,
+            window.location.pathname
+          );
+        }
+      },
+      children
+    }
+  );
+};
+
+// src/providers/index.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var PermiContext = (0, import_react2.createContext)(null);
+var usePermiContext = () => {
+  const context = (0, import_react2.useContext)(PermiContext);
+  if (!context) {
+    throw new Error("usePermiContext must be used within PermiProvider");
+  }
+  return context;
+};
+var PermiProvider = ({
+  children,
+  queryClient,
+  ...props
+}) => {
+  const defaultQueryClient = (0, import_react2.useMemo)(() => new import_react_query.QueryClient(), []);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_query.QueryClientProvider, { client: queryClient ?? defaultQueryClient, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AuthProvider, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PermiProviderRaw, { baseUrl: props.baseUrl, children }) }) });
+};
+var PermiProviderRaw = ({
+  children,
+  baseUrl
+}) => {
+  const { user } = (0, import_react_oidc_context2.useAuth)();
+  const contextValue = (0, import_react2.useMemo)(
+    () => ({
+      baseUrl: baseUrl ? `${baseUrl}/api` : void 0,
+      getAccessToken: () => user?.access_token ?? ""
+    }),
+    [user, baseUrl]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PermiContext.Provider, { value: contextValue, children });
+};
+
+// src/hooks/use-auth.ts
+var import_react3 = require("react");
+var import_react_oidc_context3 = require("react-oidc-context");
+var useAuth2 = () => {
+  const auth = (0, import_react_oidc_context3.useAuth)();
+  const { isAuthenticated, isLoading, error } = auth;
+  const signIn = (0, import_react3.useCallback)(() => {
+    if (isLoading || isAuthenticated) {
+      throw new Error("Already authenticated");
+    }
+    return auth.signinRedirect();
+  }, [auth, isLoading, isAuthenticated]);
+  const signOut = (0, import_react3.useCallback)(() => {
+    if (!isAuthenticated) {
+      throw new Error("Not authenticated");
+    }
+    return auth.signoutRedirect();
+  }, [auth, isAuthenticated]);
+  return {
+    signIn,
+    signOut,
+    isAuthenticated,
+    isLoading,
+    error
+  };
+};
+
+// src/hooks/index.ts
+var getOptions = (options, getAccessToken) => {
+  return {
+    ...options,
+    throwOnError: true,
+    headers: {
+      ...options.headers,
+      Authorization: `Bearer ${getAccessToken()}`
+    }
+  };
+};
+var useOptions = (options) => {
+  const { baseUrl, getAccessToken } = usePermiContext();
+  return (0, import_react4.useMemo)(
+    () => getOptions(
+      {
+        baseUrl,
+        ...options ?? {}
+      },
+      getAccessToken
+    ),
+    [options, baseUrl, getAccessToken]
+  );
+};
+var useBalance = (queryOptions) => (0, import_react_query2.useQuery)({ ...(0, import_hooks.balanceOptions)(useOptions()), ...queryOptions });
+var useAddress = (queryOptions) => (0, import_react_query2.useQuery)({ ...(0, import_hooks.addressOptions)(useOptions()), ...queryOptions });
+var useAccount = () => {
+  const { data: address, isLoading: isAddressLoading } = useAddress();
+  const { baseUrl, getAccessToken } = usePermiContext();
+  const getAuthOptions = (options) => {
+    return getOptions(
+      {
+        baseUrl,
+        ...options
+      },
+      getAccessToken
+    );
+  };
+  const account = !address ? void 0 : (0, import_accounts.toAccount)({
+    address,
+    signMessage: async (params) => {
+      return await (0, import_core.signMessage)(
+        getAuthOptions({
+          body: params
+        })
+      ).then((res) => res.data);
+    },
+    signTransaction: async (params) => {
+      return await (0, import_core.signTransaction)(
+        getAuthOptions({ body: params })
+      ).then((res) => res.data);
+    },
+    signTypedData: async (params) => {
+      return await (0, import_core.signTypedData)(getAuthOptions({ body: params })).then(
+        (res) => res.data
+      );
+    }
+  });
+  return {
+    data: account,
+    isLoading: isAddressLoading
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PermiProvider,
+  useAccount,
+  useAddress,
+  useAuth,
+  useBalance,
+  usePermiContext
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/hooks/index.ts","../src/providers/index.tsx","../src/providers/auth.tsx","../src/hooks/use-auth.ts"],"sourcesContent":["export * from \"./hooks\";\nexport { PermiProvider, usePermiContext } from \"./providers\";\n","import { useMemo } from \"react\";\n\nimport { useQuery } from \"@tanstack/react-query\";\n\nimport { toAccount } from \"viem/accounts\";\n\nimport { balanceOptions, addressOptions } from \"@permi/core/hooks\";\nimport {\n  signMessage as coreSignMessage,\n  signTransaction as coreSignTransaction,\n  signTypedData as coreSignTypedData,\n} from \"@permi/core\";\n\nimport { usePermiContext } from \"../providers\";\n\nimport type { AddressData, BalanceData, Options } from \"@permi/core\";\nimport type { TDataShape } from \"@permi/core/client\";\nimport type { Hex, Address } from \"viem\";\n\nconst getOptions = <T extends TDataShape>(\n  options: Options<T>,\n  getAccessToken: () => string,\n): Options<T> => {\n  return {\n    ...options,\n    throwOnError: true,\n    headers: {\n      ...options.headers,\n      Authorization: `Bearer ${getAccessToken()}`,\n    },\n  };\n};\n\n/**\n * Wraps options with auth headers and baseUrl\n */\nconst useOptions = <T extends TDataShape>(options?: Options<T>) => {\n  const { baseUrl, getAccessToken } = usePermiContext();\n\n  return useMemo(\n    () =>\n      getOptions<T>(\n        {\n          baseUrl,\n          ...(options ?? ({} as Options<T>)),\n        },\n        getAccessToken,\n      ),\n    [options, baseUrl, getAccessToken],\n  );\n};\n\n/**\n * Hook to get the balance of the user's app wallet\n */\nexport const useBalance = (queryOptions?: ReturnType<typeof balanceOptions>) =>\n  useQuery({ ...balanceOptions(useOptions<BalanceData>()), ...queryOptions });\n\nexport const useAddress = (queryOptions?: ReturnType<typeof addressOptions>) =>\n  useQuery({ ...addressOptions(useOptions<AddressData>()), ...queryOptions });\n\nexport const useAccount = () => {\n  const { data: address, isLoading: isAddressLoading } = useAddress();\n\n  const { baseUrl, getAccessToken } = usePermiContext();\n\n  const getAuthOptions = <T extends TDataShape>(options: Options<T>) => {\n    return getOptions<T>(\n      {\n        baseUrl,\n        ...options,\n      },\n      getAccessToken,\n    );\n  };\n\n  const account = !address\n    ? undefined\n    : toAccount({\n        address: address as Address,\n        signMessage: async (params) => {\n          return await coreSignMessage(\n            getAuthOptions({\n              body: params,\n            }),\n          ).then((res) => res.data as Hex);\n        },\n        signTransaction: async (params) => {\n          return await coreSignTransaction(\n            getAuthOptions({ body: params }),\n          ).then((res) => res.data as Hex);\n        },\n        signTypedData: async (params) => {\n          return await coreSignTypedData(getAuthOptions({ body: params })).then(\n            (res) => res.data as Hex,\n          );\n        },\n      });\n\n  return {\n    data: account,\n    isLoading: isAddressLoading,\n  };\n};\n\nexport { useAuth } from \"./use-auth\";\n","import React, { useMemo, createContext, useContext } from \"react\";\nimport { QueryClient, QueryClientProvider } from \"@tanstack/react-query\";\nimport { useAuth } from \"react-oidc-context\";\nimport { AuthProvider } from \"./auth\";\nimport { PermiConfig } from \"src/types/config\";\n\ninterface Props extends PermiConfig {\n  children: React.ReactNode;\n  queryClient?: QueryClient;\n}\n\ninterface PermiContextValue {\n  baseUrl?: string;\n  getAccessToken: () => string;\n}\n\nconst PermiContext = createContext<PermiContextValue | null>(null);\n\nexport const usePermiContext = () => {\n  const context = useContext(PermiContext);\n  if (!context) {\n    throw new Error(\"usePermiContext must be used within PermiProvider\");\n  }\n  return context;\n};\n\nexport const PermiProvider: React.FC<Props> = ({\n  children,\n  queryClient,\n  ...props\n}) => {\n  const defaultQueryClient = useMemo(() => new QueryClient(), []);\n\n  return (\n    <QueryClientProvider client={queryClient ?? defaultQueryClient}>\n      <AuthProvider {...props}>\n        <PermiProviderRaw baseUrl={props.baseUrl}>{children}</PermiProviderRaw>\n      </AuthProvider>\n    </QueryClientProvider>\n  );\n};\n\nconst PermiProviderRaw = ({\n  children,\n  baseUrl,\n}: {\n  children: React.ReactNode;\n  baseUrl?: string;\n}) => {\n  const { user } = useAuth();\n\n  const contextValue = useMemo<PermiContextValue>(\n    () => ({\n      baseUrl: baseUrl ? `${baseUrl}/api` : undefined,\n      getAccessToken: () => user?.access_token ?? \"\",\n    }),\n    [user, baseUrl],\n  );\n\n  return (\n    <PermiContext.Provider value={contextValue}>\n      {children}\n    </PermiContext.Provider>\n  );\n};\n","import { ReactNode, useMemo } from \"react\";\n\nimport { StateStore, UserManager, WebStorageStateStore } from \"oidc-client-ts\";\n\nimport { AuthProvider as AuthProviderComponent } from \"react-oidc-context\";\nimport { PermiConfig } from \"src/types/config\";\n\ninterface AuthProviderProps extends PermiConfig {\n  children: ReactNode;\n  userStore?: StateStore;\n}\n\nexport const AuthProvider: React.FC<AuthProviderProps> = ({\n  children,\n  clientId,\n  userStore: userStoreProp,\n  baseUrl = \"https://permi.xyz\",\n}) => {\n  const userStore = useMemo(() => {\n    return (\n      userStoreProp ??\n      new WebStorageStateStore({\n        store: window.localStorage,\n        prefix: \"permi-auth\",\n      })\n    );\n  }, [userStoreProp]);\n\n  return (\n    <AuthProviderComponent\n      userManager={\n        new UserManager({\n          authority: baseUrl,\n          client_id: clientId,\n          redirect_uri: window.location.origin,\n          silentRequestTimeoutInSeconds: 10,\n          automaticSilentRenew: true,\n          silent_redirect_uri: window.location.origin,\n          metadata: {\n            authorization_endpoint: `${baseUrl}/api/oauth/authorize`,\n            token_endpoint: `${baseUrl}/api/oauth/token`,\n            userinfo_endpoint: `${baseUrl}/api/oauth/userinfo`,\n            issuer: baseUrl,\n          },\n          userStore,\n        })\n      }\n      onSigninCallback={() => {\n        if (window.location.search.includes(\"code=\")) {\n          window.history.replaceState(\n            {},\n            document.title,\n            window.location.pathname,\n          );\n        }\n      }}\n    >\n      {children}\n    </AuthProviderComponent>\n  );\n};\n","import { useCallback } from \"react\";\nimport { useAuth as useAuthContext } from \"react-oidc-context\";\n\nexport const useAuth = () => {\n  const auth = useAuthContext();\n  const { isAuthenticated, isLoading, error } = auth;\n\n  const signIn = useCallback(() => {\n    if (isLoading || isAuthenticated) {\n      throw new Error(\"Already authenticated\");\n    }\n    return auth.signinRedirect();\n  }, [auth, isLoading, isAuthenticated]);\n\n  const signOut = useCallback(() => {\n    if (!isAuthenticated) {\n      throw new Error(\"Not authenticated\");\n    }\n    return auth.signoutRedirect();\n  }, [auth, isAuthenticated]);\n\n  return {\n    signIn,\n    signOut,\n    isAuthenticated,\n    isLoading,\n    error,\n  };\n};\n"],"mappings":"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","names":["useAuth","import_react","import_react_query","import_react","import_react_oidc_context","AuthProviderComponent","import_jsx_runtime","import_react","import_react_oidc_context","useAuth","useAuthContext","coreSignMessage","coreSignTransaction","coreSignTypedData"]}

package/dist/index.d.cts

@@ -0,0 +1,63 @@
+import * as viem_accounts from 'viem/accounts';
+import * as viem from 'viem';
+import { Address, Hex } from 'viem';
+import * as _tanstack_react_query from '@tanstack/react-query';
+import { QueryClient } from '@tanstack/react-query';
+import * as _permi_core from '@permi/core';
+import { balanceOptions, addressOptions } from '@permi/core/hooks';
+import React from 'react';
+import * as react_oidc_context from 'react-oidc-context';
+
+declare const useAuth: () => {
+    signIn: () => Promise<void>;
+    signOut: () => Promise<void>;
+    isAuthenticated: boolean;
+    isLoading: boolean;
+    error: react_oidc_context.ErrorContext | undefined;
+};
+
+/**
+ * Hook to get the balance of the user's app wallet
+ */
+declare const useBalance: (queryOptions?: ReturnType<typeof balanceOptions>) => _tanstack_react_query.UseQueryResult<number, _permi_core.BalanceError>;
+declare const useAddress: (queryOptions?: ReturnType<typeof addressOptions>) => _tanstack_react_query.UseQueryResult<string, _permi_core.AddressError>;
+declare const useAccount: () => {
+    data: {
+        address: Address;
+        nonceManager?: viem.NonceManager | undefined;
+        sign?: ((parameters: {
+            hash: viem.Hash;
+        }) => Promise<Hex>) | undefined | undefined;
+        signAuthorization?: ((parameters: viem.AuthorizationRequest) => Promise<viem_accounts.SignAuthorizationReturnType>) | undefined | undefined;
+        signMessage: ({ message }: {
+            message: viem.SignableMessage;
+        }) => Promise<Hex>;
+        signTransaction: <serializer extends viem.SerializeTransactionFn<viem.TransactionSerializable> = viem.SerializeTransactionFn<viem.TransactionSerializable>, transaction extends Parameters<serializer>[0] = Parameters<serializer>[0]>(transaction: transaction, options?: {
+            serializer?: serializer | undefined;
+        } | undefined) => Promise<Hex>;
+        signTypedData: <const typedData extends viem.TypedData | Record<string, unknown>, primaryType extends keyof typedData | "EIP712Domain" = keyof typedData>(parameters: viem.TypedDataDefinition<typedData, primaryType>) => Promise<Hex>;
+        publicKey: Hex;
+        source: string;
+        type: "local";
+    } | undefined;
+    isLoading: boolean;
+};
+
+interface PermiConfig {
+    clientId: string;
+    baseUrl?: string;
+    storagePrefix?: string;
+}
+
+interface Props extends PermiConfig {
+    children: React.ReactNode;
+    queryClient?: QueryClient;
+}
+interface PermiContextValue {
+    baseUrl?: string;
+    getAccessToken: () => string;
+}
+declare const usePermiContext: () => PermiContextValue;
+declare const PermiProvider: React.FC<Props>;
+
+export { PermiProvider, useAccount, useAddress, useAuth, useBalance, usePermiContext };

package/dist/index.d.ts

@@ -0,0 +1,63 @@
+import * as viem_accounts from 'viem/accounts';
+import * as viem from 'viem';
+import { Address, Hex } from 'viem';
+import * as _tanstack_react_query from '@tanstack/react-query';
+import { QueryClient } from '@tanstack/react-query';
+import * as _permi_core from '@permi/core';
+import { balanceOptions, addressOptions } from '@permi/core/hooks';
+import React from 'react';
+import * as react_oidc_context from 'react-oidc-context';
+
+declare const useAuth: () => {
+    signIn: () => Promise<void>;
+    signOut: () => Promise<void>;
+    isAuthenticated: boolean;
+    isLoading: boolean;
+    error: react_oidc_context.ErrorContext | undefined;
+};
+
+/**
+ * Hook to get the balance of the user's app wallet
+ */
+declare const useBalance: (queryOptions?: ReturnType<typeof balanceOptions>) => _tanstack_react_query.UseQueryResult<number, _permi_core.BalanceError>;
+declare const useAddress: (queryOptions?: ReturnType<typeof addressOptions>) => _tanstack_react_query.UseQueryResult<string, _permi_core.AddressError>;
+declare const useAccount: () => {
+    data: {
+        address: Address;
+        nonceManager?: viem.NonceManager | undefined;
+        sign?: ((parameters: {
+            hash: viem.Hash;
+        }) => Promise<Hex>) | undefined | undefined;
+        signAuthorization?: ((parameters: viem.AuthorizationRequest) => Promise<viem_accounts.SignAuthorizationReturnType>) | undefined | undefined;
+        signMessage: ({ message }: {
+            message: viem.SignableMessage;
+        }) => Promise<Hex>;
+        signTransaction: <serializer extends viem.SerializeTransactionFn<viem.TransactionSerializable> = viem.SerializeTransactionFn<viem.TransactionSerializable>, transaction extends Parameters<serializer>[0] = Parameters<serializer>[0]>(transaction: transaction, options?: {
+            serializer?: serializer | undefined;
+        } | undefined) => Promise<Hex>;
+        signTypedData: <const typedData extends viem.TypedData | Record<string, unknown>, primaryType extends keyof typedData | "EIP712Domain" = keyof typedData>(parameters: viem.TypedDataDefinition<typedData, primaryType>) => Promise<Hex>;
+        publicKey: Hex;
+        source: string;
+        type: "local";
+    } | undefined;
+    isLoading: boolean;
+};
+
+interface PermiConfig {
+    clientId: string;
+    baseUrl?: string;
+    storagePrefix?: string;
+}
+
+interface Props extends PermiConfig {
+    children: React.ReactNode;
+    queryClient?: QueryClient;
+}
+interface PermiContextValue {
+    baseUrl?: string;
+    getAccessToken: () => string;
+}
+declare const usePermiContext: () => PermiContextValue;
+declare const PermiProvider: React.FC<Props>;
+
+export { PermiProvider, useAccount, useAddress, useAuth, useBalance, usePermiContext };

package/dist/index.js

@@ -0,0 +1,197 @@
+// src/hooks/index.ts
+import { useMemo as useMemo3 } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { toAccount } from "viem/accounts";
+import { balanceOptions, addressOptions } from "@permi/core/hooks";
+import {
+  signMessage as coreSignMessage,
+  signTransaction as coreSignTransaction,
+  signTypedData as coreSignTypedData
+} from "@permi/core";
+
+// src/providers/index.tsx
+import { useMemo as useMemo2, createContext, useContext } from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { useAuth } from "react-oidc-context";
+
+// src/providers/auth.tsx
+import { useMemo } from "react";
+import { UserManager, WebStorageStateStore } from "oidc-client-ts";
+import { AuthProvider as AuthProviderComponent } from "react-oidc-context";
+import { jsx } from "react/jsx-runtime";
+var AuthProvider = ({
+  children,
+  clientId,
+  userStore: userStoreProp,
+  baseUrl = "https://permi.xyz"
+}) => {
+  const userStore = useMemo(() => {
+    return userStoreProp ?? new WebStorageStateStore({
+      store: window.localStorage,
+      prefix: "permi-auth"
+    });
+  }, [userStoreProp]);
+  return /* @__PURE__ */ jsx(
+    AuthProviderComponent,
+    {
+      userManager: new UserManager({
+        authority: baseUrl,
+        client_id: clientId,
+        redirect_uri: window.location.origin,
+        silentRequestTimeoutInSeconds: 10,
+        automaticSilentRenew: true,
+        silent_redirect_uri: window.location.origin,
+        metadata: {
+          authorization_endpoint: `${baseUrl}/api/oauth/authorize`,
+          token_endpoint: `${baseUrl}/api/oauth/token`,
+          userinfo_endpoint: `${baseUrl}/api/oauth/userinfo`,
+          issuer: baseUrl
+        },
+        userStore
+      }),
+      onSigninCallback: () => {
+        if (window.location.search.includes("code=")) {
+          window.history.replaceState(
+            {},
+            document.title,
+            window.location.pathname
+          );
+        }
+      },
+      children
+    }
+  );
+};
+
+// src/providers/index.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var PermiContext = createContext(null);
+var usePermiContext = () => {
+  const context = useContext(PermiContext);
+  if (!context) {
+    throw new Error("usePermiContext must be used within PermiProvider");
+  }
+  return context;
+};
+var PermiProvider = ({
+  children,
+  queryClient,
+  ...props
+}) => {
+  const defaultQueryClient = useMemo2(() => new QueryClient(), []);
+  return /* @__PURE__ */ jsx2(QueryClientProvider, { client: queryClient ?? defaultQueryClient, children: /* @__PURE__ */ jsx2(AuthProvider, { ...props, children: /* @__PURE__ */ jsx2(PermiProviderRaw, { baseUrl: props.baseUrl, children }) }) });
+};
+var PermiProviderRaw = ({
+  children,
+  baseUrl
+}) => {
+  const { user } = useAuth();
+  const contextValue = useMemo2(
+    () => ({
+      baseUrl: baseUrl ? `${baseUrl}/api` : void 0,
+      getAccessToken: () => user?.access_token ?? ""
+    }),
+    [user, baseUrl]
+  );
+  return /* @__PURE__ */ jsx2(PermiContext.Provider, { value: contextValue, children });
+};
+
+// src/hooks/use-auth.ts
+import { useCallback } from "react";
+import { useAuth as useAuthContext } from "react-oidc-context";
+var useAuth2 = () => {
+  const auth = useAuthContext();
+  const { isAuthenticated, isLoading, error } = auth;
+  const signIn = useCallback(() => {
+    if (isLoading || isAuthenticated) {
+      throw new Error("Already authenticated");
+    }
+    return auth.signinRedirect();
+  }, [auth, isLoading, isAuthenticated]);
+  const signOut = useCallback(() => {
+    if (!isAuthenticated) {
+      throw new Error("Not authenticated");
+    }
+    return auth.signoutRedirect();
+  }, [auth, isAuthenticated]);
+  return {
+    signIn,
+    signOut,
+    isAuthenticated,
+    isLoading,
+    error
+  };
+};
+
+// src/hooks/index.ts
+var getOptions = (options, getAccessToken) => {
+  return {
+    ...options,
+    throwOnError: true,
+    headers: {
+      ...options.headers,
+      Authorization: `Bearer ${getAccessToken()}`
+    }
+  };
+};
+var useOptions = (options) => {
+  const { baseUrl, getAccessToken } = usePermiContext();
+  return useMemo3(
+    () => getOptions(
+      {
+        baseUrl,
+        ...options ?? {}
+      },
+      getAccessToken
+    ),
+    [options, baseUrl, getAccessToken]
+  );
+};
+var useBalance = (queryOptions) => useQuery({ ...balanceOptions(useOptions()), ...queryOptions });
+var useAddress = (queryOptions) => useQuery({ ...addressOptions(useOptions()), ...queryOptions });
+var useAccount = () => {
+  const { data: address, isLoading: isAddressLoading } = useAddress();
+  const { baseUrl, getAccessToken } = usePermiContext();
+  const getAuthOptions = (options) => {
+    return getOptions(
+      {
+        baseUrl,
+        ...options
+      },
+      getAccessToken
+    );
+  };
+  const account = !address ? void 0 : toAccount({
+    address,
+    signMessage: async (params) => {
+      return await coreSignMessage(
+        getAuthOptions({
+          body: params
+        })
+      ).then((res) => res.data);
+    },
+    signTransaction: async (params) => {
+      return await coreSignTransaction(
+        getAuthOptions({ body: params })
+      ).then((res) => res.data);
+    },
+    signTypedData: async (params) => {
+      return await coreSignTypedData(getAuthOptions({ body: params })).then(
+        (res) => res.data
+      );
+    }
+  });
+  return {
+    data: account,
+    isLoading: isAddressLoading
+  };
+};
+export {
+  PermiProvider,
+  useAccount,
+  useAddress,
+  useAuth2 as useAuth,
+  useBalance,
+  usePermiContext
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/index.ts","../src/providers/index.tsx","../src/providers/auth.tsx","../src/hooks/use-auth.ts"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { useQuery } from \"@tanstack/react-query\";\n\nimport { toAccount } from \"viem/accounts\";\n\nimport { balanceOptions, addressOptions } from \"@permi/core/hooks\";\nimport {\n  signMessage as coreSignMessage,\n  signTransaction as coreSignTransaction,\n  signTypedData as coreSignTypedData,\n} from \"@permi/core\";\n\nimport { usePermiContext } from \"../providers\";\n\nimport type { AddressData, BalanceData, Options } from \"@permi/core\";\nimport type { TDataShape } from \"@permi/core/client\";\nimport type { Hex, Address } from \"viem\";\n\nconst getOptions = <T extends TDataShape>(\n  options: Options<T>,\n  getAccessToken: () => string,\n): Options<T> => {\n  return {\n    ...options,\n    throwOnError: true,\n    headers: {\n      ...options.headers,\n      Authorization: `Bearer ${getAccessToken()}`,\n    },\n  };\n};\n\n/**\n * Wraps options with auth headers and baseUrl\n */\nconst useOptions = <T extends TDataShape>(options?: Options<T>) => {\n  const { baseUrl, getAccessToken } = usePermiContext();\n\n  return useMemo(\n    () =>\n      getOptions<T>(\n        {\n          baseUrl,\n          ...(options ?? ({} as Options<T>)),\n        },\n        getAccessToken,\n      ),\n    [options, baseUrl, getAccessToken],\n  );\n};\n\n/**\n * Hook to get the balance of the user's app wallet\n */\nexport const useBalance = (queryOptions?: ReturnType<typeof balanceOptions>) =>\n  useQuery({ ...balanceOptions(useOptions<BalanceData>()), ...queryOptions });\n\nexport const useAddress = (queryOptions?: ReturnType<typeof addressOptions>) =>\n  useQuery({ ...addressOptions(useOptions<AddressData>()), ...queryOptions });\n\nexport const useAccount = () => {\n  const { data: address, isLoading: isAddressLoading } = useAddress();\n\n  const { baseUrl, getAccessToken } = usePermiContext();\n\n  const getAuthOptions = <T extends TDataShape>(options: Options<T>) => {\n    return getOptions<T>(\n      {\n        baseUrl,\n        ...options,\n      },\n      getAccessToken,\n    );\n  };\n\n  const account = !address\n    ? undefined\n    : toAccount({\n        address: address as Address,\n        signMessage: async (params) => {\n          return await coreSignMessage(\n            getAuthOptions({\n              body: params,\n            }),\n          ).then((res) => res.data as Hex);\n        },\n        signTransaction: async (params) => {\n          return await coreSignTransaction(\n            getAuthOptions({ body: params }),\n          ).then((res) => res.data as Hex);\n        },\n        signTypedData: async (params) => {\n          return await coreSignTypedData(getAuthOptions({ body: params })).then(\n            (res) => res.data as Hex,\n          );\n        },\n      });\n\n  return {\n    data: account,\n    isLoading: isAddressLoading,\n  };\n};\n\nexport { useAuth } from \"./use-auth\";\n","import React, { useMemo, createContext, useContext } from \"react\";\nimport { QueryClient, QueryClientProvider } from \"@tanstack/react-query\";\nimport { useAuth } from \"react-oidc-context\";\nimport { AuthProvider } from \"./auth\";\nimport { PermiConfig } from \"src/types/config\";\n\ninterface Props extends PermiConfig {\n  children: React.ReactNode;\n  queryClient?: QueryClient;\n}\n\ninterface PermiContextValue {\n  baseUrl?: string;\n  getAccessToken: () => string;\n}\n\nconst PermiContext = createContext<PermiContextValue | null>(null);\n\nexport const usePermiContext = () => {\n  const context = useContext(PermiContext);\n  if (!context) {\n    throw new Error(\"usePermiContext must be used within PermiProvider\");\n  }\n  return context;\n};\n\nexport const PermiProvider: React.FC<Props> = ({\n  children,\n  queryClient,\n  ...props\n}) => {\n  const defaultQueryClient = useMemo(() => new QueryClient(), []);\n\n  return (\n    <QueryClientProvider client={queryClient ?? defaultQueryClient}>\n      <AuthProvider {...props}>\n        <PermiProviderRaw baseUrl={props.baseUrl}>{children}</PermiProviderRaw>\n      </AuthProvider>\n    </QueryClientProvider>\n  );\n};\n\nconst PermiProviderRaw = ({\n  children,\n  baseUrl,\n}: {\n  children: React.ReactNode;\n  baseUrl?: string;\n}) => {\n  const { user } = useAuth();\n\n  const contextValue = useMemo<PermiContextValue>(\n    () => ({\n      baseUrl: baseUrl ? `${baseUrl}/api` : undefined,\n      getAccessToken: () => user?.access_token ?? \"\",\n    }),\n    [user, baseUrl],\n  );\n\n  return (\n    <PermiContext.Provider value={contextValue}>\n      {children}\n    </PermiContext.Provider>\n  );\n};\n","import { ReactNode, useMemo } from \"react\";\n\nimport { StateStore, UserManager, WebStorageStateStore } from \"oidc-client-ts\";\n\nimport { AuthProvider as AuthProviderComponent } from \"react-oidc-context\";\nimport { PermiConfig } from \"src/types/config\";\n\ninterface AuthProviderProps extends PermiConfig {\n  children: ReactNode;\n  userStore?: StateStore;\n}\n\nexport const AuthProvider: React.FC<AuthProviderProps> = ({\n  children,\n  clientId,\n  userStore: userStoreProp,\n  baseUrl = \"https://permi.xyz\",\n}) => {\n  const userStore = useMemo(() => {\n    return (\n      userStoreProp ??\n      new WebStorageStateStore({\n        store: window.localStorage,\n        prefix: \"permi-auth\",\n      })\n    );\n  }, [userStoreProp]);\n\n  return (\n    <AuthProviderComponent\n      userManager={\n        new UserManager({\n          authority: baseUrl,\n          client_id: clientId,\n          redirect_uri: window.location.origin,\n          silentRequestTimeoutInSeconds: 10,\n          automaticSilentRenew: true,\n          silent_redirect_uri: window.location.origin,\n          metadata: {\n            authorization_endpoint: `${baseUrl}/api/oauth/authorize`,\n            token_endpoint: `${baseUrl}/api/oauth/token`,\n            userinfo_endpoint: `${baseUrl}/api/oauth/userinfo`,\n            issuer: baseUrl,\n          },\n          userStore,\n        })\n      }\n      onSigninCallback={() => {\n        if (window.location.search.includes(\"code=\")) {\n          window.history.replaceState(\n            {},\n            document.title,\n            window.location.pathname,\n          );\n        }\n      }}\n    >\n      {children}\n    </AuthProviderComponent>\n  );\n};\n","import { useCallback } from \"react\";\nimport { useAuth as useAuthContext } from \"react-oidc-context\";\n\nexport const useAuth = () => {\n  const auth = useAuthContext();\n  const { isAuthenticated, isLoading, error } = auth;\n\n  const signIn = useCallback(() => {\n    if (isLoading || isAuthenticated) {\n      throw new Error(\"Already authenticated\");\n    }\n    return auth.signinRedirect();\n  }, [auth, isLoading, isAuthenticated]);\n\n  const signOut = useCallback(() => {\n    if (!isAuthenticated) {\n      throw new Error(\"Not authenticated\");\n    }\n    return auth.signoutRedirect();\n  }, [auth, isAuthenticated]);\n\n  return {\n    signIn,\n    signOut,\n    isAuthenticated,\n    isLoading,\n    error,\n  };\n};\n"],"mappings":"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","names":["useMemo","useMemo","jsx","useMemo","useAuth","useMemo"]}

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@permi/react",
+  "version": "0.0.3",
+  "description": "React SDK for Permi OAuth2 + PKCE authentication and token management",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/permi/permi.git",
+    "directory": "sdks/react"
+  },
+  "author": "Permi",
+  "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",
+    "README.md",
+    "LICENSE"
+  ],
+  "keywords": [
+    "permi",
+    "sdk",
+    "react",
+    "oauth2",
+    "pkce",
+    "authentication"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@tanstack/react-query": "^5.90.12",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "oidc-client-ts": "^3.2.1",
+    "react-oidc-context": "^3.3.0",
+    "viem": "^2.41.2",
+    "@permi/core": "0.0.1"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "19.2.2",
+    "@types/react-dom": "19.2.2",
+    "eslint": "^9",
+    "tsup": "^8.5.1",
+    "typescript": "^5",
+    "@permi/typescript-config": "0.0.0",
+    "@permi/eslint-config": "0.0.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "clean": "rm -rf dist",
+    "types:check": "tsc --noEmit",
+    "knip": "pnpm -w knip --workspace ./sdks/react",
+    "format": "pnpm -w format:dir ./sdks/react",
+    "format:check": "pnpm -w format:check:dir ./sdks/react",
+    "publish:check": "pnpm pack --dry-run"
+  }
+}