How to integrate Web3Auth tKey MPC SDK

useEffect(() => {
  const init = async () => {
    // Initialization of Service Provider
    try {
      await (tKey.serviceProvider as any).init();
    } catch (error) {
      console.error(error);
    }
  };
  init();
}, []);

const triggerLogin = async () => {
  if (!tKey) {
    uiConsole("tKey not initialized yet");
    return;
  }
  try {
    // Triggering Login using Service Provider ==> opens the popup
    const loginResponse = await (tKey.serviceProvider as any).triggerLogin({
      typeOfLogin: "google",
      verifier: "google-tkey-w3a",
      clientId: "774338308167-q463s7kpvja16l4l0kko3nb925ikds2p.apps.googleusercontent.com",
    });
    console.log("loginResponse", loginResponse);

    setLoginResponse(loginResponse);
    setUser(loginResponse.userInfo);
    return loginResponse;
  } catch (error) {
    uiConsole(error);
  }
};

const isMetadataPresent = async (privateKeyBN: BN) => {
  const metadata = await tKey.storageLayer.getMetadata({ privKey: privateKeyBN });
  if (
    metadata &&
    Object.keys(metadata).length > 0 &&
    (metadata as any).message !== "KEY_NOT_FOUND"
  ) {
    return true;
  } else {
    return false;
  }
};

import BN from "bn.js";

const [localFactorKey, setLocalFactorKey] = useState<BN | null>(null);

useEffect(() => {
  if (!localFactorKey) return;
  localStorage.setItem(
    `tKeyLocalStore\u001c${loginResponse.userInfo.verifier}\u001c${loginResponse.userInfo.verifierId}`,
    JSON.stringify({
      factorKey: localFactorKey.toString("hex"),
      verifier: loginResponse.userInfo.verifier,
      verifierId: loginResponse.userInfo.verifierId,
    }),
  );
}, [localFactorKey]);

import { addFactorKeyMetadata, getTSSPubKey } from "./utils";
import BN from "bn.js";
import { generatePrivate } from "eccrypto";

const [metadataKey, setMetadataKey] = useState<any>();
const [localFactorKey, setLocalFactorKey] = useState<BN | null>(null);
const [oAuthShare, setOAuthShare] = useState<any>(null);
const [signingParams, setSigningParams] = useState<any>(null);

