feat: add consent screen

demo/vite-react-app-sfa/package.json

@@ -5,7 +5,7 @@
   "dependencies": {
     "@react-oauth/google": "^0.12.1",
     "@tanstack/react-query": "^5.74.11",
-    "@web3auth/auth": "^11.4.2",
+    "@web3auth/auth": "^11.6.0",
     "@web3auth/modal": "file:../../packages/modal",
     "@web3auth/sign-in-with-web3": "^6.1.0",
     "ethers": "^6.13.4",

demo/vue-app-new/package.json

@@ -19,7 +19,7 @@
     "@toruslabs/vue-components": "^8.1.2",
     "@toruslabs/vue-icons": "^9.0.0",
     "@wagmi/vue": "^0.5.1",
-    "@web3auth/auth": "^11.5.0",
+    "@web3auth/auth": "^11.6.0",
     "@web3auth/modal": "file:../../packages/modal",
     "@web3auth/no-modal": "file:../../packages/no-modal",
     "@web3auth/sign-in-with-web3": "^6.1.0",

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

@@ -20,14 +20,7 @@ import { WagmiProvider } from "@web3auth/modal/vue/wagmi";
 import { coinbaseConnector } from "@web3auth/no-modal/connectors/coinbase-connector";
 import { computed, onBeforeMount, ref, watch } from "vue";
 
-import {
-  CookieStorage,
-  LocalStorageAdapter,
-  MemoryStorage,
-  SessionStorageAdapter,
-  WEB3AUTH_NETWORK,
-  type StorageConfig,
-} from "@web3auth/auth";
+import { CookieStorage, LocalStorageAdapter, MemoryStorage, SessionStorageAdapter, WEB3AUTH_NETWORK, type StorageConfig } from "@web3auth/auth";
 import AppDashboard from "./components/AppDashboard.vue";
 import AppHeader from "./components/AppHeader.vue";
 import AppSettings from "./components/AppSettings.vue";
@@ -132,11 +125,18 @@ const options = computed((): Web3AuthOptions => {
     }
   }
 
-  const { widget, targetId, externalWalletOnly } = formData;
+  const { widget, targetId, externalWalletOnly, consentConfigMode } = formData;
   const { hideSuccessScreen } = formData.whiteLabel;
   const uiConfig: Web3AuthOptions["uiConfig"] = enabledWhiteLabel
     ? { ...whiteLabel, widgetType: widget, targetId, hideSuccessScreen, ...(externalWalletOnly && { primaryButton: "externalLogin" }) }
     : { widgetType: widget, targetId, hideSuccessScreen, ...(externalWalletOnly && { primaryButton: "externalLogin" }) };
+  if (consentConfigMode === "required") {
+    uiConfig.consentConfig = {
+      required: true,
+      privacyPolicy: "https://example.com/privacy",
+      tncLink: "https://example.com/terms",
+    };
+  }
   const authConnectorInstance = authConnector({ connectorSettings: {} });
 
   return {
@@ -254,6 +254,7 @@ onBeforeMount(() => {
         formData.smartAccountChainsConfig = json.smartAccountChainsConfig || {};
         formData.defaultChainId = json.defaultChainId;
         formData.initialAuthenticationMode = json.initialAuthenticationMode;
+        formData.consentConfigMode = json.consentConfigMode || "required";
         formData.externalWalletOnly = json.externalWalletOnly || false;
         formData.tokenStorage = json.tokenStorage || "default";
       }

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

@@ -10,6 +10,7 @@ import {
   chainNamespaceOptions,
   clientIds,
   confirmationStrategyOptions,
+  consentConfigOptions,
   getDefaultBundlerUrl,
   languageOptions,
   loginProviderOptions,
@@ -245,6 +246,15 @@ const onSmartAccountChainChange = (chainIds: string[]) => {
             ]"
             matchParentsWidth
           />
+          <Select
+            v-model="formData.consentConfigMode"
+            data-testid="selectConsentConfig"
+            :label="$t('app.consentConfig')"
+            :aria-label="$t('app.consentConfig')"
+            :placeholder="$t('app.consentConfig')"
+            :options="consentConfigOptions"
+            matchParentsWidth
+          />
           <Toggle
             v-model="formData.showWalletDiscovery"
             data-testid="showWalletDiscovery"

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

@@ -80,6 +80,13 @@ export const languageOptions: { name: string; value: LANGUAGE_TYPE }[] = [
   { name: "Amharic", value: LANGUAGES.am },
 ];
 
+export type ConsentConfigMode = "required" | "disabled";
+
+export const consentConfigOptions: { name: string; value: ConsentConfigMode }[] = [
+  { name: "Required", value: "required" },
+  { name: "Disabled", value: "disabled" },
+];
+
 export const defaultLoginMethod: Record<AUTH_CONNECTION_TYPE, ModalConfig> = loginProviderOptions.reduce(
   (acc, curr) => ({
     ...acc,
@@ -128,6 +135,7 @@ export type FormData = {
   };
   connectors: string[];
   initialAuthenticationMode: ConnectorInitialAuthenticationModeType;
+  consentConfigMode: ConsentConfigMode;
   loginProviders: AUTH_CONNECTION_TYPE[];
   showWalletDiscovery: boolean;
   multiInjectedProviderDiscovery: boolean;

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

@@ -8,6 +8,7 @@ export const formDataStore = reactive<FormData>({
   // authMode: "",
   connectors: [],
   initialAuthenticationMode: CONNECTOR_INITIAL_AUTHENTICATION_MODE.CONNECT_AND_SIGN,
+  consentConfigMode: "required",
   network: process.env.NODE_ENV === "production" ? WEB3AUTH_NETWORK.SAPPHIRE_MAINNET : WEB3AUTH_NETWORK.SAPPHIRE_DEVNET,
   authBuildEnv: resolveBuildEnv(import.meta.env.VITE_APP_AUTH_BUILD_ENV),
   chainNamespaces: [CHAIN_NAMESPACES.EIP155, CHAIN_NAMESPACES.SOLANA],

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

@@ -10,6 +10,7 @@
     "loginProviders": "Login provider",
     "connectors": "Connectors",
     "initialAuthenticationMode": "Authentication Mode",
+    "consentConfig": "Consent Config",
     "showWalletDiscovery": "Show Wallet Discovery",
     "multiInjectedProviderDiscovery": "Multi Injected Provider Discovery",
     "externalWalletOnly": "External Wallet Only (Hide Social Login)",

demo/wagmi-react-app/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "dependencies": {
     "@tanstack/react-query": "^5.95.2",
-    "@web3auth/auth": "^11.5.0",
+    "@web3auth/auth": "^11.6.0",
     "@web3auth/modal": "file:../../packages/modal",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",