Feat/v10 hooks

package.json

@@ -53,7 +53,10 @@
   },
   "peerDependencies": {
     "@babel/runtime": "^7.x",
-    "react-native": "*"
+    "react-native": "*",
+    "react": ">=18",
+    "react-dom": ">=18",
+    "vue": ">=3.x"
   },
   "devDependencies": {
     "@babel/runtime": "^7.27.6",
@@ -64,16 +67,19 @@
     "@types/lodash.merge": "^4.6.9",
     "@types/lodash.unionby": "^4.8.9",
     "@types/node": "^22",
+    "@types/react": "^19.1.10",
     "@types/react-native": "^0.73.0",
     "@types/urijs": "^1.19.25",
     "@web3auth/base": "^9.7.0",
     "eslint": "^9.29.0",
     "husky": "^9.1.7",
     "lint-staged": "^16.1.2",
     "prettier": "^3.6.1",
+    "react": "^19.1.1",
     "react-native": "~0.80.0",
     "rimraf": "^6.0.1",
-    "typescript": "^5.8.3"
+    "typescript": "^5.8.3",
+    "vue": "^3.x"
   },
   "engines": {
     "node": ">=18.x",

src/base/hooks/index.ts

@@ -0,0 +1,11 @@
+import { type IProvider } from "@web3auth/base";
+
+export interface IBaseWeb3AuthHookContext {
+  isInitialized: boolean;
+  isInitializing: boolean;
+  initError: unknown;
+  isConnected: boolean;
+  isMFAEnabled: boolean;
+  provider: IProvider | null;
+  setIsMFAEnabled(isMFAEnabled: boolean): void;
+}

src/base/index.ts

@@ -0,0 +1 @@
+export * from "./hooks";

src/index.ts

@@ -1,3 +1,4 @@
+export * from "./base";
 export * from "./types/interface";
 export * from "./types/IWebBrowser";
 export { default } from "./Web3Auth";

src/react/context/web3AuthInnerContext.ts

@@ -0,0 +1,69 @@
+import { type IProvider } from "@web3auth/base";
+import { createContext, createElement, PropsWithChildren, useEffect, useMemo, useState } from "react";
+
+import Web3Auth from "../../Web3Auth";
+import { IWeb3AuthInnerContext, Web3AuthProviderProps } from "../interfaces";
+
+export const Web3AuthInnerContext = createContext<IWeb3AuthInnerContext>(null);
+
+export function Web3AuthInnerProvider(params: PropsWithChildren<Web3AuthProviderProps>) {
+  const { children, config, webBrowser, storage } = params;
+  const { web3AuthOptions } = config;
+
+  const [isInitializing, setIsInitializing] = useState<boolean>(false);
+  const [initError, setInitError] = useState<Error | null>(null);
+  const [provider, setProvider] = useState<IProvider | null>(null);
+  const [isInitialized, setIsInitialized] = useState<boolean>(false);
+  const [isMFAEnabled, setIsMFAEnabled] = useState<boolean>(false);
+
+  const web3Auth = useMemo(() => {
+    setProvider(null);
+
+    return new Web3Auth(webBrowser, storage, web3AuthOptions);
+  }, [web3AuthOptions, webBrowser, storage]);
+
+  const isConnected = web3Auth.connected;
+
+  useEffect(() => {
+    const controller = new AbortController();
+    async function init() {
+      try {
+        setInitError(null);
+        setIsInitializing(true);
+        await web3Auth.init();
+        setIsInitialized(true);
+      } catch (error) {
+        setInitError(error as Error);
+      } finally {
+        setIsInitializing(false);
+      }
+    }
+
+    if (web3Auth) init();
+
+    return () => {
+      controller.abort();
+    };
+  }, [web3Auth, config]);
+
+  useEffect(() => {
+    if (isConnected) {
+      setProvider(web3Auth.provider);
+    }
+  }, [isConnected]);
+
+  const value = useMemo(() => {
+    return {
+      web3Auth,
+      isConnected,
+      isInitialized,
+      provider,
+      isInitializing,
+      initError,
+      isMFAEnabled,
+      setIsMFAEnabled,
+    };
+  }, [web3Auth, isConnected, isMFAEnabled, setIsMFAEnabled, isInitialized, provider, isInitializing, initError]);
+
+  return createElement(Web3AuthInnerContext.Provider, { value }, children);
+}

src/react/hooks/index.ts

@@ -0,0 +1,8 @@
+export * from "./useEnableMFA";
+export * from "./useIdentityToken";
+export * from "./useManageMFA";
+export * from "./useSignatureRequest";
+export * from "./useWalletUI";
+export * from "./useWeb3AuthConnect";
+export * from "./useWeb3AuthDisconnect";
+export * from "./useWeb3AuthUser";

src/react/hooks/useEnableMFA.ts

@@ -0,0 +1,31 @@
+import { useCallback, useState } from "react";
+
+import { Web3authRNError } from "../../errors";
+import { useWeb3AuthInner } from "./useWeb3AuthInner";
+
+export interface IUseEnableMFA {
+  loading: boolean;
+  error: Web3authRNError | null;
+  enableMFA(): Promise<void>;
+}
+
+export const useEnableMFA = (): IUseEnableMFA => {
+  const { web3Auth } = useWeb3AuthInner();
+
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Web3authRNError | null>(null);
+
+  const enableMFA = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      await web3Auth.enableMFA();
+    } catch (error) {
+      setError(error as Web3authRNError);
+    } finally {
+      setLoading(false);
+    }
+  }, [web3Auth]);
+
+  return { loading, error, enableMFA };
+};

