feat: connect-sign

demo/vue-app-new/package.json

@@ -11,47 +11,47 @@
   },
   "dependencies": {
     "@solana/web3.js": "^1.98.4",
-    "@tanstack/vue-query": "^5.90.2",
-    "@toruslabs/base-controllers": "^8.7.0",
+    "@tanstack/vue-query": "^5.92.1",
+    "@toruslabs/base-controllers": "^8.10.0",
     "@toruslabs/bs58": "^1.0.0",
-    "@toruslabs/ethereum-controllers": "^8.7.0",
-    "@toruslabs/solana-controllers": "^8.7.0",
+    "@toruslabs/ethereum-controllers": "^8.10.0",
+    "@toruslabs/solana-controllers": "^8.10.0",
     "@toruslabs/tweetnacl-js": "^1.0.4",
     "@toruslabs/vue-components": "^8.1.2",
-    "@toruslabs/vue-icons": "^8.0.2",
+    "@toruslabs/vue-icons": "^8.0.4",
     "@wagmi/vue": "^0.2.11",
-    "@web3auth/auth": "^10.5.0",
+    "@web3auth/auth": "^10.8.0",
     "@web3auth/modal": "file:../../packages/modal",
     "@web3auth/no-modal": "file:../../packages/no-modal",
     "@web3auth/sign-in-with-ethereum": "^5.0.0",
-    "@web3auth/ws-embed": "^5.1.0",
-    "ethers": "^6.15.0",
-    "petite-vue-i18n": "^11.1.12",
-    "vue": "^3.5.22",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0"
+    "@web3auth/ws-embed": "^5.3.0",
+    "ethers": "^6.16.0",
+    "petite-vue-i18n": "^11.2.2",
+    "vue": "^3.5.25",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1"
   },
   "overrides": {
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
     "use-sync-external-store": "^1.4.0"
   },
   "devDependencies": {
     "@toruslabs/eslint-config-vue": "^4.1.5",
-    "@vitejs/plugin-vue": "^6.0.1",
-    "autoprefixer": "^10.4.21",
-    "eslint": "^9.36.0",
-    "globals": "^16.4.0",
+    "@vitejs/plugin-vue": "^6.0.2",
+    "autoprefixer": "^10.4.22",
+    "eslint": "^9.39.1",
+    "globals": "^16.5.0",
     "postcss": "^8.5.6",
-    "prettier": "^3.6.2",
+    "prettier": "^3.7.4",
     "stream-browserify": "^3.0.0",
     "tailwindcss": "^3.4.13",
     "typescript": "^5.9.3",
-    "vite": "^7.1.7",
-    "vue-tsc": "^3.1.0"
+    "vite": "^7.2.6",
+    "vue-tsc": "^3.1.5"
   },
   "optionalDependencies": {
-    "@esbuild/linux-x64": "0.25.10"
+    "@esbuild/linux-x64": "0.27.1"
   },
   "lint-staged": {
     "!(*d).{js,ts}": [

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

@@ -139,6 +139,7 @@ const options = computed((): Web3AuthOptions => {
       connectors: modalParams.value,
       hideWalletDiscovery: !formData.showWalletDiscovery,
     },
+    initialAuthenticationMode: formData.initialAuthenticationMode,
   };
 });
 
@@ -210,6 +211,7 @@ onBeforeMount(() => {
         formData.smartAccountChains = json.smartAccountChains || [];
         formData.smartAccountChainsConfig = json.smartAccountChainsConfig || {};
         formData.defaultChainId = json.defaultChainId;
+        formData.initialAuthenticationMode = json.initialAuthenticationMode;
       }
     } catch (error) {}
   }

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

@@ -14,7 +14,7 @@ import {
   useWeb3AuthUser,
   useSwitchChain as useWeb3AuthSwitchChain,
 } from "@web3auth/modal/vue";
-import { type CustomChainConfig, type NFTCheckoutPluginType } from "@web3auth/no-modal";
+import { CONNECTOR_INITIAL_AUTHENTICATION_MODE, type CustomChainConfig, type NFTCheckoutPluginType } from "@web3auth/no-modal";
 import { useI18n } from "petite-vue-i18n";
 
 import { useSignAndSendTransaction, useSignMessage as useSolanaSignMessage, useSignTransaction, useSolanaWallet } from "@web3auth/modal/vue/solana";
