add more hooks for authorized listener

Author: chaitanyapotti

packages/modal/src/react/context/Web3AuthInnerContext.ts

@@ -101,6 +101,7 @@ export function Web3AuthInnerProvider(params: PropsWithChildren<Web3AuthProvider
     const authorizedListener = (_data: { connector: string }) => {
       setStatus(web3Auth.status);
       if (web3Auth.status === CONNECTOR_STATUS.AUTHORIZED) {
+        setIsConnected(true);
         setIsAuthorized(true);
       }
     };

packages/modal/src/react/hooks/useWeb3Auth.ts

@@ -4,10 +4,11 @@ import { useWeb3AuthInner } from "./useWeb3AuthInner";
 export type IUseWeb3Auth = Omit<IWeb3AuthInnerContext, "isMFAEnabled" | "setIsMFAEnabled" | "chainId" | "chainNamespace">;
 
 export const useWeb3Auth = (): IUseWeb3Auth => {
-  const { initError, isConnected, isInitialized, isInitializing, provider, status, web3Auth, getPlugin } = useWeb3AuthInner();
+  const { initError, isConnected, isAuthorized, isInitialized, isInitializing, provider, status, web3Auth, getPlugin } = useWeb3AuthInner();
   return {
     initError,
     isConnected,
+    isAuthorized,
     isInitialized,
     isInitializing,
     provider,

packages/modal/src/vue/Web3AuthProvider.ts

@@ -129,6 +129,7 @@ export const Web3AuthProvider = defineComponent({
         const authorizedListener = () => {
           status.value = web3Auth.value!.status;
           if (web3Auth.value!.status === CONNECTOR_STATUS.AUTHORIZED) {
+            isConnected.value = true;
             isAuthorized.value = true;
           }
         };

packages/no-modal/src/react/context/Web3AuthInnerContext.ts

@@ -34,6 +34,7 @@ export function Web3AuthInnerProvider(params: PropsWithChildren<Web3AuthProvider
   const [isInitialized, setIsInitialized] = useState<boolean>(false);
   const [status, setStatus] = useState<CONNECTOR_STATUS_TYPE | null>(null);
   const [isMFAEnabled, setIsMFAEnabled] = useState<boolean>(false);
+  const [isAuthorized, setIsAuthorized] = useState<boolean>(false);
 
   const getPlugin = useCallback(
     (name: string) => {
@@ -113,19 +114,30 @@ export function Web3AuthInnerProvider(params: PropsWithChildren<Web3AuthProvider
     const rehydrationErrorListener = () => {
       setStatus(web3Auth.status);
       setIsConnected(false);
+      setIsAuthorized(false);
       setProvider(null);
     };
 
+    const authorizedListener = () => {
+      setStatus(web3Auth.status);
+      if (web3Auth.status === CONNECTOR_STATUS.AUTHORIZED) {
+        setIsConnected(true);
+        setIsAuthorized(true);
+      }
+    };
+
     const mfaEnabledListener = (isMFAEnabled: boolean) => {
       if (typeof isMFAEnabled === "boolean") setIsMFAEnabled(isMFAEnabled);
     };
 
+    // TODO: In strict mode, web3auth becomes null and .off throws an error sometimes.
     if (web3Auth) {
       // web3Auth is initialized here.
       setStatus(web3Auth.status);
       web3Auth.on(CONNECTOR_EVENTS.NOT_READY, notReadyListener);
       web3Auth.on(CONNECTOR_EVENTS.READY, readyListener);
       web3Auth.on(CONNECTOR_EVENTS.CONNECTED, connectedListener);
+      web3Auth.on(CONNECTOR_EVENTS.AUTHORIZED, authorizedListener);
       web3Auth.on(CONNECTOR_EVENTS.DISCONNECTED, disconnectedListener);
       web3Auth.on(CONNECTOR_EVENTS.CONNECTING, connectingListener);
       web3Auth.on(CONNECTOR_EVENTS.ERRORED, errorListener);
@@ -143,6 +155,7 @@ export function Web3AuthInnerProvider(params: PropsWithChildren<Web3AuthProvider
         web3Auth.off(CONNECTOR_EVENTS.ERRORED, errorListener);
         web3Auth.off(CONNECTOR_EVENTS.REHYDRATION_ERROR, rehydrationErrorListener);
         web3Auth.off(CONNECTOR_EVENTS.MFA_ENABLED, mfaEnabledListener);
+        web3Auth.off(CONNECTOR_EVENTS.AUTHORIZED, authorizedListener);
       }
     };
   }, [web3Auth]);
@@ -161,6 +174,7 @@ export function Web3AuthInnerProvider(params: PropsWithChildren<Web3AuthProvider
       chainNamespace,
       getPlugin,
       setIsMFAEnabled,
+      isAuthorized,
     };
   }, [
     web3Auth,
@@ -175,6 +189,7 @@ export function Web3AuthInnerProvider(params: PropsWithChildren<Web3AuthProvider
     setIsMFAEnabled,
     chainId,
     chainNamespace,
+    isAuthorized,
   ]);
 
   return createElement(Web3AuthInnerContext.Provider, { value }, children);

packages/no-modal/src/react/hooks/useIdentityToken.ts

@@ -16,7 +16,7 @@ export const useIdentityToken = () => {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<Web3AuthError | null>(null);
   const [token, setToken] = useState<string | null>(null);
-
+  // TODO: store the authorized token in state so that we can return it here if already authorized
   const getIdentityToken = useCallback(async () => {
     setLoading(true);
     setError(null);

packages/no-modal/src/react/hooks/useWeb3Auth.ts

@@ -4,7 +4,7 @@ import { useWeb3AuthInner } from "./useWeb3AuthInner";
 export type IUseWeb3Auth = Omit<IWeb3AuthInnerContext, "isMFAEnabled" | "setIsMFAEnabled" | "chainId" | "chainNamespace">;
 
 export const useWeb3Auth = (): IUseWeb3Auth => {
-  const { initError, isConnected, isInitialized, isInitializing, provider, status, web3Auth, getPlugin } = useWeb3AuthInner();
+  const { initError, isConnected, isAuthorized, isInitialized, isInitializing, provider, status, web3Auth, getPlugin } = useWeb3AuthInner();
   return {
     initError,
     isConnected,
@@ -13,6 +13,7 @@ export const useWeb3Auth = (): IUseWeb3Auth => {
     provider,
     status,
     web3Auth,
+    isAuthorized,
     getPlugin,
   };
 };

packages/no-modal/src/vue/Web3AuthProvider.ts

@@ -116,6 +116,7 @@ export const Web3AuthProvider = defineComponent({
           status.value = web3Auth.value!.status;
           if (web3Auth.value!.status === CONNECTOR_STATUS.AUTHORIZED) {
             isAuthorized.value = true;
+            isConnected.value = true;
           }
         };
 

packages/no-modal/src/vue/composables/useWeb3Auth.ts

@@ -4,12 +4,13 @@ import { useWeb3AuthInner } from "./useWeb3AuthInner";
 export type IWeb3AuthNoModalContext = Omit<IWeb3AuthInnerContext, "isMFAEnabled" | "setIsMFAEnabled">;
 
 export const useWeb3Auth = (): IWeb3AuthNoModalContext => {
-  const { initError, isConnected, isInitialized, isInitializing, provider, status, web3Auth, getPlugin } = useWeb3AuthInner();
+  const { initError, isConnected, isInitialized, isInitializing, isAuthorized, provider, status, web3Auth, getPlugin } = useWeb3AuthInner();
   return {
     initError,
     isConnected,
     isInitialized,
     isInitializing,
+    isAuthorized,
     provider,
     status,
     web3Auth,