const initializeNewKey = async () => {
  if (!tKey) {
    uiConsole("tKey not initialized yet");
    return;
  }
  try {
    // Trigger Login using Service Provider
    const loginResponse = await triggerLogin();

    const OAuthShare = new BN(TorusUtils.getPostboxKey(loginResponse), "hex");
    setOAuthShare(OAuthShare); // This private key is the OAuth Metadata Share

    // Filter out the null values from the signatures
    const signatures = loginResponse.sessionData.sessionTokenData
      .filter((i) => Boolean(i))
      .map((session) => JSON.stringify({ data: session.token, sig: session.signature }));

    // Get the Device Share
    const tKeyLocalStoreString = localStorage.getItem(
      `tKeyLocalStore\u001c${loginResponse.userInfo.verifier}\u001c${loginResponse.userInfo.verifierId}`,
    );
    const tKeyLocalStore = JSON.parse(tKeyLocalStoreString || "{}");

    // Define the factorKey variable for later usage. Please note that this factorKey represents the factorKey 2, ie. device share or recovery share in the 2/2 flow
    let factorKey: BN | null = null;

    // Check if the user is new or existing
    const existingUser = await isMetadataPresent(OAuthShare);

    if (!existingUser) {
      // If the user is new, we'll generate a new factorKey & deviceShare and store it in the local storage. The factorKey can be used to get the deviceShare from metadata. Device Share is stored on the metadata encrypted by the factorKey.
      factorKey = new BN(generatePrivate());
      const deviceTSSShare = new BN(generatePrivate());
      const deviceTSSIndex = 2;
      const factorPub = getPubKeyPoint(factorKey);
      await tKey.initialize({ useTSS: true, factorPub, deviceTSSShare, deviceTSSIndex });
    } else {
      if (
        tKeyLocalStore.verifier === loginResponse.userInfo.verifier &&
        tKeyLocalStore.verifierId === loginResponse.userInfo.verifierId
      ) {
        // If the user is existing and the local storage has the factorKey corresponding the logged in user, we'll use that factorKey to get the deviceShare from metadata. Device Share is stored on the metadata encrypted by the factorKey.
        factorKey = new BN(tKeyLocalStore.factorKey, "hex");
      } else {
        // If the user is existing but the local storage doesn't have the factorKey corresponding the logged in user, we'll ask the user to enter the backup factor key to get the deviceShare from metadata.
        try {
          factorKey = await swal("Enter your backup share", {
            content: "input" as any,
          }).then(async (value) => {
            uiConsole(value);
            return await (tKey.modules.shareSerialization as any).deserialize(value, "mnemonic");
          });
        } catch (error) {
          uiConsole(error);
          throw new Error("Invalid backup share");
        }
      }
      // if the factorKey is null, it means the user entered an invalid backup share
      if (factorKey === null) throw new Error("Backup share not found");

      // Get the corresponding TSS share from metadata using the factorKey
      const factorKeyMetadata = await tKey.storageLayer.getMetadata<{
        message: string;
      }>({
        privKey: factorKey,
      });

      // If the metadata doesn't have the TSS Share, it means the user has entered an invalid backup share
      if (factorKeyMetadata.message === "KEY_NOT_FOUND") {
        throw new Error("no metadata for your factor key, reset your account");
      }
      const metadataShare = JSON.parse(factorKeyMetadata.message);
      if (!metadataShare.deviceShare || !metadataShare.tssShare)
        throw new Error("Invalid data from metadata");

      const metadataDeviceShare = metadataShare.deviceShare;

      // Initialize the tKey with the TSS Share from metadata
      await tKey.initialize({ neverInitializeNewKey: true });
      await tKey.inputShareStoreSafe(metadataDeviceShare, true);
    }

    // Checks the requiredShares to reconstruct the tKey, starts from 2 by default and each of the above share reduce it by one.
    const { requiredShares } = tKey.getKeyDetails();
    if (requiredShares > 0) {
      throw `Threshold not met. Required Share: ${requiredShares}. You should reset your account.`;
    }
    // Reconstruct the Metadata Key
    const metadataKey = await tKey.reconstructKey();
    setMetadataKey(metadataKey?.privKey.toString("hex"));

    const tssNonce: number = tKey.metadata.tssNonces![tKey.tssTag];
    // tssShare1 = TSS Share from the social login/ service provider
    const tssShare1PubKeyDetails = await tKey.serviceProvider.getTSSPubKey(tKey.tssTag, tssNonce);
    const tssShare1PubKey = {
      x: tssShare1PubKeyDetails.x.toString("hex"),
      y: tssShare1PubKeyDetails.y.toString("hex"),
    };

    // tssShare2 = TSS Share from the local storage of the device
    const { tssShare: tssShare2, tssIndex: tssShare2Index } = await tKey.getTSSShare(factorKey);

    // derive tss pub key, tss pubkey is implicitly formed using the dkgPubKey and the userShare (as well as userTSSIndex)
    const tssPubKey = getTSSPubKey(tssShare1PubKey, tssShare2, tssShare2Index);
    const compressedTSSPubKey = Buffer.from(
      `${tssPubKey.getX().toString(16, 64)}${tssPubKey.getY().toString(16, 64)}`,
      "hex",
    );

    // save factor key and other metadata on local storage
    if (
      !existingUser ||
      !(
        tKeyLocalStore.verifier === loginResponse.userInfo.verifier &&
        tKeyLocalStore.verifierId === loginResponse.userInfo.verifierId
      )
    ) {
      await addFactorKeyMetadata(tKey, factorKey, tssShare2, tssShare2Index, "local storage share");
    }
    await tKey.syncLocalMetadataTransitions();

    setLocalFactorKey(factorKey);

    const nodeDetails = await tKey.serviceProvider.getTSSNodeDetails();

    // Set Signing Params for the Web3 Provider
    setSigningParams({
      tssNonce,
      tssShare2,
      tssShare2Index,
      compressedTSSPubKey,
      signatures,
      nodeDetails,
    });

    // All done!
    uiConsole(
      "Successfully logged in & initialized MPC TKey SDK",
      "TSS Public Key: ",
      tKey.getTSSPub(),
      "Metadata Key",
      metadataKey.privKey.toString("hex"),
      "With Factors/Shares:",
      tKey.getMetadata().getShareDescription(),
    );
  } catch (error) {
    uiConsole(error, "caught");
  }
};

