From 4011a94fc15b87fe3ab010a25b539d45315952e1 Mon Sep 17 00:00:00 2001
From: Yashovardhan Agrawal <21066442+yashovardhan@users.noreply.github.com>
Date: Wed, 4 Dec 2024 17:09:26 +0530
Subject: [PATCH] Update vue examples with script setup

---
 .../mpc-core-kit-vue-quick-start/src/App.vue  |  10 +-
 .../mpc-core-kit-vue-quick-start/src/Home.vue | 740 +++++++++---------
 .../sfa-vue-quick-start/src/App.vue           |  10 +-
 .../sfa-vue-quick-start/src/Home.vue          | 364 ++++-----
 4 files changed, 527 insertions(+), 597 deletions(-)

diff --git a/mpc-core-kit-web/quick-starts/mpc-core-kit-vue-quick-start/src/App.vue b/mpc-core-kit-web/quick-starts/mpc-core-kit-vue-quick-start/src/App.vue
index 1f006766..df8de1f1 100644
--- a/mpc-core-kit-web/quick-starts/mpc-core-kit-vue-quick-start/src/App.vue
+++ b/mpc-core-kit-web/quick-starts/mpc-core-kit-vue-quick-start/src/App.vue
@@ -2,16 +2,8 @@
   <Home msg="Welcome to Your Vue.js + TypeScript App" />
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue";
+<script setup lang="ts">
 import Home from "./Home.vue";
-
-export default defineComponent({
-  name: "App",
-  components: {
-    Home,
-  },
-});
 </script>
 
 <style>
diff --git a/mpc-core-kit-web/quick-starts/mpc-core-kit-vue-quick-start/src/Home.vue b/mpc-core-kit-web/quick-starts/mpc-core-kit-vue-quick-start/src/Home.vue
index 0c8c00cf..9e4d97af 100644
--- a/mpc-core-kit-web/quick-starts/mpc-core-kit-vue-quick-start/src/Home.vue
+++ b/mpc-core-kit-web/quick-starts/mpc-core-kit-vue-quick-start/src/Home.vue
@@ -2,7 +2,8 @@
 <template>
   <div id="app">
     <h2>
-      <a target="_blank" href="https://web3auth.io/docs/sdk/core-kit/mpc-core-kit/" rel="noreferrer"> Web3Auth MPC Core Kit </a>
+      <a target="_blank" href="https://web3auth.io/docs/sdk/core-kit/mpc-core-kit/" rel="noreferrer"> Web3Auth MPC Core
+        Kit </a>
       Vue.js Quick Start
     </h2>
 
@@ -60,18 +61,15 @@
     </div>
 
     <footer class="footer">