src/react/hooks/useIdentityToken.ts

@@ -0,0 +1,43 @@
+import { useCallback, useEffect, useState } from "react";
+
+import { Web3authRNError } from "../../errors";
+import { useWeb3AuthInner } from "./useWeb3AuthInner";
+
+export interface IUseIdentityToken {
+  loading: boolean;
+  error: Web3authRNError | null;
+  token: string | null;
+  getIdentityToken: () => Promise<string | null>;
+}
+
+export const useIdentityToken = () => {
+  const { web3Auth, isConnected } = useWeb3AuthInner();
+
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Web3authRNError | null>(null);
+  const [token, setToken] = useState<string | null>(null);
+
+  const getIdentityToken = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const userAuthInfo = web3Auth.userInfo();
+      if (userAuthInfo?.idToken) {
+        setToken(userAuthInfo.idToken);
+      }
+      return userAuthInfo?.idToken;
+    } catch (error) {
+      setError(error as Web3authRNError);
+    } finally {
+      setLoading(false);
+    }
+  }, [web3Auth]);
+
+  useEffect(() => {
+    if (!isConnected && token) {
+      setToken(null);
+    }
+  }, [isConnected, token]);
+
+  return { loading, error, token, getIdentityToken };
+};

src/react/hooks/useManageMFA.ts

@@ -0,0 +1,31 @@
+import { useCallback, useState } from "react";
+
+import { Web3authRNError } from "../../errors";
+import { useWeb3AuthInner } from "./useWeb3AuthInner";
+
+export interface IUseManageMFA {
+  loading: boolean;
+  error: Web3authRNError | null;
+  manageMFA(): Promise<void>;
+}
+
+export const useManageMFA = (): IUseManageMFA => {
+  const { web3Auth } = useWeb3AuthInner();
+
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Web3authRNError | null>(null);
+
+  const manageMFA = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      await web3Auth.manageMFA();
+    } catch (error) {
+      setError(error as Web3authRNError);
+    } finally {
+      setLoading(false);
+    }
+  }, [web3Auth]);
+
+  return { loading, error, manageMFA };
+};

src/react/hooks/useSignatureRequest.ts