import { setupWeb3 } from "./utils";

const [web3, setWeb3] = useState<any>(null);
const [signingParams, setSigningParams] = useState<any>(null);

useEffect(() => {
  const localSetup = async () => {
    const chainConfig = {
      chainId: "0xaa36a7",
      rpcTarget: "https://rpc.ankr.com/eth_sepolia",
      displayName: "Ethereum Sepolia",
      blockExplorer: "https://sepolia.etherscan.io",
      ticker: "ETH",
      tickerName: "Ethereum",
    };
    const web3Local = await setupWeb3(chainConfig, loginResponse, signingParams);
    setWeb3(web3Local);
  };
  if (signingParams) {
    localSetup();
  }
}, [signingParams]);

import { copyExistingTSSShareForNewFactor, addFactorKeyMetadata } from "./utils";

const copyTSSShareIntoManualBackupFactorkey = async () => {
  try {
    if (!tKey) {
      throw new Error("tkey does not exist, cannot add factor pub");
    }
    if (!localFactorKey) {
      throw new Error("localFactorKey does not exist, cannot add factor pub");
    }

    const backupFactorKey = new BN(generatePrivate());
    const backupFactorPub = getPubKeyPoint(backupFactorKey);

    await copyExistingTSSShareForNewFactor(tKey, backupFactorPub, localFactorKey);

    const { tssShare: tssShare2, tssIndex: tssIndex2 } = await tKey.getTSSShare(localFactorKey);
    await addFactorKeyMetadata(tKey, backupFactorKey, tssShare2, tssIndex2, "manual share");
    const serializedShare = await (tKey.modules.shareSerialization as any).serialize(
      backupFactorKey,
      "mnemonic",
    );
    await tKey.syncLocalMetadataTransitions();
    uiConsole("Successfully created manual backup. Manual Backup Factor: ", serializedShare);
  } catch (err) {
    uiConsole(`Failed to copy share to new manual factor: ${err}`);
  }
};

import { addNewTSSShareAndFactor, addFactorKeyMetadata } from "./utils";

const createNewTSSShareIntoManualBackupFactorkey = async () => {
  try {
    if (!tKey) {
      throw new Error("tkey does not exist, cannot add factor pub");
    }
    if (!localFactorKey) {
      throw new Error("localFactorKey does not exist, cannot add factor pub");
    }

    const backupFactorKey = new BN(generatePrivate());
    const backupFactorPub = getPubKeyPoint(backupFactorKey);
    const tKeyShareDescriptions = await tKey.getMetadata().getShareDescription();
    let backupFactorIndex = 2;
    for (const [key, value] of Object.entries(tKeyShareDescriptions)) {
      console.log(`value of share ${key}`, value);
      // eslint-disable-next-line no-loop-func, array-callback-return
      value.map((factor: any) => {
        factor = JSON.parse(factor);
        if (factor.tssShareIndex > backupFactorIndex) {
          backupFactorIndex = factor.tssShareIndex;
          console.log(`backupFactorIndex of share ${key}`, backupFactorIndex);
        }
      });
    }
    uiConsole("backupFactorIndex:", backupFactorIndex + 1);
    await addNewTSSShareAndFactor(
      tKey,
      backupFactorPub,
      backupFactorIndex + 1,
      localFactorKey,
      signingParams.signatures,
    );

    const { tssShare: tssShare2, tssIndex: tssIndex2 } = await tKey.getTSSShare(backupFactorKey);
    await addFactorKeyMetadata(tKey, backupFactorKey, tssShare2, tssIndex2, "manual share");
    const serializedShare = await (tKey.modules.shareSerialization as any).serialize(
      backupFactorKey,
      "mnemonic",
    );

    await tKey.syncLocalMetadataTransitions();
    uiConsole(" Successfully created manual backup.Manual Backup Factor: ", serializedShare);
  } catch (err) {
    uiConsole(`Failed to create new manual factor ${err}`);
  }
};

const keyDetails = async () => {
  if (!tKey) {
    uiConsole("tKey not initialized yet");
    return;
  }
  // const keyDetails = await tKey.getKeyDetails();

  uiConsole(
    "TSS Public Key: ",
    tKey.getTSSPub(),
    "With Factors/Shares:",
    tKey.getMetadata().getShareDescription(),
  );
  // return keyDetails;
};