@lit-protocol/vincent-app-sdk 2.1.0 → 2.2.1

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+## 2.2.1 (2025-09-25)
+
+### 🧱 Updated Dependencies
+
+- Updated ability-sdk to 2.2.0
+- Updated contracts-sdk to 1.3.0
+
+## 2.2.0 (2025-09-18)
+
+### 🚀 Features
+
+- Add React components implementing common patterns consumers will use for jwt management ([40e984ba](https://github.com/LIT-Protocol/Vincent/commit/40e984ba))
+
+### ❤️ Thank You
+
+- FedericoAmura @FedericoAmura
+
 ## 2.1.0 (2025-09-11)
 
 ### 🚀 Features

package/dist/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 2.2.0 (2025-09-18)
+
+### 🚀 Features
+
+- Add React components implementing common patterns consumers will use for jwt management ([40e984ba](https://github.com/LIT-Protocol/Vincent/commit/40e984ba))
+
+### ❤️ Thank You
+
+- FedericoAmura @FedericoAmura
+
 ## 2.1.0 (2025-09-11)
 
 ### 🚀 Features

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lit-protocol/vincent-app-sdk",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Vincent SDK for browser and backend",
   "author": "Lit Protocol",
   "license": "ISC",
@@ -39,6 +39,11 @@
       "import": "./dist/src/utils/index.js",
       "require": "./dist/src/utils/index.js",
       "types": "./dist/src/utils/index.d.ts"
+    },
+    "./react": {
+      "import": "./dist/src/react/index.js",
+      "require": "./dist/src/react/index.js",
+      "types": "./dist/src/react/index.d.ts"
     }
   },
   "keywords": [
@@ -62,6 +67,14 @@
     "tslib": "^2.8.1",
     "zod": "3.25.64"
   },
+  "peerDependencies": {
+    "react": "^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
   "sideEffects": false,
   "files": [
     "dist/**/*",
@@ -71,8 +84,10 @@
     "@lit-protocol/pkp-ethers": "^7.2.3",
     "@lit-protocol/types": "^7.2.3",
     "@types/express": "^5.0.1",
+    "@types/react": "^19.0.10",
     "chokidar-cli": "^3.0.0",
     "live-server": "^1.2.2",
+    "react": "^19.0.0",
     "typedoc": "0.27.9",
     "typedoc-material-theme": "1.3.0",
     "typedoc-plugin-extras": "^4.0.0",

package/dist/src/jwt/types.d.ts

@@ -69,6 +69,14 @@ export interface PKPAuthenticationMethod {
     type: string;
     value?: string;
 }
+/**
+ *
+ * @category Interfaces
+ */
+export interface AppInfo {
+    id: number;
+    version: number;
+}
 /** All valid Vincent JWT roles
  *
  * @category Interfaces
@@ -98,10 +106,7 @@ export interface VincentJWTPlatformUser extends DecodedJWT {
 export interface VincentJWTAppUser extends DecodedJWT {
     payload: VincentPKPPayload & {
         role: 'app-user';
-        app: {
-            id: number;
-            version: number;
-        };
+        app: AppInfo;
     };
 }
 /**
@@ -139,10 +144,7 @@ export type CreatePlatformUserJWTParams = VincentPKPJWTParams;
  * @category Interfaces
  */
 export interface CreateAppUserJWTParams extends VincentPKPJWTParams {
-    app: {
-        id: number;
-        version: number;
-    };
+    app: AppInfo;
 }
 /**
  *

package/dist/src/jwt/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/jwt/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/jwt/types.ts"],"names":[],"mappings":"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"}

package/dist/src/react/index.d.ts

@@ -0,0 +1,31 @@
+/**
+ * The `react` module provides React-specific utilities and components for Vincent authentication.
+ *
+ * This module exports:
+ * - {@link JwtProvider}: A context provider that manages JWT authentication state
+ * - {@link useJwtContext}: A hook to access the JWT authentication context
+ * - {@link useVincentWebAuthClient}: A hook to get a memoized Vincent WebAuth client instance
+ *
+ * @example
+ * ```tsx
+ * import { JwtProvider, useJwtContext } from '@lit-protocol/vincent-app-sdk/react';
+ *
+ * function App() {
+ *   return (
+ *     <JwtProvider appId="your-vincent-app-id">
+ *       <YourAuthenticatedComponent />
+ *     </JwtProvider>
+ *   );
+ * }
+ *
+ * function YourAuthenticatedComponent() {
+ *   const { authInfo, loading, loginWithJwt, logOut } = useJwtContext();
+ *   // ... your component logic
+ * }
+ * ```
+ *
+ * @packageDocumentation
+ */
+export * from './jwtProvider';
+export * from './useVincentWebAuthClient';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/react/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,cAAc,eAAe,CAAC;AAC9B,cAAc,2BAA2B,CAAC"}

package/dist/src/react/index.js

@@ -0,0 +1,34 @@
+"use strict";
+/**
+ * The `react` module provides React-specific utilities and components for Vincent authentication.
+ *
+ * This module exports:
+ * - {@link JwtProvider}: A context provider that manages JWT authentication state
+ * - {@link useJwtContext}: A hook to access the JWT authentication context
+ * - {@link useVincentWebAuthClient}: A hook to get a memoized Vincent WebAuth client instance
+ *
+ * @example
+ * ```tsx
+ * import { JwtProvider, useJwtContext } from '@lit-protocol/vincent-app-sdk/react';
+ *
+ * function App() {
+ *   return (
+ *     <JwtProvider appId="your-vincent-app-id">
+ *       <YourAuthenticatedComponent />
+ *     </JwtProvider>
+ *   );
+ * }
+ *
+ * function YourAuthenticatedComponent() {
+ *   const { authInfo, loading, loginWithJwt, logOut } = useJwtContext();
+ *   // ... your component logic
+ * }
+ * ```
+ *
+ * @packageDocumentation
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./jwtProvider"), exports);
+tslib_1.__exportStar(require("./useVincentWebAuthClient"), exports);
+//# sourceMappingURL=index.js.map

package/dist/src/react/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/react/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;;;AAEH,wDAA8B;AAC9B,oEAA0C"}

package/dist/src/react/jwtProvider.d.ts

@@ -0,0 +1,166 @@
+import type { JSX, ReactNode } from 'react';
+import React from 'react';
+import type { IRelayPKP } from '@lit-protocol/types';
+import type { AppInfo, PKPAuthenticationMethod } from '../jwt/types';
+/**
+ * Interface representing the authenticated user information.
+ *
+ * Contains details about the application, authentication method, JWT token,
+ * and the PKP (Programmable Key Pair) associated with the authenticated user.
+ */
+export interface AuthInfo {
+    app: AppInfo;
+    authentication: PKPAuthenticationMethod;
+    jwt: string;
+    pkp: IRelayPKP;
+}
+interface JwtContextType {
+    authInfo: AuthInfo | null;
+    loading: boolean;
+    connect: (redirectUri: string) => void;
+    loginWithJwt: () => void;
+    logOut: () => void;
+}
+/**
+ * React Context that exposes JWT authentication state and actions for Vincent apps.
+ *
+ * This context carries a value of type `JwtContextType` with:
+ * - `authInfo`: `AuthInfo | null` — Authenticated user/application information or `null` when not authenticated.
+ * - `loading`: `boolean` — Indicates whether an authentication operation (login/logout/validation) is in progress.
+ * - `connect(redirectUri: string)`: Redirects the user to the Vincent consent page to initiate authentication.
+ * - `loginWithJwt()`: Attempts to retrieve and validate a JWT from Vincent dashboard.
+ * - `logOut()`: Removes the stored JWT and resets the authentication state.
+ *
+ * The provider component `JwtProvider` must wrap your component tree for this context to be available and for
+ * `useJwtContext` to work in your components.
+ *
+ * @example
+ * ```tsx
+ * <JwtProvider appId={123}>
+ *   <App />
+ * </JwtProvider>
+ * ```
+ *
+ * @see JwtProvider
+ * @see useJwtContext
+ */
+export declare const JwtContext: React.Context<JwtContextType>;
+/**
+ * React hook to access the JWT authentication context.
+ *
+ * This hook provides access to authentication state and methods for managing JWT-based
+ * authentication in Vincent applications. It must be used within a component that is a
+ * descendant of JwtProvider.
+ *
+ * @example
+ * ```tsx
+ * import { useJwtContext } from '@lit-protocol/vincent-app-sdk/react';
+ *
+ * function AuthenticatedComponent() {
+ *   const { authInfo, loading, loginWithJwt, logOut } = useJwtContext();
+ *
+ *   if (loading) {
+ *     return <div>Loading authentication...</div>;
+ *   }
+ *
+ *   if (!authInfo) {
+ *     return (
+ *       <button onClick={loginWithJwt}>
+ *         Login
+ *       </button>
+ *     );
+ *   }
+ *
+ *   return (
+ *     <div>
+ *       <p>Logged in with PKP: {authInfo.pkp.ethAddress}</p>
+ *       <button onClick={logOut}>Logout</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @returns The JWT context containing authentication state and methods
+ *
+ * @see JwtContext
+ * @see JwtProvider
+ */
+export declare function useJwtContext(): JwtContextType;
+/**
+ * Interface for storage providers that can be used with JwtProvider.
+ *
+ * This allows you to use custom storage solutions (like AsyncStorage in React Native)
+ * instead of the default localStorage.
+ */
+export interface AsyncStorage {
+    getItem: (key: string) => Promise<string | null> | string | null;
+    setItem: (key: string, value: string) => Promise<void> | void;
+    removeItem: (key: string) => Promise<void> | void;
+}
+interface JwtProviderProps {
+    children: ReactNode;
+    appId: number;
+    storage?: AsyncStorage;
+    storageKeyBuilder?: (appId: number) => string;
+}
+/**
+ * React component that provides JWT authentication capabilities for Vincent applications.
+ *
+ * The JwtProvider handles JWT token management, including
+ * - Retrieving and validating JWTs from the Vincent consent page
+ * - Storing and retrieving JWTs from persistent storage
+ * - Providing authentication state and methods to child components
+ * - Managing login/logout flows
+ *
+ * It uses the Context API to make authentication information and methods available
+ * throughout your application without prop drilling.
+ *
+ * @example
+ * ```tsx
+ * import { JwtProvider } from '@lit-protocol/vincent-app-sdk/react';
+ *
+ * function App() {
+ *   return (
+ *     <JwtProvider appId=<YOUR_VINCENT_APP_ID>>
+ *       <YourApplication />
+ *     </JwtProvider>
+ *   );
+ * }
+ *
+ * // In a child component:
+ * function LoginButton() {
+ *   const { authInfo, loading, connect, logOut } = useJwtContext();
+ *
+ *   if (loading) return <div>Loading...</div>;
+ *
+ *   if (authInfo) {
+ *     return (
+ *       <div>
+ *         <p>Logged in as: {authInfo.pkp.ethAddress}</p>
+ *         <button onClick={logOut}>Log out</button>
+ *       </div>
+ *     );
+ *   }
+ *
+ *   return (
+ *     <button
+ *       onClick={() => connect(window.location.href)}
+ *     >
+ *       Login with Vincent
+ *     </button>
+ *   );
+ * }
+ * ```
+ *
+ * @param props - Props for the JwtProvider component
+ * @param props.children - Child components that will have access to the JWT context
+ * @param props.appId - Your Vincent App Id
+ * @param props.storage - Optional custom storage implementation (defaults to localStorage)
+ * @param props.storageKeyBuilder - Optional function to customize the storage key for JWT tokens
+ *
+ * @see JwtContext
+ * @see useJwtContext
+ */
+export declare const JwtProvider: ({ children, appId, storage, storageKeyBuilder, }: JwtProviderProps) => JSX.Element;
+export {};
+//# sourceMappingURL=jwtProvider.d.ts.map

package/dist/src/react/jwtProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"jwtProvider.d.ts","sourceRoot":"","sources":["../../../src/react/jwtProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,KAA+E,MAAM,OAAO,CAAC;AAEpG,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAErD,OAAO,KAAK,EAAE,OAAO,EAAE,uBAAuB,EAAE,MAAM,cAAc,CAAC;AAKrE;;;;;GAKG;AACH,MAAM,WAAW,QAAQ;IACvB,GAAG,EAAE,OAAO,CAAC;IACb,cAAc,EAAE,uBAAuB,CAAC;IACxC,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,SAAS,CAAC;CAChB;AAED,UAAU,cAAc;IACtB,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAMD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,UAAU,+BAMrB,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,wBAAgB,aAAa,IAAI,cAAc,CAE9C;AAED;;;;;GAKG;AACH,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,MAAM,GAAG,IAAI,CAAC;IACjE,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAC9D,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;CACnD;AAED,UAAU,gBAAgB;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CAC/C;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyDG;AACH,eAAO,MAAM,WAAW,GAAI,kDAKzB,gBAAgB,KAAG,GAAG,CAAC,OAgGzB,CAAC"}

package/dist/src/react/jwtProvider.js

@@ -0,0 +1,223 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.JwtProvider = exports.JwtContext = void 0;
+exports.useJwtContext = useJwtContext;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const jwt_1 = require("../jwt");
+const useVincentWebAuthClient_1 = require("./useVincentWebAuthClient");
+function jwtContextNotInitialized() {
+    throw new Error('JwtContext must be used within an JwtProvider');
+}
+/**
+ * React Context that exposes JWT authentication state and actions for Vincent apps.
+ *
+ * This context carries a value of type `JwtContextType` with:
+ * - `authInfo`: `AuthInfo | null` — Authenticated user/application information or `null` when not authenticated.
+ * - `loading`: `boolean` — Indicates whether an authentication operation (login/logout/validation) is in progress.
+ * - `connect(redirectUri: string)`: Redirects the user to the Vincent consent page to initiate authentication.
+ * - `loginWithJwt()`: Attempts to retrieve and validate a JWT from Vincent dashboard.
+ * - `logOut()`: Removes the stored JWT and resets the authentication state.
+ *
+ * The provider component `JwtProvider` must wrap your component tree for this context to be available and for
+ * `useJwtContext` to work in your components.
+ *
+ * @example
+ * ```tsx
+ * <JwtProvider appId={123}>
+ *   <App />
+ * </JwtProvider>
+ * ```
+ *
+ * @see JwtProvider
+ * @see useJwtContext
+ */
+exports.JwtContext = (0, react_1.createContext)({
+    authInfo: null,
+    loading: false,
+    connect: jwtContextNotInitialized,
+    loginWithJwt: jwtContextNotInitialized,
+    logOut: jwtContextNotInitialized,
+});
+/**
+ * React hook to access the JWT authentication context.
+ *
+ * This hook provides access to authentication state and methods for managing JWT-based
+ * authentication in Vincent applications. It must be used within a component that is a
+ * descendant of JwtProvider.
+ *
+ * @example
+ * ```tsx
+ * import { useJwtContext } from '@lit-protocol/vincent-app-sdk/react';
+ *
+ * function AuthenticatedComponent() {
+ *   const { authInfo, loading, loginWithJwt, logOut } = useJwtContext();
+ *
+ *   if (loading) {
+ *     return <div>Loading authentication...</div>;
+ *   }
+ *
+ *   if (!authInfo) {
+ *     return (
+ *       <button onClick={loginWithJwt}>
+ *         Login
+ *       </button>
+ *     );
+ *   }
+ *
+ *   return (
+ *     <div>
+ *       <p>Logged in with PKP: {authInfo.pkp.ethAddress}</p>
+ *       <button onClick={logOut}>Logout</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @returns The JWT context containing authentication state and methods
+ *
+ * @see JwtContext
+ * @see JwtProvider
+ */
+function useJwtContext() {
+    return (0, react_1.useContext)(exports.JwtContext);
+}
+/**
+ * React component that provides JWT authentication capabilities for Vincent applications.
+ *
+ * The JwtProvider handles JWT token management, including
+ * - Retrieving and validating JWTs from the Vincent consent page
+ * - Storing and retrieving JWTs from persistent storage
+ * - Providing authentication state and methods to child components
+ * - Managing login/logout flows
+ *
+ * It uses the Context API to make authentication information and methods available
+ * throughout your application without prop drilling.
+ *
+ * @example
+ * ```tsx
+ * import { JwtProvider } from '@lit-protocol/vincent-app-sdk/react';
+ *
+ * function App() {
+ *   return (
+ *     <JwtProvider appId=<YOUR_VINCENT_APP_ID>>
+ *       <YourApplication />
+ *     </JwtProvider>
+ *   );
+ * }
+ *
+ * // In a child component:
+ * function LoginButton() {
+ *   const { authInfo, loading, connect, logOut } = useJwtContext();
+ *
+ *   if (loading) return <div>Loading...</div>;
+ *
+ *   if (authInfo) {
+ *     return (
+ *       <div>
+ *         <p>Logged in as: {authInfo.pkp.ethAddress}</p>
+ *         <button onClick={logOut}>Log out</button>
+ *       </div>
+ *     );
+ *   }
+ *
+ *   return (
+ *     <button
+ *       onClick={() => connect(window.location.href)}
+ *     >
+ *       Login with Vincent
+ *     </button>
+ *   );
+ * }
+ * ```
+ *
+ * @param props - Props for the JwtProvider component
+ * @param props.children - Child components that will have access to the JWT context
+ * @param props.appId - Your Vincent App Id
+ * @param props.storage - Optional custom storage implementation (defaults to localStorage)
+ * @param props.storageKeyBuilder - Optional function to customize the storage key for JWT tokens
+ *
+ * @see JwtContext
+ * @see useJwtContext
+ */
+const JwtProvider = ({ children, appId, storage = localStorage, storageKeyBuilder = (appId) => `vincent-${appId}-jwt`, }) => {
+    const appJwtKey = storageKeyBuilder(appId);
+    const vincentWebAppClient = (0, useVincentWebAuthClient_1.useVincentWebAuthClient)(appId);
+    const [authInfo, setAuthInfo] = (0, react_1.useState)(null);
+    const [loading, setLoading] = (0, react_1.useState)(true);
+    const logOut = (0, react_1.useCallback)(async () => {
+        try {
+            setLoading(true);
+            await storage.removeItem(appJwtKey);
+            setAuthInfo(null);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [appJwtKey, storage]);
+    const connect = (0, react_1.useCallback)((redirectUri) => {
+        // Redirect to Vincent Auth consent page with appId and version
+        vincentWebAppClient.redirectToConnectPage({
+            // connectPageUrl: `http://localhost:5173/`,
+            redirectUri,
+        });
+    }, [vincentWebAppClient]);
+    const getJwt = (0, react_1.useCallback)(async () => {
+        if (vincentWebAppClient.uriContainsVincentJWT()) {
+            const jwtResult = await vincentWebAppClient.decodeVincentJWTFromUri(window.location.origin);
+            if (!jwtResult) {
+                return null;
+            }
+            const { decodedJWT, jwtStr } = jwtResult;
+            await storage.setItem(appJwtKey, jwtStr);
+            vincentWebAppClient.removeVincentJWTFromURI();
+            return { jwtStr, decodedJWT };
+        }
+        const existingJwtStr = await storage.getItem(appJwtKey);
+        if (!existingJwtStr) {
+            return null;
+        }
+        const decodedJWT = await (0, jwt_1.verifyVincentAppUserJWT)({
+            expectedAudience: window.location.origin,
+            jwt: existingJwtStr,
+            requiredAppId: appId,
+        });
+        return { jwtStr: existingJwtStr, decodedJWT };
+    }, [appJwtKey, storage, vincentWebAppClient]);
+    const loginWithJwt = (0, react_1.useCallback)(async () => {
+        try {
+            setLoading(true);
+            const jwtResult = await getJwt();
+            if (!jwtResult) {
+                throw new Error('Could not get JWT');
+            }
+            const { decodedJWT, jwtStr } = jwtResult;
+            setAuthInfo({
+                app: decodedJWT.payload.app,
+                authentication: decodedJWT.payload.authentication,
+                jwt: jwtStr,
+                pkp: decodedJWT.payload.pkpInfo,
+            });
+        }
+        catch (error) {
+            console.error(`Error logging in with JWT. Need to relogin: ${error.message}`);
+            await logOut();
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [getJwt, logOut]);
+    const value = (0, react_1.useMemo)(() => ({
+        authInfo,
+        connect,
+        loading,
+        loginWithJwt,
+        logOut,
+    }), [authInfo, connect, loading, loginWithJwt, logOut]);
+    (0, react_1.useEffect)(() => {
+        void loginWithJwt();
+    }, [loginWithJwt]);
+    return react_1.default.createElement(exports.JwtContext.Provider, { value: value }, children);
+};
+exports.JwtProvider = JwtProvider;
+//# sourceMappingURL=jwtProvider.js.map

package/dist/src/react/jwtProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jwtProvider.js","sourceRoot":"","sources":["../../../src/react/jwtProvider.tsx"],"names":[],"mappings":"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"}

package/dist/src/react/useVincentWebAuthClient.d.ts

@@ -0,0 +1,46 @@
+/**
+ * React hook that provides a memoized VincentWebAppClient instance.
+ *
+ * This hook creates a VincentWebAppClient instance using the provided App ID and memoizes it
+ * to prevent unnecessary re-creation of the client on each render. The client is only
+ * re-created when the App ID changes.
+ *
+ * The VincentWebAppClient provides methods for authentication, JWT handling, and redirecting
+ * to consent pages in Vincent applications.
+ *
+ * @example
+ * ```typescript
+ * import { useVincentWebAuthClient } from '@lit-protocol/vincent-app-sdk/react';
+ *
+ * function MyComponent() {
+ *   // Create a memoized Vincent Web App client
+ *   const vincentClient = useVincentWebAuthClient('my-app-id');
+ *
+ *   // Check if the user is logging in
+ *   useEffect(() => {
+ *     if (vincentClient.isLogin()) {
+ *       const jwtResult = vincentClient.decodeVincentLoginJWT(window.location.origin);
+ *       // Handle successful login
+ *       console.log('User logged in with PKP address:', jwtResult.pkpAddress);
+ *
+ *       // Remove JWT from URI to prevent issues with browser history
+ *       vincentClient.removeLoginJWTFromURI();
+ *     }
+ *   }, [vincentClient]);
+ *
+ *   // Function to handle the login button click
+ *   const handleLogin = () => {
+ *     vincentClient.redirectToConsentPage({
+ *       redirectUri: window.location.href,
+ *     });
+ *   };
+ *
+ *   return <button onClick={handleLogin}>Login with Vincent</button>;
+ * }
+ * ```
+ *
+ * @param appId - The unique identifier for your Vincent application
+ * @returns A memoized VincentWebAppClient instance
+ */
+export declare const useVincentWebAuthClient: (appId: number) => import("../webAuthClient").WebAuthClient;
+//# sourceMappingURL=useVincentWebAuthClient.d.ts.map

package/dist/src/react/useVincentWebAuthClient.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVincentWebAuthClient.d.ts","sourceRoot":"","sources":["../../../src/react/useVincentWebAuthClient.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,eAAO,MAAM,uBAAuB,GAAI,OAAO,MAAM,6CAEpD,CAAC"}

package/dist/src/react/useVincentWebAuthClient.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useVincentWebAuthClient = void 0;
+const react_1 = require("react");
+const webAuthClient_1 = require("../webAuthClient");
+/**
+ * React hook that provides a memoized VincentWebAppClient instance.
+ *
+ * This hook creates a VincentWebAppClient instance using the provided App ID and memoizes it
+ * to prevent unnecessary re-creation of the client on each render. The client is only
+ * re-created when the App ID changes.
+ *
+ * The VincentWebAppClient provides methods for authentication, JWT handling, and redirecting
+ * to consent pages in Vincent applications.
+ *
+ * @example
+ * ```typescript
+ * import { useVincentWebAuthClient } from '@lit-protocol/vincent-app-sdk/react';
+ *
+ * function MyComponent() {
+ *   // Create a memoized Vincent Web App client
+ *   const vincentClient = useVincentWebAuthClient('my-app-id');
+ *
+ *   // Check if the user is logging in
+ *   useEffect(() => {
+ *     if (vincentClient.isLogin()) {
+ *       const jwtResult = vincentClient.decodeVincentLoginJWT(window.location.origin);
+ *       // Handle successful login
+ *       console.log('User logged in with PKP address:', jwtResult.pkpAddress);
+ *
+ *       // Remove JWT from URI to prevent issues with browser history
+ *       vincentClient.removeLoginJWTFromURI();
+ *     }
+ *   }, [vincentClient]);
+ *
+ *   // Function to handle the login button click
+ *   const handleLogin = () => {
+ *     vincentClient.redirectToConsentPage({
+ *       redirectUri: window.location.href,
+ *     });
+ *   };
+ *
+ *   return <button onClick={handleLogin}>Login with Vincent</button>;
+ * }
+ * ```
+ *
+ * @param appId - The unique identifier for your Vincent application
+ * @returns A memoized VincentWebAppClient instance
+ */
+const useVincentWebAuthClient = (appId) => {
+    return (0, react_1.useMemo)(() => (0, webAuthClient_1.getWebAuthClient)({ appId }), [appId]);
+};
+exports.useVincentWebAuthClient = useVincentWebAuthClient;
+//# sourceMappingURL=useVincentWebAuthClient.js.map

package/dist/src/react/useVincentWebAuthClient.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVincentWebAuthClient.js","sourceRoot":"","sources":["../../../src/react/useVincentWebAuthClient.ts"],"names":[],"mappings":";;;AAAA,iCAAgC;AAEhC,oDAAoD;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACI,MAAM,uBAAuB,GAAG,CAAC,KAAa,EAAE,EAAE;IACvD,OAAO,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,IAAA,gCAAgB,EAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;AAC7D,CAAC,CAAC;AAFW,QAAA,uBAAuB,2BAElC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lit-protocol/vincent-app-sdk",
-  "version": "2.1.0",
+  "version": "2.2.1",
   "description": "Vincent SDK for browser and backend",
   "author": "Lit Protocol",
   "license": "ISC",
@@ -38,6 +38,11 @@
       "import": "./dist/src/utils/index.js",
       "require": "./dist/src/utils/index.js",
       "types": "./dist/src/utils/index.d.ts"
+    },
+    "./react": {
+      "import": "./dist/src/react/index.js",
+      "require": "./dist/src/react/index.js",
+      "types": "./dist/src/react/index.d.ts"
     }
   },
   "keywords": [
@@ -53,8 +58,16 @@
     "ethers": "5.8.0",
     "tslib": "^2.8.1",
     "zod": "3.25.64",
-    "@lit-protocol/vincent-ability-sdk": "2.1.0",
-    "@lit-protocol/vincent-contracts-sdk": "1.2.0"
+    "@lit-protocol/vincent-ability-sdk": "2.2.0",
+    "@lit-protocol/vincent-contracts-sdk": "1.3.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
   },
   "sideEffects": false,
   "files": [
@@ -65,8 +78,10 @@
     "@lit-protocol/pkp-ethers": "^7.2.3",
     "@lit-protocol/types": "^7.2.3",
     "@types/express": "^5.0.1",
+    "@types/react": "^19.0.10",
     "chokidar-cli": "^3.0.0",
     "live-server": "^1.2.2",
+    "react": "^19.0.0",
     "typedoc": "0.27.9",
     "typedoc-material-theme": "1.3.0",
     "typedoc-plugin-extras": "^4.0.0",