cleanup on config changes in vue

Author: arch1995

demo/vue-app-new/package-lock.json

@@ -12,19 +12,19 @@
   "dependencies": {
     "@solana/web3.js": "^1.98.0",
     "@toruslabs/base-controllers": "^8.1.0",
+    "@toruslabs/bs58": "^1.0.0",
     "@toruslabs/ethereum-controllers": "^8.2.0",
     "@toruslabs/solana-controllers": "^8.1.0",
+    "@toruslabs/tweetnacl-js": "^1.0.4",
     "@toruslabs/vue-components": "^8.0.6",
     "@toruslabs/vue-icons": "^8.0.2",
-    "@web3auth/auth": "^10.3.0",
+    "@web3auth/auth": "^10.4.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.0.0",
-    "@toruslabs/bs58": "^1.0.0",
     "ethers": "^6.13.5",
     "petite-vue-i18n": "^11.1.3",
-    "@toruslabs/tweetnacl-js": "^1.0.4",
     "vue": "^3.5.13"
   },
   "devDependencies": {

demo/vue-app-new/package.json

@@ -242,7 +242,7 @@ export class LoginModal {
         </ThemedContext.Provider>
       );
 
-      const isDefaultColors = this.uiConfig?.theme.primary === DEFAULT_PRIMARY_COLOR && this.uiConfig.theme.onPrimary === DEFAULT_ON_PRIMARY_COLOR;
+      const isDefaultColors = this.uiConfig?.theme?.primary === DEFAULT_PRIMARY_COLOR && this.uiConfig.theme?.onPrimary === DEFAULT_ON_PRIMARY_COLOR;
 
       if (this.uiConfig?.theme && !isDefaultColors) {
         const rootElement = document.getElementById("w3a-parent-container") as HTMLElement;

packages/modal/src/ui/loginModal.tsx

@@ -85,7 +85,7 @@ export const Web3AuthProvider = defineComponent({
 
     watch(
       () => props.config,
-      (newConfig) => {
+      (newConfig, _, onInvalidate) => {
         const resetHookState = () => {
           provider.value = null;
           userInfo.value = null;
@@ -94,6 +94,12 @@ export const Web3AuthProvider = defineComponent({
           status.value = null;
         };
 
+        onInvalidate(() => {
+          if (web3Auth.value) {
+            web3Auth.value.cleanup();
+          }
+        });
+
         resetHookState();
         const { web3AuthOptions } = newConfig;
         const web3AuthInstance = new Web3Auth(web3AuthOptions);
@@ -105,8 +111,14 @@ export const Web3AuthProvider = defineComponent({
     watch(
       web3Auth,
       async (newWeb3Auth, _, onInvalidate) => {
+        const controller = new AbortController();
+
+        // Invalidate the controller here before calling any async methods.
+        onInvalidate(() => {
+          controller.abort();
+        });
+
         if (newWeb3Auth) {
-          const controller = new AbortController();
           try {
             initError.value = null;
             isInitializing.value = true;
@@ -116,9 +128,6 @@ export const Web3AuthProvider = defineComponent({
           } finally {
             isInitializing.value = false;
           }
-          onInvalidate(() => {
-            controller.abort();
-          });
         }
       },
       { immediate: true }

packages/modal/src/vue/Web3AuthProvider.ts

@@ -306,6 +306,10 @@ class AuthConnector extends BaseConnector<AuthLoginParams> {
   public async cleanup(): Promise<void> {
     if (!this.authInstance) throw WalletInitializationError.notReady("authInstance is not ready");
     await this.authInstance.cleanup();
+
+    if (this.wsEmbedInstance) {
+      this.wsEmbedInstance.clearInit();
+    }
   }
 
   private getChain(chainId: string) {

packages/no-modal/src/connectors/auth-connector/authConnector.ts

@@ -85,7 +85,7 @@ export const Web3AuthProvider = defineComponent({
 
     watch(
       () => props.config,
-      (newConfig) => {
+      (newConfig, _, onInvalidate) => {
         const resetHookState = () => {
           provider.value = null;
           userInfo.value = null;
@@ -94,6 +94,12 @@ export const Web3AuthProvider = defineComponent({
           status.value = null;
         };
 
+        onInvalidate(() => {
+          if (web3Auth.value) {
+            web3Auth.value.cleanup();
+          }
+        });
+
         resetHookState();
         const { web3AuthOptions } = newConfig;
         const web3AuthInstance = new Web3AuthNoModal(web3AuthOptions);
@@ -107,6 +113,12 @@ export const Web3AuthProvider = defineComponent({
       async (newWeb3Auth, _, onInvalidate) => {
         if (newWeb3Auth) {
           const controller = new AbortController();
+
+          // Invalidate the controller here before calling any async methods.
+          onInvalidate(() => {
+            controller.abort();
+          });
+
           try {
             initError.value = null;
             isInitializing.value = true;
@@ -116,10 +128,6 @@ export const Web3AuthProvider = defineComponent({
           } finally {
             isInitializing.value = false;
           }
-
-          onInvalidate(() => {
-            controller.abort();
-          });
         }
       },
       { immediate: true }