feat: updated hooks for isAuthorized status

Author: smgv

demo/vue-app-new/src/MainView.vue

@@ -139,7 +139,7 @@ const options = computed((): Web3AuthOptions => {
       connectors: modalParams.value,
       hideWalletDiscovery: !formData.showWalletDiscovery,
     },
-    initialAuthenticationMode: "connect-and-sign",
+    initialAuthenticationMode: formData.initialAuthenticationMode,
   };
 });
 

demo/vue-app-new/src/components/AppDashboard.vue

@@ -40,7 +40,7 @@ const props = defineProps<{
   chains: CustomChainConfig[];
 }>();
 
-const { isConnected, provider, web3Auth, isMFAEnabled } = useWeb3Auth();
+const { isConnected, provider, web3Auth, isMFAEnabled, isAuthorized } = useWeb3Auth();
 const { userInfo, loading: userInfoLoading } = useWeb3AuthUser();
 const { enableMFA } = useEnableMFA();
 const { manageMFA } = useManageMFA();
@@ -92,7 +92,7 @@ const isDisplay = (name: "dashboard" | "ethServices" | "solServices" | "walletSe
   const chainNamespace = currentChainNamespace.value;
   switch (name) {
     case "dashboard":
-      return isConnected.value;
+      return formData.initialAuthenticationMode === "connect-and-sign" ? isAuthorized.value : isConnected.value;
 
     case "ethServices":
       return chainNamespace === CHAIN_NAMESPACES.EIP155;

demo/vue-app-new/src/components/AppHeader.vue

@@ -3,20 +3,22 @@ import { Button } from "@toruslabs/vue-components";
 import { useWeb3Auth, useWeb3AuthDisconnect } from "@web3auth/modal/vue";
 import { useI18n } from "petite-vue-i18n";
 import { watch } from "vue";
+import { formDataStore } from "../store/form";
 
 const { log } = console;
 const { t } = useI18n({ useScope: "global" });
 
-const { status, isConnected } = useWeb3Auth();
+const { status, isConnected, isAuthorized } = useWeb3Auth();
 const { disconnect } = useWeb3AuthDisconnect();
+const formData = formDataStore;
 
 const isDisplay = (name: string): boolean => {
   switch (name) {
     case "btnLogout":
-      return isConnected.value;
+      return formData.initialAuthenticationMode === "connect-and-sign" ? isAuthorized.value : isConnected.value;
 
     case "appHeading":
-      return isConnected.value;
+      return formData.initialAuthenticationMode === "connect-and-sign" ? isAuthorized.value : isConnected.value;
 
     default: {
       return false;

demo/vue-app-new/src/components/AppSettings.vue

@@ -229,6 +229,18 @@ const onSmartAccountChainChange = (chainIds: string[]) => {
             matchParentsWidth
             :show-check-box="true"
           />
+          <Select
+            v-model="formData.initialAuthenticationMode"
+            data-testid="selectInitialAuthenticationMode"
+            :label="$t('app.initialAuthenticationMode')"
+            :aria-label="$t('app.initialAuthenticationMode')"
+            :placeholder="$t('app.initialAuthenticationMode')"
+            :options="[
+              { name: 'Connect Only', value: 'connect-only' },
+              { name: 'Connect and Sign', value: 'connect-and-sign' },
+            ]"
+            matchParentsWidth
+          />
           <Toggle
             v-model="formData.showWalletDiscovery"
             data-testid="showWalletDiscovery"

demo/vue-app-new/src/config.ts

@@ -4,6 +4,7 @@ import {
   ChainNamespaceType,
   CONFIRMATION_STRATEGY,
   type CONFIRMATION_STRATEGY_TYPE,
+  InitialAuthenticationModeType,
   LoginMethodConfig,
   ModalConfig,
   SignTypedDataMessageV4,
@@ -109,6 +110,7 @@ export type FormData = {
     config: WhiteLabelData;
   };
   connectors: string[];
+  initialAuthenticationMode: InitialAuthenticationModeType;
   loginProviders: AUTH_CONNECTION_TYPE[];
   showWalletDiscovery: boolean;
   multiInjectedProviderDiscovery: boolean;

demo/vue-app-new/src/store/form.ts

@@ -7,6 +7,7 @@ import { chainConfigs, defaultLoginMethod, FormData, initWhiteLabel } from "../c
 export const formDataStore = reactive<FormData>({
   // authMode: "",
   connectors: [],
+  initialAuthenticationMode: "connect-only",
   network: process.env.NODE_ENV === "production" ? WEB3AUTH_NETWORK.SAPPHIRE_MAINNET : WEB3AUTH_NETWORK.SAPPHIRE_DEVNET,
   chainNamespaces: [CHAIN_NAMESPACES.EIP155, CHAIN_NAMESPACES.SOLANA],
   chains: [chainConfigs[CHAIN_NAMESPACES.EIP155][0], chainConfigs[CHAIN_NAMESPACES.SOLANA][0]],

demo/vue-app-new/src/translations/en.json

@@ -9,6 +9,7 @@
     "defaultChainId": "Default Chain ID",
     "loginProviders": "Login provider",
     "connectors": "Connectors",
+    "initialAuthenticationMode": "Authentication Mode",
     "showWalletDiscovery": "Show Wallet Discovery",
     "multiInjectedProviderDiscovery": "Multi Injected Provider Discovery",
     "greeting": "Let's configure Web3Auth!",

packages/modal/src/modalManager.ts

@@ -123,6 +123,7 @@ export class Web3Auth extends Web3AuthNoModal implements IWeb3AuthModal {
           onSocialLogin: this.onSocialLogin,
           onExternalWalletLogin: this.onExternalWalletLogin,
           onModalVisibility: this.onModalVisibility,
+          onMobileVerifyConnect: this.onMobileVerifyConnect,
         }
       );
       await withAbort(() => this.loginModal.initModal(), signal);
@@ -659,6 +660,15 @@ export class Web3Auth extends Web3AuthNoModal implements IWeb3AuthModal {
     }
   };
 
+  private onMobileVerifyConnect = async (params: { connector: WALLET_CONNECTOR_TYPE }): Promise<void> => {
+    try {
+      const connector = this.getConnector(params.connector);
+      await connector.getIdentityToken();
+    } catch (error) {
+      log.error(`Error while connecting to connector: ${params.connector}`, error);
+    }
+  };
+
   private getChainNamespaces = (): ChainNamespaceType[] => {
     return [...new Set(this.coreOptions.chains?.map((x) => x.chainNamespace) || [])];
   };

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

@@ -34,6 +34,7 @@ export function Web3AuthInnerProvider(params: PropsWithChildren<Web3AuthProvider
   }, [web3AuthOptions, initialState]);
 
   const [isConnected, setIsConnected] = useState<boolean>(web3Auth.status === CONNECTOR_STATUS.CONNECTED);
+  const [isAuthorized, setIsAuthorized] = useState<boolean>(web3Auth.status === CONNECTOR_STATUS.AUTHORIZED);
   const [status, setStatus] = useState<CONNECTOR_STATUS_TYPE | null>(web3Auth.status);
 
   const getPlugin = useCallback(
@@ -97,6 +98,12 @@ export function Web3AuthInnerProvider(params: PropsWithChildren<Web3AuthProvider
         setProvider(data.provider);
       }
     };
+    const authorizedListener = (_data: { connector: string }) => {
+      setStatus(web3Auth.status);
+      if (web3Auth.status === CONNECTOR_STATUS.AUTHORIZED) {
+        setIsAuthorized(true);
+      }
+    };
     const disconnectedListener = () => {
       setStatus(web3Auth.status);
       setIsConnected(false);
@@ -125,6 +132,7 @@ export function Web3AuthInnerProvider(params: PropsWithChildren<Web3AuthProvider
       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);
@@ -137,6 +145,7 @@ export function Web3AuthInnerProvider(params: PropsWithChildren<Web3AuthProvider
         web3Auth.off(CONNECTOR_EVENTS.NOT_READY, notReadyListener);
         web3Auth.off(CONNECTOR_EVENTS.READY, readyListener);
         web3Auth.off(CONNECTOR_EVENTS.CONNECTED, connectedListener);
+        web3Auth.off(CONNECTOR_EVENTS.AUTHORIZED, authorizedListener);
         web3Auth.off(CONNECTOR_EVENTS.DISCONNECTED, disconnectedListener);
         web3Auth.off(CONNECTOR_EVENTS.CONNECTING, connectingListener);
         web3Auth.off(CONNECTOR_EVENTS.ERRORED, errorListener);
@@ -152,6 +161,7 @@ export function Web3AuthInnerProvider(params: PropsWithChildren<Web3AuthProvider
     return {
       web3Auth,
       isConnected,
+      isAuthorized,
       isInitialized,
       provider,
       status,
@@ -166,6 +176,7 @@ export function Web3AuthInnerProvider(params: PropsWithChildren<Web3AuthProvider
   }, [
     web3Auth,
     isConnected,
+    isAuthorized,
     isMFAEnabled,
     setIsMFAEnabled,
     isInitialized,

packages/modal/src/ui/components/Loader/Loader.tsx

@@ -1,3 +1,4 @@
+import { WALLET_CONNECTOR_TYPE } from "@web3auth/no-modal";
 import { useEffect, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -91,16 +92,14 @@ function ErroredStatus(props: ErroredStatusType) {
 
 function AuthorizingStatus(props: AuthorizingStatusType) {
   const [t] = useTranslation(undefined, { i18n });
-  const { connector, externalWalletsConfig, walletRegistry } = props;
-
-  // eslint-disable-next-line no-console
-  console.log("externalWalletsConfig", externalWalletsConfig);
+  const { connector, externalWalletsConfig, walletRegistry, handleMobileVerifyConnect } = props;
 
   const registryItem = walletRegistry?.default?.[connector] || walletRegistry?.others?.[connector];
   const primaryColor = registryItem?.primaryColor || "";
 
-  // eslint-disable-next-line no-console
-  console.log("registryItem", registryItem);
+  const handleMobileVerifyConnectClick = () => {
+    handleMobileVerifyConnect({ connector: connector as WALLET_CONNECTOR_TYPE });
+  };
 
   return (
     <div className="w3a--flex w3a--size-full w3a--flex-col w3a--items-center w3a--justify-between w3a--gap-y-6">
@@ -113,14 +112,12 @@ function AuthorizingStatus(props: AuthorizingStatusType) {
         </CircularLoader>
       </div>
       <p className="w3a--text-center w3a--text-sm w3a--text-app-gray-500 dark:w3a--text-app-gray-400">{t("modal.loader.authorizing-message")}</p>
-      <a
-        href={"https://www.google.com"}
-        target="_blank"
-        rel="noopener noreferrer"
+      <button
+        onClick={handleMobileVerifyConnectClick}
         className="w3a--w-full w3a--rounded-xl w3a--bg-app-gray-100 w3a--p-2 w3a--py-3 w3a--text-center w3a--text-sm w3a--text-app-gray-900 dark:w3a--bg-app-gray-800 dark:w3a--text-app-white md:w3a--hidden"
       >
         {t("modal.loader.authorizing-verify-btn")}
-      </a>
+      </button>
     </div>
   );
 }
@@ -141,8 +138,7 @@ function Loader(props: LoaderProps) {
     isConnectAndSignAuthenticationMode,
     externalWalletsConfig,
     walletRegistry,
-    walletConnectUri,
-    metamaskConnectUri,
+    handleMobileVerifyConnect,
   } = props;
 
   // eslint-disable-next-line no-console
@@ -170,7 +166,12 @@ function Loader(props: LoaderProps) {
       {modalStatus === MODAL_STATUS.ERRORED && <ErroredStatus message={message} />}
 
       {modalStatus === MODAL_STATUS.AUTHORIZING && (
-        <AuthorizingStatus connector={connector} externalWalletsConfig={externalWalletsConfig} walletRegistry={walletRegistry} />
+        <AuthorizingStatus
+          connector={connector}
+          externalWalletsConfig={externalWalletsConfig}
+          walletRegistry={walletRegistry}
+          handleMobileVerifyConnect={handleMobileVerifyConnect}
+        />
       )}
     </div>
   );