-      <a
-        href="https://github.com/Web3Auth/web3auth-core-kit-examples/tree/main/mpc-core-kit-web/quick-starts/mpc-core-kit-vue-quick-start"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
+      <a href="https://github.com/Web3Auth/web3auth-core-kit-examples/tree/main/mpc-core-kit-web/quick-starts/mpc-core-kit-vue-quick-start"
+        target="_blank" rel="noopener noreferrer">
         Source code
       </a>
     </footer>
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { ref, onMounted } from "vue";
 // IMP START - Quick Start
 import {
@@ -99,413 +97,383 @@ import { BN } from "bn.js";
 import { initializeApp } from "firebase/app";
 import { GoogleAuthProvider, getAuth, signInWithEmailAndPassword, signInWithPopup, UserCredential } from "firebase/auth";
 
-export default {
-  // eslint-disable-next-line vue/multi-word-component-names
-  name: "Home",
-  props: {
-    msg: String,
-  },
-  setup() {
-    const coreKitStatus = ref<COREKIT_STATUS>(COREKIT_STATUS.NOT_INITIALIZED);
-    const backupFactorKey = ref<string>("");
-    const mnemonicFactor = ref<string>("");
-
-    // IMP START - SDK Initialization
-    // IMP START - Dashboard Registration
-    const web3AuthClientId = "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ"; // get from https://dashboard.web3auth.io
-    // IMP END - Dashboard Registration
-
-    // IMP START - Verifier Creation
-    const verifier = "w3a-firebase-demo";
-    // IMP END - Verifier Creation
-
-    const chainConfig = {
-      chainNamespace: CHAIN_NAMESPACES.EIP155,
-      chainId: "0x1", // Please use 0x1 for Mainnet
-      rpcTarget: "https://rpc.ankr.com/eth",
-      displayName: "Ethereum Mainnet",
-      blockExplorer: "https://etherscan.io/",
-      ticker: "ETH",
-      tickerName: "Ethereum",
-    };
-
-    const coreKitInstance = new Web3AuthMPCCoreKit({
-      web3AuthClientId,
-      web3AuthNetwork: WEB3AUTH_NETWORK.MAINNET,
-      manualSync: true,
-      storage: window.localStorage,
-      tssLib,
-    });
+const coreKitStatus = ref<COREKIT_STATUS>(COREKIT_STATUS.NOT_INITIALIZED);
+const backupFactorKey = ref<string>("");
+const mnemonicFactor = ref<string>("");
+
+// IMP START - SDK Initialization
+// IMP START - Dashboard Registration
+const web3AuthClientId = "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ"; // get from https://dashboard.web3auth.io
+// IMP END - Dashboard Registration
+
+// IMP START - Verifier Creation
+const verifier = "w3a-firebase-demo";
+// IMP END - Verifier Creation
+
+const chainConfig = {
+  chainNamespace: CHAIN_NAMESPACES.EIP155,
+  chainId: "0x1", // Please use 0x1 for Mainnet
+  rpcTarget: "https://rpc.ankr.com/eth",
+  displayName: "Ethereum Mainnet",
+  blockExplorer: "https://etherscan.io/",
+  ticker: "ETH",
+  tickerName: "Ethereum",
+};
 
-    // Setup provider for EVM Chain
-    const evmProvider = new EthereumSigningProvider({ config: { chainConfig } });
-    evmProvider.setupProvider(makeEthereumSigner(coreKitInstance));
+const coreKitInstance = new Web3AuthMPCCoreKit({
+  web3AuthClientId,
+  web3AuthNetwork: WEB3AUTH_NETWORK.MAINNET,
+  manualSync: true,
+  storage: window.localStorage,
+  tssLib,
+});
+
+// Setup provider for EVM Chain
+const evmProvider = new EthereumSigningProvider({ config: { chainConfig } });
+evmProvider.setupProvider(makeEthereumSigner(coreKitInstance));
+
+// IMP END - SDK Initialization
+
+// IMP START - Auth Provider Login
+// Your web app's Firebase configuration
+const firebaseConfig = {
+  apiKey: "AIzaSyB0nd9YsPLu-tpdCrsXn8wgsWVAiYEpQ_E",
+  authDomain: "web3auth-oauth-logins.firebaseapp.com",
+  projectId: "web3auth-oauth-logins",
+  storageBucket: "web3auth-oauth-logins.appspot.com",
+  messagingSenderId: "461819774167",
+  appId: "1:461819774167:web:e74addfb6cc88f3b5b9c92",
+};
 
-    // IMP END - SDK Initialization
+// Firebase Initialisation
+const app = initializeApp(firebaseConfig);
+// IMP END - Auth Provider Login
 
-    // IMP START - Auth Provider Login
-    // Your web app's Firebase configuration
-    const firebaseConfig = {
-      apiKey: "AIzaSyB0nd9YsPLu-tpdCrsXn8wgsWVAiYEpQ_E",
-      authDomain: "web3auth-oauth-logins.firebaseapp.com",
-      projectId: "web3auth-oauth-logins",
-      storageBucket: "web3auth-oauth-logins.appspot.com",
-      messagingSenderId: "461819774167",
-      appId: "1:461819774167:web:e74addfb6cc88f3b5b9c92",
-    };
-
-    // Firebase Initialisation
-    const app = initializeApp(firebaseConfig);
-    // IMP END - Auth Provider Login
+onMounted(async () => {
+  const init = async () => {
+    try {
+      // IMP START - SDK Initialization
+      if (coreKitInstance.status === COREKIT_STATUS.NOT_INITIALIZED) {
+        await coreKitInstance.init();
+      }
+      // IMP END - SDK Initialization
 
-    onMounted(async () => {
-      const init = async () => {
-        try {
-          // IMP START - SDK Initialization
-          if (coreKitInstance.status === COREKIT_STATUS.NOT_INITIALIZED) {
-            await coreKitInstance.init();
-          }
-          // IMP END - SDK Initialization
-
-          coreKitStatus.value = coreKitInstance.status;
-        } catch (error) {
-          console.error(error);
-        }
-      };
-
-      init();
-    });
+      coreKitStatus.value = coreKitInstance.status;
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  init();
+});
+
+// IMP START - Auth Provider Login
+const signInWithGoogle = async (): Promise<UserCredential> => {
+  try {
+    const auth = getAuth(app);
+    const googleProvider = new GoogleAuthProvider();
+    const res = await signInWithPopup(auth, googleProvider);
+    console.log(res);
+    return res;
+  } catch (err) {
+    console.error(err);
+    throw err;
+  }
+};
+// IMP END - Auth Provider Login
 
+const login = async () => {
+  try {
+    if (!coreKitInstance) {
+      throw new Error("initiated to login");
+    }
     // IMP START - Auth Provider Login
-    const signInWithGoogle = async (): Promise<UserCredential> => {
-      try {
-        const auth = getAuth(app);
-        const googleProvider = new GoogleAuthProvider();
-        const res = await signInWithPopup(auth, googleProvider);
-        console.log(res);
-        return res;
-      } catch (err) {
-        console.error(err);
-        throw err;
-      }
-    };
+    const loginRes = await signInWithGoogle();
+    const idToken = await loginRes.user.getIdToken(true);
+    const parsedToken = parseToken(idToken);
     // IMP END - Auth Provider Login
 
-    const login = async () => {
-      try {
-        if (!coreKitInstance) {
-          throw new Error("initiated to login");
-        }
-        // IMP START - Auth Provider Login
-        const loginRes = await signInWithGoogle();
-        const idToken = await loginRes.user.getIdToken(true);
-        const parsedToken = parseToken(idToken);
-        // IMP END - Auth Provider Login
-
-        // IMP START - Login
-        const idTokenLoginParams = {
-          verifier,
-          verifierId: parsedToken.sub,
-          idToken,
-        } as JWTLoginParams;
-
-        await coreKitInstance.loginWithJWT(idTokenLoginParams);
-        if (coreKitInstance.status === COREKIT_STATUS.LOGGED_IN) {
-          await coreKitInstance.commitChanges(); // Needed for new accounts
-        }
-        // IMP END - Login
-
-        // IMP START - Recover MFA Enabled Account
-        if (coreKitInstance.status === COREKIT_STATUS.REQUIRED_SHARE) {
-          uiConsole(
-            "required more shares, please enter your backup/ device factor key, or reset account [unrecoverable once reset, please use it with caution]"
-          );
-        }
-        // IMP END - Recover MFA Enabled Account
-
-        coreKitStatus.value = coreKitInstance.status;
-      } catch (err) {
-        uiConsole(err);
-      }
-    };
+    // IMP START - Login
+    const idTokenLoginParams = {
+      verifier,
+      verifierId: parsedToken.sub,
+      idToken,
+    } as JWTLoginParams;
+
+    await coreKitInstance.loginWithJWT(idTokenLoginParams);
+    if (coreKitInstance.status === COREKIT_STATUS.LOGGED_IN) {
+      await coreKitInstance.commitChanges(); // Needed for new accounts
+    }
+    // IMP END - Login
 
     // IMP START - Recover MFA Enabled Account
-    const inputBackupFactorKey = async () => {
-      if (!coreKitInstance) {
-        throw new Error("coreKitInstance not found");
-      }
-      if (!backupFactorKey.value) {
-        throw new Error("backupFactorKey not found");
-      }
-      const factorKey = new BN(backupFactorKey.value, "hex");
-      await coreKitInstance.inputFactorKey(factorKey);
+    if (coreKitInstance.status === COREKIT_STATUS.REQUIRED_SHARE) {
+      uiConsole(
+        "required more shares, please enter your backup/ device factor key, or reset account [unrecoverable once reset, please use it with caution]"
+      );
+    }
+    // IMP END - Recover MFA Enabled Account
 
-      coreKitStatus.value = coreKitInstance.status;
+    coreKitStatus.value = coreKitInstance.status;
+  } catch (err) {
+    uiConsole(err);
+  }
+};
 
-      if (coreKitInstance.status === COREKIT_STATUS.REQUIRED_SHARE) {
-        uiConsole(
-          "required more shares even after inputing backup factor key, please enter your backup/ device factor key, or reset account [unrecoverable once reset, please use it with caution]"
-        );
-      }
-    };
-    // IMP END - Recover MFA Enabled Account
+// IMP START - Recover MFA Enabled Account
+const inputBackupFactorKey = async () => {
+  if (!coreKitInstance) {
+    throw new Error("coreKitInstance not found");
+  }
+  if (!backupFactorKey.value) {
+    throw new Error("backupFactorKey not found");
+  }
+  const factorKey = new BN(backupFactorKey.value, "hex");
+  await coreKitInstance.inputFactorKey(factorKey);
+
+  coreKitStatus.value = coreKitInstance.status;
+
+  if (coreKitInstance.status === COREKIT_STATUS.REQUIRED_SHARE) {
+    uiConsole(
+      "required more shares even after inputing backup factor key, please enter your backup/ device factor key, or reset account [unrecoverable once reset, please use it with caution]"
+    );
+  }
+};
+// IMP END - Recover MFA Enabled Account
 
-    // IMP START - Export Social Account Factor
-    const getSocialMFAFactorKey = async (): Promise<string> => {
-      try {
-        // Create a temporary instance of the MPC Core Kit, used to create an encryption key for the Social Factor
-        const tempCoreKitInstance = new Web3AuthMPCCoreKit({
-          web3AuthClientId,
-          web3AuthNetwork: WEB3AUTH_NETWORK.MAINNET,
-          storage: window.localStorage,
-          tssLib,
-        });
-
-        await tempCoreKitInstance.init();
-
-        // Login using Firebase Email Password
-        const auth = getAuth(app);
-        const res = await signInWithEmailAndPassword(auth, "custom+jwt@firebase.login", "Testing@123");
-        uiConsole(res);
-        const idToken = await res.user.getIdToken(true);
-        const userInfo = parseToken(idToken);
-
-        // Use the Web3Auth SFA SDK to generate an account using the Social Factor
-        await tempCoreKitInstance.loginWithJWT({
-          verifier,
-          verifierId: userInfo.sub,
-          idToken,
-        });
-
-        // Get the private key using the Social Factor, which can be used as a factor key for the MPC Core Kit
-        const factorKey = await tempCoreKitInstance.state.postBoxKey;
-        uiConsole("Social Factor Key: ", factorKey);
-        backupFactorKey.value = factorKey! as string;
-        tempCoreKitInstance.logout();
-        return factorKey as string;
-      } catch (err) {
-        uiConsole(err);
-        return "";
-      }
-    };
-    // IMP END - Export Social Account Factor
+// IMP START - Export Social Account Factor
+const getSocialMFAFactorKey = async (): Promise<string> => {
+  try {
+    // Create a temporary instance of the MPC Core Kit, used to create an encryption key for the Social Factor
+    const tempCoreKitInstance = new Web3AuthMPCCoreKit({
+      web3AuthClientId,
+      web3AuthNetwork: WEB3AUTH_NETWORK.MAINNET,
+      storage: window.localStorage,
+      tssLib,
+    });
 
-    // IMP START - Enable Multi Factor Authentication
-    const enableMFA = async () => {
-      if (!coreKitInstance) {
-        throw new Error("coreKitInstance is not set");
-      }
-      try {
-        const factorKey = new BN(await getSocialMFAFactorKey(), "hex");
-        uiConsole("Using the Social Factor Key to Enable MFA, please wait...");
-        await coreKitInstance.enableMFA({ factorKey, shareDescription: FactorKeyTypeShareDescription.SocialShare });
-
-        if (coreKitInstance.status === COREKIT_STATUS.LOGGED_IN) {
-          await coreKitInstance.commitChanges();
-        }
-
-        uiConsole(
-          "MFA enabled, device factor stored in local store, deleted hashed cloud key, your backup factor key is associated with the firebase email password account in the app"
-        );
-      } catch (e) {
-        uiConsole(e);
-      }
-    };
-    // IMP END - Enable Multi Factor Authentication
-
-    // IMP START - Delete Factor
-    const deleteFactor = async () => {
-      let factorPub: string | undefined;
-      for (const [key, value] of Object.entries(coreKitInstance.getKeyDetails().shareDescriptions)) {
-        if (value.length > 0) {
-          const parsedData = JSON.parse(value[0]);
-          if (parsedData.module === FactorKeyTypeShareDescription.SocialShare) {
-            factorPub = key;
-          }
-        }
-      }
-      if (factorPub) {
-        uiConsole("Deleting Social Factor, please wait...", "Factor Pub:", factorPub);
-        const pub = Point.fromSEC1(secp256k1, factorPub);
-        await coreKitInstance.deleteFactor(pub);
-        await coreKitInstance.commitChanges();
-        uiConsole("Social Factor deleted");
-      } else {
-        uiConsole("No social factor found to delete");
-      }
-    };
-    // IMP END - Delete Factor
+    await tempCoreKitInstance.init();
 
-    const keyDetails = async () => {
-      if (!coreKitInstance) {
-        throw new Error("coreKitInstance not found");
-      }
-      uiConsole(coreKitInstance.getKeyDetails());
-    };
-
-    const getDeviceFactor = async () => {
-      try {
-        const factorKey = await coreKitInstance.getDeviceFactor();
-        backupFactorKey.value = factorKey!;
-        uiConsole("Device share: ", factorKey);
-      } catch (e) {
-        uiConsole(e);
-      }
-    };
+    // Login using Firebase Email Password
+    const auth = getAuth(app);
+    const res = await signInWithEmailAndPassword(auth, "custom+jwt@firebase.login", "Testing@123");
+    uiConsole(res);
+    const idToken = await res.user.getIdToken(true);
+    const userInfo = parseToken(idToken);
 
-    const createMnemonicFactor = async (): Promise<void> => {
-      if (!coreKitInstance) {
-        throw new Error("coreKitInstance is not set");
-      }
-      uiConsole("export share type: ", TssShareType.RECOVERY);
-      const factorKey = generateFactorKey();
-      await coreKitInstance.createFactor({
-        shareType: TssShareType.RECOVERY,
-        factorKey: factorKey.private,
-        shareDescription: FactorKeyTypeShareDescription.SeedPhrase,
-      });
-      const factorKeyMnemonic = await keyToMnemonic(factorKey.private.toString("hex"));
-
-      if (coreKitInstance.status === COREKIT_STATUS.LOGGED_IN) {
-        await coreKitInstance.commitChanges();
-      }
+    // Use the Web3Auth SFA SDK to generate an account using the Social Factor
+    await tempCoreKitInstance.loginWithJWT({
+      verifier,
+      verifierId: userInfo.sub,
+      idToken,
+    });
 
-      uiConsole("Export factor key mnemonic: ", factorKeyMnemonic);
-    };
+    // Get the private key using the Social Factor, which can be used as a factor key for the MPC Core Kit
+    const factorKey = await tempCoreKitInstance.state.postBoxKey;
+    uiConsole("Social Factor Key: ", factorKey);
+    backupFactorKey.value = factorKey! as string;
+    tempCoreKitInstance.logout();
+    return factorKey as string;
+  } catch (err) {
+    uiConsole(err);
+    return "";
+  }
+};
+// IMP END - Export Social Account Factor
+
+// IMP START - Enable Multi Factor Authentication
+const enableMFA = async () => {
+  if (!coreKitInstance) {
+    throw new Error("coreKitInstance is not set");
+  }
+  try {
+    const factorKey = new BN(await getSocialMFAFactorKey(), "hex");
+    uiConsole("Using the Social Factor Key to Enable MFA, please wait...");
+    await coreKitInstance.enableMFA({ factorKey, shareDescription: FactorKeyTypeShareDescription.SocialShare });
+
+    if (coreKitInstance.status === COREKIT_STATUS.LOGGED_IN) {
+      await coreKitInstance.commitChanges();
+    }
 
-    const MnemonicToFactorKeyHex = async () => {
-      if (!coreKitInstance) {
-        throw new Error("coreKitInstance is not set");
-      }
-      try {
-        const factorKey = await mnemonicToKey(mnemonicFactor.value);
-        backupFactorKey.value = factorKey;
-        return factorKey;
-      } catch (error) {
-        uiConsole(error);
-      }
-    };
-
-    const getUserInfo = async () => {
-      // IMP START - Get User Information
-      const user = await coreKitInstance.getUserInfo();
-      // IMP END - Get User Information
-      uiConsole(user);
-    };
-
-    const logout = async () => {
-      // IMP START - Logout
-      await coreKitInstance.logout();
-      // IMP END - Logout
-      coreKitStatus.value = coreKitInstance.status;
-      uiConsole("logged out");
-    };
-
-    // IMP START - Blockchain Calls
-    const getAccounts = async () => {
-      if (!coreKitInstance) {
-        uiConsole("provider not initialized yet");
-        return;
+    uiConsole(
+      "MFA enabled, device factor stored in local store, deleted hashed cloud key, your backup factor key is associated with the firebase email password account in the app"
+    );
+  } catch (e) {
+    uiConsole(e);
+  }
+};
+// IMP END - Enable Multi Factor Authentication
+
+// IMP START - Delete Factor
+const deleteFactor = async () => {
+  let factorPub: string | undefined;
+  for (const [key, value] of Object.entries(coreKitInstance.getKeyDetails().shareDescriptions)) {
+    if (value.length > 0) {
+      const parsedData = JSON.parse(value[0]);
+      if (parsedData.module === FactorKeyTypeShareDescription.SocialShare) {
+        factorPub = key;
       }
-      const web3 = new Web3(evmProvider);
+    }
+  }
+  if (factorPub) {
+    uiConsole("Deleting Social Factor, please wait...", "Factor Pub:", factorPub);
+    const pub = Point.fromSEC1(secp256k1, factorPub);
+    await coreKitInstance.deleteFactor(pub);
+    await coreKitInstance.commitChanges();
+    uiConsole("Social Factor deleted");
+  } else {
+    uiConsole("No social factor found to delete");
+  }
+};
+// IMP END - Delete Factor
 
-      // Get user's Ethereum public address
-      const address = await web3.eth.getAccounts();
-      uiConsole(address);
-    };
+const keyDetails = async () => {
+  if (!coreKitInstance) {
+    throw new Error("coreKitInstance not found");
+  }
+  uiConsole(coreKitInstance.getKeyDetails());
+};
 
-    const getBalance = async () => {
-      if (!coreKitInstance) {
-        uiConsole("provider not initialized yet");
-        return;
-      }
-      const web3 = new Web3(evmProvider);
+const getDeviceFactor = async () => {
+  try {
+    const factorKey = await coreKitInstance.getDeviceFactor();
+    backupFactorKey.value = factorKey!;
+    uiConsole("Device share: ", factorKey);
+  } catch (e) {
+    uiConsole(e);
+  }
+};
 
-      // Get user's Ethereum public address
-      const address = (await web3.eth.getAccounts())[0];
+const createMnemonicFactor = async (): Promise<void> => {
+  if (!coreKitInstance) {
+    throw new Error("coreKitInstance is not set");
+  }
+  uiConsole("export share type: ", TssShareType.RECOVERY);
+  const factorKey = generateFactorKey();
+  await coreKitInstance.createFactor({
+    shareType: TssShareType.RECOVERY,
+    factorKey: factorKey.private,
+    shareDescription: FactorKeyTypeShareDescription.SeedPhrase,
+  });
+  const factorKeyMnemonic = await keyToMnemonic(factorKey.private.toString("hex"));
+
+  if (coreKitInstance.status === COREKIT_STATUS.LOGGED_IN) {
+    await coreKitInstance.commitChanges();
+  }
+
+  uiConsole("Export factor key mnemonic: ", factorKeyMnemonic);
+};
 
-      // Get user's balance in ether
-      const balance = web3.utils.fromWei(
-        await web3.eth.getBalance(address), // Balance is in wei
-        "ether"
-      );
-      uiConsole(balance);
-    };
+const MnemonicToFactorKeyHex = async () => {
+  if (!coreKitInstance) {
+    throw new Error("coreKitInstance is not set");
+  }
+  try {
+    const factorKey = await mnemonicToKey(mnemonicFactor.value);
+    backupFactorKey.value = factorKey;
+    return factorKey;
+  } catch (error) {
+    uiConsole(error);
+  }
+};
 
-    const signMessage = async () => {
-      if (!coreKitInstance) {
-        uiConsole("provider not initialized yet");
-        return;
-      }
-      const web3 = new Web3(evmProvider);
+const getUserInfo = async () => {
+  // IMP START - Get User Information
+  const user = await coreKitInstance.getUserInfo();
+  // IMP END - Get User Information
+  uiConsole(user);
+};
 
-      // Get user's Ethereum public address
-      const fromAddress = (await web3.eth.getAccounts())[0];
+const logout = async () => {
+  // IMP START - Logout
+  await coreKitInstance.logout();
+  // IMP END - Logout
+  coreKitStatus.value = coreKitInstance.status;
+  uiConsole("logged out");
+};
 
-      const originalMessage = "YOUR_MESSAGE";
+// IMP START - Blockchain Calls
+const getAccounts = async () => {
+  if (!coreKitInstance) {
+    uiConsole("provider not initialized yet");
+    return;
+  }
+  const web3 = new Web3(evmProvider);
+
+  // Get user's Ethereum public address
+  const address = await web3.eth.getAccounts();
+  uiConsole(address);
+};
 
-      // Sign the message
-      const signedMessage = await web3.eth.personal.sign(
-        originalMessage,
-        fromAddress,
-        "test password!" // configure your own password here.
-      );
-      uiConsole(signedMessage);
-    };
-    // IMP END - Blockchain Calls
-
-    const criticalResetAccount = async (): Promise<void> => {
-      // This is a critical function that should only be used for testing purposes
-      // Resetting your account means clearing all the metadata associated with it from the metadata server
-      // The key details will be deleted from our server and you will not be able to recover your account
-      if (!coreKitInstance) {
-        throw new Error("coreKitInstance is not set");
-      }
-      // if (selectedNetwork === WEB3AUTH_NETWORK.MAINNET) {
-      //   throw new Error("reset account is not recommended on mainnet");
-      // }
-      await coreKitInstance.tKey.storageLayer.setMetadata({
-        privKey: new BN(coreKitInstance.state.postBoxKey!, "hex"),
-        input: { message: "KEY_NOT_FOUND" },
-      });
-      if (coreKitInstance.status === COREKIT_STATUS.LOGGED_IN) {
-        await coreKitInstance.commitChanges();
-      }
-      uiConsole("reset");
-      logout();
-    };
-
-    function uiConsole(...args: any[]): void {
-      const el = document.querySelector("#console>p");
-      if (el) {
-        el.innerHTML = JSON.stringify(args || {}, null, 2);
-      }
-      console.log(...args);
-    }
+const getBalance = async () => {
+  if (!coreKitInstance) {
+    uiConsole("provider not initialized yet");
+    return;
+  }
+  const web3 = new Web3(evmProvider);
+
+  // Get user's Ethereum public address
+  const address = (await web3.eth.getAccounts())[0];
+
+  // Get user's balance in ether
+  const balance = web3.utils.fromWei(
+    await web3.eth.getBalance(address), // Balance is in wei
+    "ether"
+  );
+  uiConsole(balance);
+};
 
-    return {
-      coreKitStatus,
-      getDeviceFactor,
-      deleteFactor,
-      COREKIT_STATUS,
-      backupFactorKey,
-      inputBackupFactorKey,
-      mnemonicFactor,
-      MnemonicToFactorKeyHex,
-      login,
-      logout,
-      getUserInfo,
-      getAccounts,
-      getBalance,
-      signMessage,
-      criticalResetAccount,
-      keyDetails,
-      enableMFA,
-      createMnemonicFactor,
-      getSocialMFAFactorKey,
-    };
-  },
+const signMessage = async () => {
+  if (!coreKitInstance) {
+    uiConsole("provider not initialized yet");
+    return;
+  }
+  const web3 = new Web3(evmProvider);
+
+  // Get user's Ethereum public address
+  const fromAddress = (await web3.eth.getAccounts())[0];
+
+  const originalMessage = "YOUR_MESSAGE";
+
+  // Sign the message
+  const signedMessage = await web3.eth.personal.sign(
+    originalMessage,
+    fromAddress,
+    "test password!" // configure your own password here.
+  );
+  uiConsole(signedMessage);
 };
+// IMP END - Blockchain Calls
+
+const criticalResetAccount = async (): Promise<void> => {
+  // This is a critical function that should only be used for testing purposes
+  // Resetting your account means clearing all the metadata associated with it from the metadata server
+  // The key details will be deleted from our server and you will not be able to recover your account
+  if (!coreKitInstance) {
+    throw new Error("coreKitInstance is not set");
+  }
+  // if (selectedNetwork === WEB3AUTH_NETWORK.MAINNET) {
+  //   throw new Error("reset account is not recommended on mainnet");
+  // }
+  await coreKitInstance.tKey.storageLayer.setMetadata({
+    privKey: new BN(coreKitInstance.state.postBoxKey!, "hex"),
+    input: { message: "KEY_NOT_FOUND" },
+  });
+  if (coreKitInstance.status === COREKIT_STATUS.LOGGED_IN) {
+    await coreKitInstance.commitChanges();
+  }
+  uiConsole("reset");
+  logout();
+};
+
+function uiConsole(...args: any[]): void {
+  const el = document.querySelector("#console>p");
+  if (el) {
+    el.innerHTML = JSON.stringify(args || {}, null, 2);
+  }
+  console.log(...args);
+}
+
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
@@ -559,7 +527,7 @@ a {
   flex-flow: row wrap;
 }
 
-.flex-container > div {
+.flex-container>div {
   width: 100px;
   margin: 10px;
   text-align: center;
diff --git a/single-factor-auth-web/quick-starts/sfa-vue-quick-start/src/App.vue b/single-factor-auth-web/quick-starts/sfa-vue-quick-start/src/App.vue
index 1f006766..df8de1f1 100644
--- a/single-factor-auth-web/quick-starts/sfa-vue-quick-start/src/App.vue
+++ b/single-factor-auth-web/quick-starts/sfa-vue-quick-start/src/App.vue
@@ -2,16 +2,8 @@
   <Home msg="Welcome to Your Vue.js + TypeScript App" />
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue";
+<script setup lang="ts">
 import Home from "./Home.vue";
-
-export default defineComponent({
-  name: "App",
-  components: {
-    Home,
-  },
-});
 </script>
 
 <style>
diff --git a/single-factor-auth-web/quick-starts/sfa-vue-quick-start/src/Home.vue b/single-factor-auth-web/quick-starts/sfa-vue-quick-start/src/Home.vue
index 6cf33893..de77218b 100644
--- a/single-factor-auth-web/quick-starts/sfa-vue-quick-start/src/Home.vue
+++ b/single-factor-auth-web/quick-starts/sfa-vue-quick-start/src/Home.vue
@@ -42,7 +42,7 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { ref, onMounted } from "vue";
 // IMP START - Quick Start
 import { Web3Auth, decodeToken } from "@web3auth/single-factor-auth";
@@ -59,205 +59,183 @@ import RPC from "./ethersRPC";
 import { initializeApp } from "firebase/app";
 import { GoogleAuthProvider, getAuth, signInWithPopup, UserCredential } from "firebase/auth";
 
-export default {
-  // eslint-disable-next-line vue/multi-word-component-names
-  name: "Home",
-  props: {
-    msg: String,
-  },
-  setup() {
-    const loggedIn = ref<boolean>(false);
-    let provider = <IProvider | null>null;
-
-    // IMP START - Dashboard Registration
-    const clientId = "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ"; // get from https://dashboard.web3auth.io
-    // IMP END - Dashboard Registration
-
-    // IMP START - Verifier Creation
-    const verifier = "w3a-firebase-demo";
-    // IMP END - Verifier Creation
-
-    // IMP START - Chain Config
-    const chainConfig = {
-      chainNamespace: CHAIN_NAMESPACES.EIP155,
-      chainId: "0xaa36a7",
-      rpcTarget: "https://rpc.ankr.com/eth_sepolia",
-      // Avoid using public rpcTarget in production.
-      // Use services like Infura, Quicknode etc
-      displayName: "Ethereum Sepolia Testnet",
-      blockExplorerUrl: "https://sepolia.etherscan.io",
-      ticker: "ETH",
-      tickerName: "Ethereum",
-      logo: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
-    };
-    // IMP END - Chain Config
-    
-    // IMP START - SDK Initialization
-    const privateKeyProvider = new EthereumPrivateKeyProvider({
-      config: { chainConfig },
-    });
-
-    const web3auth = new Web3Auth({
-      clientId, // Get your Client ID from Web3Auth Dashboard
-      web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
-      privateKeyProvider,
-    });
-
-    // IMP END - SDK Initialization
-
-    // IMP START - Auth Provider Login
-    // Your web app's Firebase configuration
-    const firebaseConfig = {
-      apiKey: "AIzaSyB0nd9YsPLu-tpdCrsXn8wgsWVAiYEpQ_E",
-      authDomain: "web3auth-oauth-logins.firebaseapp.com",
-      projectId: "web3auth-oauth-logins",
-      storageBucket: "web3auth-oauth-logins.appspot.com",
-      messagingSenderId: "461819774167",
-      appId: "1:461819774167:web:e74addfb6cc88f3b5b9c92",
-    };
-
-    // Firebase Initialisation
-    const app = initializeApp(firebaseConfig);
-    // IMP END - Auth Provider Login
-
-    onMounted(async () => {
-      const init = async () => {
-        try {
-          // IMP START - SDK Initialization
-          await web3auth.init();
-          // IMP END - SDK Initialization
-          provider = web3auth.provider;
-          if (web3auth.status === ADAPTER_EVENTS.CONNECTED) {
-            loggedIn.value = true;
-          }
-        } catch (error) {
-          console.error(error);
-        }
-      };
-
-      init();
-    });
-
-    // IMP START - Auth Provider Login
-    const signInWithGoogle = async (): Promise<UserCredential> => {
-      try {
-        const auth = getAuth(app);
-        const googleProvider = new GoogleAuthProvider();
-        const res = await signInWithPopup(auth, googleProvider);
-        console.log(res);
-        return res;
-      } catch (err) {
-        console.error(err);
-        throw err;
-      }
-    };
-
-    // IMP END - Auth Provider Login
+const loggedIn = ref<boolean>(false);
+let provider = <IProvider | null>null;
+
+// IMP START - Dashboard Registration
+const clientId = "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ"; // get from https://dashboard.web3auth.io
+// IMP END - Dashboard Registration
+
+// IMP START - Verifier Creation
+const verifier = "w3a-firebase-demo";
+// IMP END - Verifier Creation
+
+// IMP START - Chain Config
+const chainConfig = {
+  chainNamespace: CHAIN_NAMESPACES.EIP155,
+  chainId: "0xaa36a7",
+  rpcTarget: "https://rpc.ankr.com/eth_sepolia",
+  // Avoid using public rpcTarget in production.
+  // Use services like Infura, Quicknode etc
+  displayName: "Ethereum Sepolia Testnet",
+  blockExplorerUrl: "https://sepolia.etherscan.io",
+  ticker: "ETH",
+  tickerName: "Ethereum",
+  logo: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
+};
+// IMP END - Chain Config
+
+// IMP START - SDK Initialization
+const privateKeyProvider = new EthereumPrivateKeyProvider({
+  config: { chainConfig },
+});
+
+const web3auth = new Web3Auth({
+  clientId, // Get your Client ID from Web3Auth Dashboard
+  web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
+  privateKeyProvider,
+});
+
+// IMP END - SDK Initialization
+
+// IMP START - Auth Provider Login
+// Your web app's Firebase configuration
+const firebaseConfig = {
+  apiKey: "AIzaSyB0nd9YsPLu-tpdCrsXn8wgsWVAiYEpQ_E",
+  authDomain: "web3auth-oauth-logins.firebaseapp.com",
+  projectId: "web3auth-oauth-logins",
+  storageBucket: "web3auth-oauth-logins.appspot.com",
+  messagingSenderId: "461819774167",
+  appId: "1:461819774167:web:e74addfb6cc88f3b5b9c92",
+};
 
-    const login = async () => {
-      if (!web3auth) {
-        uiConsole("web3auth initialised yet");
-        return;
-      }
-      // IMP START - Auth Provider Login
-      // login with firebase
-      const loginRes = await signInWithGoogle();
-      // get the id token from firebase
-      const idToken = await loginRes.user.getIdToken(true);
-      const { payload } = decodeToken(idToken);
-      // IMP END - Auth Provider Login
-
-      // IMP START - Login
-      const web3authProvider = await web3auth.connect({
-        verifier,
-        verifierId: (payload as any).sub,
-        idToken,
-      });
-      // IMP END - Login
-
-      if (web3authProvider) {
+// Firebase Initialisation
+const app = initializeApp(firebaseConfig);
+// IMP END - Auth Provider Login
+
+onMounted(async () => {
+  const init = async () => {
+    try {
+      // IMP START - SDK Initialization
+      await web3auth.init();
+      // IMP END - SDK Initialization
+      provider = web3auth.provider;
+      if (web3auth.status === ADAPTER_EVENTS.CONNECTED) {
         loggedIn.value = true;
-        provider = web3authProvider;
-      }
-    };
-
-    const getUserInfo = async () => {
-      // IMP START - Get User Information
-      const user = await web3auth.getUserInfo();
-      // IMP END - Get User Information
-      uiConsole(user);
-    };
-
-    const logout = async () => {
-      // IMP START - Logout
-      await web3auth.logout();
-      // IMP END - Logout
-      provider = null;
-      loggedIn.value = false;
-      uiConsole("logged out");
-    };
-
-    // IMP START - Blockchain Calls
-    const getAccounts = async () => {
-      if (!provider) {
-        uiConsole("provider not initialized yet");
-        return;
-      }
-      const address = await RPC.getAccounts(provider);
-      uiConsole(address);
-    };
-
-    const getBalance = async () => {
-      if (!provider) {
-        uiConsole("provider not initialized yet");
-        return;
       }
-      const balance = await RPC.getBalance(provider);
-      uiConsole(balance);
-    };
-
-    const signMessage = async () => {
-      if (!provider) {
-        uiConsole("provider not initialized yet");
-        return;
-      }
-      const signedMessage = await RPC.signMessage(provider);
-      uiConsole(signedMessage);
-    };
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  init();
+});
+
+// IMP START - Auth Provider Login
+const signInWithGoogle = async (): Promise<UserCredential> => {
+  try {
+    const auth = getAuth(app);
+    const googleProvider = new GoogleAuthProvider();
+    const res = await signInWithPopup(auth, googleProvider);
+    console.log(res);
+    return res;
+  } catch (err) {
+    console.error(err);
+    throw err;
+  }
+};
 
+// IMP END - Auth Provider Login
+
+const login = async () => {
+  if (!web3auth) {
+    uiConsole("web3auth initialised yet");
+    return;
+  }
+  // IMP START - Auth Provider Login
+  // login with firebase
+  const loginRes = await signInWithGoogle();
+  // get the id token from firebase
+  const idToken = await loginRes.user.getIdToken(true);
+  const { payload } = decodeToken(idToken);
+  // IMP END - Auth Provider Login
+
+  // IMP START - Login
+  const web3authProvider = await web3auth.connect({
+    verifier,
+    verifierId: (payload as any).sub,
+    idToken,
+  });
+  // IMP END - Login
+
+  if (web3authProvider) {
+    loggedIn.value = true;
+    provider = web3authProvider;
+  }
+};
 
-    const sendTransaction = async () => {
-      if (!provider) {
-        uiConsole("provider not initialized yet");
-        return;
-      }
-      uiConsole("Sending Transaction...");
-      const transactionReceipt = await RPC.sendTransaction(provider);
-      uiConsole(transactionReceipt);
-    };
-    // IMP END - Blockchain Calls
-
-    function uiConsole(...args: any[]): void {
-      const el = document.querySelector("#console>pre");
-      if (el) {
-        el.innerHTML = JSON.stringify(args || {}, null, 2);
-      }
-      console.log(...args);
-    }
+const getUserInfo = async () => {
+  // IMP START - Get User Information
+  const user = await web3auth.getUserInfo();
+  // IMP END - Get User Information
+  uiConsole(user);
+};
+
+const logout = async () => {
+  // IMP START - Logout
+  await web3auth.logout();
+  // IMP END - Logout
+  provider = null;
+  loggedIn.value = false;
+  uiConsole("logged out");
+};
 
-    return {
-      loggedIn,
-      provider,
-      web3auth,
-      login,
-      logout,
-      getUserInfo,
-      getAccounts,
-      getBalance,
-      signMessage,
-    };
-  },
+// IMP START - Blockchain Calls
+const getAccounts = async () => {
+  if (!provider) {
+    uiConsole("provider not initialized yet");
+    return;
+  }
+  const address = await RPC.getAccounts(provider);
+  uiConsole(address);
 };
+
+const getBalance = async () => {
+  if (!provider) {
+    uiConsole("provider not initialized yet");
+    return;
+  }
+  const balance = await RPC.getBalance(provider);
+  uiConsole(balance);
+};
+
+const signMessage = async () => {
+  if (!provider) {
+    uiConsole("provider not initialized yet");
+    return;
+  }
+  const signedMessage = await RPC.signMessage(provider);
+  uiConsole(signedMessage);
+};
+
+const sendTransaction = async () => {
+  if (!provider) {
+    uiConsole("provider not initialized yet");
+    return;
+  }
+  uiConsole("Sending Transaction...");
+  const transactionReceipt = await RPC.sendTransaction(provider);
+  uiConsole(transactionReceipt);
+};
+// IMP END - Blockchain Calls
+
+function uiConsole(...args: any[]): void {
+  const el = document.querySelector("#console>pre");
+  if (el) {
+    el.innerHTML = JSON.stringify(args || {}, null, 2);
+  }
+  console.log(...args);
+}
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->