fix: empty login modal in external wallet only mode

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

@@ -108,10 +108,10 @@ const options = computed((): Web3AuthOptions => {
     }
   }
 
-  const { widget, targetId } = formData;
+  const { widget, targetId, externalWalletOnly } = formData;
   const uiConfig: Web3AuthOptions["uiConfig"] = enabledWhiteLabel
-    ? { ...whiteLabel, widgetType: widget, targetId }
-    : { widgetType: widget, targetId };
+    ? { ...whiteLabel, widgetType: widget, targetId, ...(externalWalletOnly && { primaryButton: "externalLogin" }) }
+    : { widgetType: widget, targetId, ...(externalWalletOnly && { primaryButton: "externalLogin" }) };
   const authConnectorInstance = authConnector({ connectorSettings: {} });
 
   return {
@@ -174,6 +174,7 @@ const modalParams = computed(() => {
     [WALLET_CONNECTORS.AUTH]: {
       label: "auth",
       loginMethods: loginMethodsConfig.value,
+      showOnModal: !formData.externalWalletOnly,
     },
   } as ConnectorsModalConfig["connectors"];
   return modalConfig;
@@ -209,6 +210,7 @@ onBeforeMount(() => {
         formData.smartAccountChainsConfig = json.smartAccountChainsConfig || {};
         formData.defaultChainId = json.defaultChainId;
         formData.initialAuthenticationMode = json.initialAuthenticationMode;
+        formData.externalWalletOnly = json.externalWalletOnly || false;
       }
     } catch (error) {}
   }

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

@@ -1,8 +1,17 @@
 <script setup lang="ts">
 import { Button, Card, Select, Tab, Tabs, Tag, TextField, Toggle } from "@toruslabs/vue-components";
-import { CHAIN_NAMESPACES, ChainNamespaceType, CONNECTOR_INITIAL_AUTHENTICATION_MODE, CONNECTOR_STATUS, log } from "@web3auth/modal";
+import {
+  CHAIN_NAMESPACES,
+  ChainNamespaceType,
+  CONNECTOR_INITIAL_AUTHENTICATION_MODE,
+  CONNECTOR_STATUS,
+  log,
+  Web3Auth,
+  WALLET_CONNECTORS,
+} from "@web3auth/modal";
 import { useWeb3Auth, useWeb3AuthConnect } from "@web3auth/modal/vue";
 import { computed, InputHTMLAttributes, ref } from "vue";
+import { getChainConfig } from "../utils/chainconfig";
 import {
   chainConfigs,
   chainNamespaceOptions,
@@ -15,13 +24,38 @@ import {
   SmartAccountOptions,
 } from "../config";
 import { formDataStore } from "../store/form";
-import { getChainConfig } from "../utils/chainconfig";
 
 const formData = formDataStore;
 
 const { status, isConnected, isInitialized, isAuthorized } = useWeb3Auth();
 const { connect } = useWeb3AuthConnect();
 
+const showLogin = async () => {
+  if (formData.externalWalletOnly) {
+    // Create a new Web3Auth instance for external wallet only mode to avoid race condition
+    const web3auth = new Web3Auth({
+      clientId: clientIds[formData.network],
+      web3AuthNetwork: formData.network,
+      modalConfig: {
+        connectors: {
+          [WALLET_CONNECTORS.AUTH]: {
+            label: "Auth",
+            showOnModal: false,
+          },
+        },
+      },
+      uiConfig: {
+        primaryButton: "externalLogin",
+      },
+    });
+
+    await web3auth.init();
+    await web3auth.connect();
+  } else {
+    await connect();
+  }
+};
+
 const chainOptions = computed(() => {
   const allChains: { name: string; value: string }[] = [];
   formData.chainNamespaces.forEach((namespace: ChainNamespaceType) => {
@@ -253,6 +287,15 @@ const onSmartAccountChainChange = (chainIds: string[]) => {
             :label-enabled="$t('app.multiInjectedProviderDiscovery')"
             class="mb-2"
           />
+          <Toggle
+            v-model="formData.externalWalletOnly"
+            data-testid="externalWalletOnly"
+            :show-label="true"
+            :size="'small'"
+            :label-disabled="$t('app.externalWalletOnly')"
+            :label-enabled="$t('app.externalWalletOnly')"
+            class="mb-2"
+          />
         </Card>
         <Card v-if="isActiveTab(1)" class="grid grid-cols-1 gap-2 px-4 py-4 sm:grid-cols-2" :shadow="false">
           <Toggle
@@ -511,7 +554,7 @@ const onSmartAccountChainChange = (chainIds: string[]) => {
             size="md"
             pill
             :disabled="isDisabled('btnConnect')"
-            @click="connect"
+            @click="showLogin"
           >
             Connect
           </Button>

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

@@ -115,6 +115,7 @@ export type FormData = {
   loginProviders: AUTH_CONNECTION_TYPE[];
   showWalletDiscovery: boolean;
   multiInjectedProviderDiscovery: boolean;
+  externalWalletOnly: boolean;
   loginMethods: LoginMethodConfig;
   walletPlugin: {
     enable: boolean;

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

@@ -19,6 +19,7 @@ export const formDataStore = reactive<FormData>({
   loginProviders: [],
   showWalletDiscovery: true,
   multiInjectedProviderDiscovery: true,
+  externalWalletOnly: false,
   loginMethods: defaultLoginMethod,
   walletPlugin: {
     enable: false,

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

@@ -12,6 +12,7 @@
     "initialAuthenticationMode": "Authentication Mode",
     "showWalletDiscovery": "Show Wallet Discovery",
     "multiInjectedProviderDiscovery": "Multi Injected Provider Discovery",
+    "externalWalletOnly": "External Wallet Only (Hide Social Login)",
     "greeting": "Let's configure Web3Auth!",
     "enableWalletServicePlugin": "Enable Wallet Service Plugin",
     "walletPlugin": {

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

@@ -505,25 +505,27 @@ function Root(props: RootProps) {
                       />
                     )}
                     {/* Connect Wallet Screen */}
-                    {modalState.currentPage === PAGES.CONNECT_WALLET && !showExternalWalletPage && modalState.status === MODAL_STATUS.INITIALIZED && (
-                      <ConnectWallet
-                        isDark={isDark}
-                        walletConnectUri={modalState.walletConnectUri}
-                        metamaskConnectUri={modalState.metamaskConnectUri}
-                        config={modalState.externalWalletsConfig}
-                        walletRegistry={walletRegistry}
-                        allRegistryButtons={allRegistryButtons}
-                        connectorVisibilityMap={connectorVisibilityMap}
-                        customConnectorButtons={customConnectorButtons}
-                        deviceDetails={deviceDetails}
-                        chainNamespace={chainNamespaces}
-                        buttonRadius={buttonRadiusType}
-                        handleWalletDetailsHeight={handleWalletDetailsHeight}
-                        isExternalWalletModeOnly={isExternalWalletModeOnly}
-                        onBackClick={onBackClick}
-                        handleExternalWalletClick={preHandleExternalWalletClick}
-                      />
-                    )}
+                    {modalState.currentPage === PAGES.CONNECT_WALLET &&
+                      (!showExternalWalletPage || isExternalWalletModeOnly) &&
+                      modalState.status === MODAL_STATUS.INITIALIZED && (
+                        <ConnectWallet
+                          isDark={isDark}
+                          walletConnectUri={modalState.walletConnectUri}
+                          metamaskConnectUri={modalState.metamaskConnectUri}
+                          config={modalState.externalWalletsConfig}
+                          walletRegistry={walletRegistry}
+                          allRegistryButtons={allRegistryButtons}
+                          connectorVisibilityMap={connectorVisibilityMap}
+                          customConnectorButtons={customConnectorButtons}
+                          deviceDetails={deviceDetails}
+                          chainNamespace={chainNamespaces}
+                          buttonRadius={buttonRadiusType}
+                          handleWalletDetailsHeight={handleWalletDetailsHeight}
+                          isExternalWalletModeOnly={isExternalWalletModeOnly}
+                          onBackClick={onBackClick}
+                          handleExternalWalletClick={preHandleExternalWalletClick}
+                        />
+                      )}
                   </>
                 )}
               </>