@@ -0,0 +1,34 @@
+import { useCallback, useState } from "react";
+
+import { Web3authRNError } from "../../errors";
+import { useWeb3AuthInner } from "./useWeb3AuthInner";
+
+export interface IUseSignatureRequest {
+  loading: boolean;
+  error: Web3authRNError | null;
+  request(method: string, params: unknown[], path?: string): Promise<string>;
+}
+
+export const useSignatureRequest = (): IUseSignatureRequest => {
+  const { web3Auth } = useWeb3AuthInner();
+
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Web3authRNError | null>(null);
+
+  const request = useCallback(
+    async (method: string, params: unknown[], path?: string) => {
+      setLoading(true);
+      setError(null);
+      try {
+        return await web3Auth.request(method, params, path);
+      } catch (error) {
+        setError(error as Web3authRNError);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [web3Auth]
+  );
+
+  return { loading, error, request };
+};

src/react/hooks/useWalletUI.ts

@@ -0,0 +1,34 @@
+import { useCallback, useState } from "react";
+
+import { InitializationError, Web3authRNError } from "../../errors";
+import { useWeb3AuthInner } from "./useWeb3AuthInner";
+
+export interface IUseWalletUI {
+  loading: boolean;
+  error: Web3authRNError | null;
+  showWalletUI: (path?: string) => Promise<void>;
+}
+
+export const useWalletUI = (): IUseWalletUI => {
+  const { web3Auth, isConnected } = useWeb3AuthInner();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Web3authRNError | null>(null);
+
+  const showWalletUI = useCallback(
+    async (path?: string) => {
+      setLoading(true);
+      setError(null);
+      try {
+        if (!isConnected) throw InitializationError.notInitialized();
+        await web3Auth.launchWalletServices(path);
+      } catch (error) {
+        setError(error as Web3authRNError);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [isConnected, web3Auth]
+  );
+
+  return { loading, error, showWalletUI };
+};

src/react/hooks/useWeb3Auth.ts

@@ -0,0 +1,16 @@
+import { IWeb3AuthInnerContext } from "../interfaces";
+import { useWeb3AuthInner } from "./useWeb3AuthInner";
+
+export type IUseWeb3Auth = Omit<IWeb3AuthInnerContext, "isMFAEnabled" | "setIsMFAEnabled">;
+
+export const useWeb3Auth = (): IUseWeb3Auth => {
+  const { initError, isConnected, isInitialized, isInitializing, provider, web3Auth } = useWeb3AuthInner();
+  return {
+    initError,
+    isConnected,
+    isInitialized,
+    isInitializing,
+    provider,
+    web3Auth,
+  };
+};

src/react/hooks/useWeb3AuthConnect.ts

@@ -0,0 +1,43 @@
+import { type IProvider } from "@web3auth/base";
+import { useCallback, useState } from "react";
+
+import { Web3authRNError } from "../../errors";
+import { SdkLoginParams } from "../../types/interface";
+import { useWeb3AuthInner } from "../hooks/useWeb3AuthInner";
+
+export interface IUseWeb3AuthConnect {
+  isConnected: boolean;
+  loading: boolean;
+  error: Web3authRNError | null;
+  connectTo: (params: SdkLoginParams) => Promise<IProvider | null>;
+}
+
+export const useWeb3AuthConnect = (): IUseWeb3AuthConnect => {
+  const { web3Auth, isConnected } = useWeb3AuthInner();
+
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Web3authRNError | null>(null);
+
+  const connectTo = useCallback(
+    async (params: SdkLoginParams) => {
+      setLoading(true);
+      setError(null);
+      try {
+        const provider = await web3Auth.connectTo(params);
+        return provider;
+      } catch (error) {
+        setError(error as Web3authRNError);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [web3Auth]
+  );
+
+  return {
+    isConnected,
+    loading,
+    error,
+    connectTo,
+  };
+};