@@ -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 === CONNECTOR_INITIAL_AUTHENTICATION_MODE.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,23 @@ 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";
+import { CONNECTOR_INITIAL_AUTHENTICATION_MODE } from "@web3auth/no-modal";
 
 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 === CONNECTOR_INITIAL_AUTHENTICATION_MODE.CONNECT_AND_SIGN ? isAuthorized.value : isConnected.value;
 
     case "appHeading":
-      return isConnected.value;
+      return formData.initialAuthenticationMode === CONNECTOR_INITIAL_AUTHENTICATION_MODE.CONNECT_AND_SIGN ? isAuthorized.value : isConnected.value;
 
     default: {
       return false;

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Button, Card, Select, Tab, Tabs, Tag, TextField, Toggle } from "@toruslabs/vue-components";
-import { CHAIN_NAMESPACES, ChainNamespaceType, CONNECTOR_STATUS, log } from "@web3auth/modal";
+import { CHAIN_NAMESPACES, ChainNamespaceType, CONNECTOR_INITIAL_AUTHENTICATION_MODE, CONNECTOR_STATUS, log } from "@web3auth/modal";
 import { useWeb3Auth, useWeb3AuthConnect } from "@web3auth/modal/vue";
 import { computed, InputHTMLAttributes, ref } from "vue";
 import {
@@ -19,7 +19,7 @@ import { getChainConfig } from "../utils/chainconfig";
 
 const formData = formDataStore;
 
-const { status, isConnected, isInitialized } = useWeb3Auth();
+const { status, isConnected, isInitialized, isAuthorized } = useWeb3Auth();
 const { connect } = useWeb3AuthConnect();
 
 const chainOptions = computed(() => {
@@ -58,7 +58,7 @@ const connectorOptions = computed(() =>
 );
 
 const isDisplay = (_name: string): boolean => {
-  return !isConnected.value;
+  return formData.initialAuthenticationMode === CONNECTOR_INITIAL_AUTHENTICATION_MODE.CONNECT_ONLY ? !isConnected.value : !isAuthorized.value;
 };
 
 const isDisabled = (name: string): boolean => {
@@ -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,
+  type ConnectorInitialAuthenticationModeType,
   LoginMethodConfig,
   ModalConfig,
   SignTypedDataMessageV4,
@@ -62,6 +63,7 @@ export const languageOptions: { name: string; value: LANGUAGE_TYPE }[] = [
   { name: "Portuguese", value: LANGUAGES.pt },
   { name: "Dutch", value: LANGUAGES.nl },
   { name: "Turkish", value: LANGUAGES.tr },
+  { name: "Amharic", value: LANGUAGES.am },
 ];
 
 export const defaultLoginMethod: Record<AUTH_CONNECTION_TYPE, ModalConfig> = loginProviderOptions.reduce(
@@ -109,6 +111,7 @@ export type FormData = {
     config: WhiteLabelData;
   };
   connectors: string[];
+  initialAuthenticationMode: ConnectorInitialAuthenticationModeType;
   loginProviders: AUTH_CONNECTION_TYPE[];
   showWalletDiscovery: boolean;
   multiInjectedProviderDiscovery: boolean;

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

@@ -1,12 +1,13 @@
 import { WEB3AUTH_NETWORK } from "@web3auth/auth";
-import { CHAIN_NAMESPACES, WIDGET_TYPE } from "@web3auth/modal";
+import { CHAIN_NAMESPACES, CONNECTOR_INITIAL_AUTHENTICATION_MODE, WIDGET_TYPE } from "@web3auth/modal";
 import { reactive } from "vue";
 
 import { chainConfigs, defaultLoginMethod, FormData, initWhiteLabel } from "../config";
 
 export const formDataStore = reactive<FormData>({
   // authMode: "",
   connectors: [],
+  initialAuthenticationMode: CONNECTOR_INITIAL_AUTHENTICATION_MODE.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!",