feat: external wallet session management

demo/nextjs-ssr-app/components/Main.tsx

@@ -3,7 +3,7 @@
 import {
   useCheckout,
   useEnableMFA,
-  useIdentityToken,
+  useAuthTokenInfo,
   useManageMFA,
   useWalletConnectScanner,
   useWalletUI,
@@ -31,7 +31,7 @@ const Main = () => {
   const { showCheckout, loading: isCheckoutLoading, error: checkoutError } = useCheckout();
   const { showWalletConnectScanner, loading: isWalletConnectScannerLoading, error: walletConnectScannerError } = useWalletConnectScanner();
   const { showWalletUI, loading: isWalletUILoading, error: walletUIError } = useWalletUI();
-  const { token, loading: isUserTokenLoading, error: userTokenError, getIdentityToken } = useIdentityToken();
+  const { token, loading: isUserTokenLoading, error: userTokenError, getAuthTokenInfo } = useAuthTokenInfo();
 
   console.log("isConnected", isConnected, balance);
 
@@ -59,7 +59,7 @@ const Main = () => {
               {isUserTokenLoading ? (
                 <p>Authenticating...</p>
               ) : (
-                <button onClick={() => getIdentityToken()} className="card">
+                <button onClick={() => getAuthTokenInfo()} className="card">
                   Authenticate User
                 </button>
               )}

demo/react-app-no-modal/src/App.tsx

@@ -44,12 +44,12 @@ function App() {
     setProvider(web3authProvider);
   };
 
-  const getIdentityToken = async () => {
+  const getAuthTokenInfo = async () => {
     if (!web3auth) {
       uiConsole("web3auth not initialized yet");
       return;
     }
-    const idToken = await web3auth.getIdentityToken();
+    const idToken = await web3auth.getAuthTokenInfo();
     uiConsole(idToken);
   };
 
@@ -156,7 +156,7 @@ function App() {
           </button>
         </div>
         <div>
-          <button onClick={getIdentityToken} className="card">
+          <button onClick={getAuthTokenInfo} className="card">
             Get ID Token
           </button>
         </div>

demo/vue-app-new/package.json

@@ -25,6 +25,7 @@
     "@web3auth/sign-in-with-web3": "^6.1.0",
     "@web3auth/ws-embed": "file:../../web3auth-ws-embed-5.6.5.tgz",
     "ethers": "^6.16.0",
+    "ox": "^0.11.3",
     "petite-vue-i18n": "^11.3.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",

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

@@ -20,7 +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 { BUILD_ENV } from "@web3auth/auth";
+import { BUILD_ENV, CookieStorage, LocalStorageAdapter, MemoryStorage, SessionStorageAdapter, type StorageConfig } from "@web3auth/auth";
 import AppDashboard from "./components/AppDashboard.vue";
 import AppHeader from "./components/AppHeader.vue";
 import AppSettings from "./components/AppSettings.vue";
@@ -34,6 +34,22 @@ const formData = formDataStore;
 
 const externalConnectors = ref<ConnectorFn[]>([]);
 
+function buildStorageConfig(): StorageConfig | undefined {
+  const type = formData.tokenStorage;
+  if (type === "default") return undefined;
+
+  const adapter =
+    type === "session"
+      ? new SessionStorageAdapter()
+      : type === "cookies"
+        ? new CookieStorage({ maxAge: 7 * 86400 })
+        : type === "memory"
+          ? new MemoryStorage()
+          : new LocalStorageAdapter();
+
+  return { sessionId: adapter, accessToken: adapter, refreshToken: adapter, idToken: adapter };
+}
+
 const showAAProviderSettings = computed(() => formData.chainNamespaces.includes(CHAIN_NAMESPACES.EIP155));
 
 // Options for reinitializing the web3Auth object
@@ -122,11 +138,7 @@ const options = computed((): Web3AuthOptions => {
     uiConfig,
     accountAbstractionConfig,
     useAAWithExternalWallet: formData.useAAWithExternalWallet,
-    // TODO: Add more options
-    // enableLogging?: boolean;
-    // storageType?: "session" | "local";
-    // sessionTime?: number;
-    // useSFAKey?: boolean;
+    storage: buildStorageConfig(),
     chains,
     defaultChainId: formData.defaultChainId,
     enableLogging: true,
@@ -213,6 +225,7 @@ onBeforeMount(() => {
         formData.defaultChainId = json.defaultChainId;
         formData.initialAuthenticationMode = json.initialAuthenticationMode;
         formData.externalWalletOnly = json.externalWalletOnly || false;
+        formData.tokenStorage = json.tokenStorage || "default";
       }
     } catch (error) {}
   }

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

@@ -6,7 +6,7 @@ import {
   useFunding,
   useReceive,
   useEnableMFA,
-  useIdentityToken,
+  useAuthTokenInfo,
   useManageMFA,
   useWalletConnectScanner,
   useWalletUI,
@@ -55,7 +55,7 @@ const { showWalletConnectScanner, loading: showWalletConnectScannerLoading } = u
 const { showCheckout, loading: showCheckoutLoading } = useCheckout();
 const { showFunding, loading: showFundingLoading } = useFunding();
 const { showReceive, loading: showReceiveLoading } = useReceive();
-const { getIdentityToken, loading: getIdentityTokenLoading } = useIdentityToken();
+const { getAuthTokenInfo, loading: getAuthTokenInfoLoading } = useAuthTokenInfo();
 const { status, address } = useConnection();
 const { mutateAsync: signTypedDataAsync } = useSignTypedData();
 const { mutateAsync: signMessageAsync } = useSignMessage();
@@ -162,8 +162,8 @@ const onGetUserInfo = async () => {
   printToConsole("User Info", userInfo.value);
 };
 
-const ongetIdentityToken = async () => {
-  const idToken = await getIdentityToken();
+const onGetAuthTokenInfo = async () => {
+  const idToken = await getAuthTokenInfo();
   printToConsole("id token", idToken);
 };
 
@@ -492,7 +492,7 @@ const onSwitchChain = async () => {
           <Button block size="xs" pill class="mb-2" @click="onSignPersonalMsg">
             {{ t("app.buttons.btnSignPersonalMsg") }}
           </Button>
-          <Button :loading="getIdentityTokenLoading" block size="xs" pill class="mb-2" @click="ongetIdentityToken">Get id token</Button>
+          <Button :loading="getAuthTokenInfoLoading" block size="xs" pill class="mb-2" @click="onGetAuthTokenInfo">Get id token</Button>
 
           <!-- EIP-5792 -->
           <div class="mb-2 mt-4 text-xl font-bold leading-tight text-left">EIP-5792</div>
@@ -522,7 +522,7 @@ const onSwitchChain = async () => {
           <Button block size="xs" pill class="mb-2" @click="onSignSolTransaction">
             {{ t("app.buttons.btnSignTransaction") }}
           </Button>
-          <Button :loading="getIdentityTokenLoading" block size="xs" pill class="mb-2" @click="ongetIdentityToken">Get id token</Button>
+          <Button :loading="getAuthTokenInfoLoading" block size="xs" pill class="mb-2" @click="onGetAuthTokenInfo">Get id token</Button>
         </Card>
       </Card>
       <Card

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

@@ -262,6 +262,21 @@ const onSmartAccountChainChange = (chainIds: string[]) => {
             :label-enabled="$t('app.externalWalletOnly')"
             class="mb-2"
           />
+          <Select
+            v-model="formData.tokenStorage"
+            data-testid="selectTokenStorage"
+            label="Token Storage"
+            aria-label="Token Storage"
+            placeholder="Token Storage"
+            :options="[
+              { name: 'Default (AuthSessionManager)', value: 'default' },
+              { name: 'LocalStorage', value: 'local' },
+              { name: 'SessionStorage', value: 'session' },
+              { name: 'Cookies', value: 'cookies' },
+              { name: 'Memory (no persist)', value: 'memory' },
+            ]"
+            matchParentsWidth
+          />
         </Card>
         <Card v-if="isActiveTab(1)" class="grid grid-cols-1 gap-2 px-4 py-4 sm:grid-cols-2" :shadow="false">
           <Toggle

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

@@ -127,6 +127,7 @@ export type FormData = {
   smartAccountType?: SmartAccountType;
   smartAccountChains: string[];
   smartAccountChainsConfig: Record<string, { bundlerUrl: string; paymasterUrl: string }>;
+  tokenStorage: "default" | "local" | "session" | "cookies" | "memory";
   widget?: WidgetType;
   targetId?: string;
 };

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

@@ -31,6 +31,7 @@ export const formDataStore = reactive<FormData>({
   smartAccountType: "metamask", // default smart account type to safe
   smartAccountChains: [],
   smartAccountChainsConfig: {},
+  tokenStorage: "default",
   widget: WIDGET_TYPE.MODAL,
   targetId: "w3a-parent-test-container",
 });

demo/wagmi-react-app/src/components/Main.tsx

@@ -3,7 +3,7 @@ import {
   useChain,
   useCheckout,
   useEnableMFA,
-  useIdentityToken,
+  useAuthTokenInfo,
   useManageMFA,
   useSwitchChain as useWeb3AuthSwitchChain,
   useWalletConnectScanner,
@@ -48,7 +48,7 @@ const Main = () => {
   const { showCheckout, loading: isCheckoutLoading, error: checkoutError } = useCheckout();
   const { showWalletConnectScanner, loading: isWalletConnectScannerLoading, error: walletConnectScannerError } = useWalletConnectScanner();
   const { showWalletUI, loading: isWalletUILoading, error: walletUIError } = useWalletUI();
-  const { token, loading: isUserTokenLoading, error: userTokenError, getIdentityToken } = useIdentityToken();
+  const { token, loading: isUserTokenLoading, error: userTokenError, getAuthTokenInfo } = useAuthTokenInfo();
   const { switchChainAsync } = useSwitchChain();
   const chains = useChains();
   const { switchChain: switchWeb3AuthChain } = useWeb3AuthSwitchChain();
@@ -116,7 +116,7 @@ const Main = () => {
               {isUserTokenLoading ? (
                 <p>Authenticating...</p>
               ) : (
-                <button onClick={() => getIdentityToken()} className={styles.card}>
+                <button onClick={() => getAuthTokenInfo()} className={styles.card}>
                   Authenticate User
                 </button>
               )}