configureGoogleAccount

How to call the API from an app

Identify Snap connects to your currently connected Metamask account by default. To learn how apps can connect to Identify Snap using a non-metamask(external) account, refer to this documentation.

Then, depending on whether you're trying to connect to a metamask account or a non-metamask account, you can call the snap API in the following way:

const snapId = `npm:@tuum-tech/identify`

const metamaskAddress = '0x2e5fF0267b678A0FAF9A9f5b0FBf7Ac9638B5b57'
const accessToken = 'ya29.a0Ael9sCPgMSbLRD5PIm5nyP............IXJ-OkUbbQ0166'
const params = {
  metamaskAddress,
  accessToken
  /* 
    Uncomment the below line if you want to connect to a non-metamask account
  */
  // ...externalAccountParams
}

const handleSaveVCAPI = async () => {
  await window.ethereum.request({
    method: 'wallet_invokeSnap',
    params: {
      snapId,
      request: {
        method: 'configureGoogleAccount',
        params: params
      }
    }
  })
}

Note: If you want to look at an example code where you can implement a google sign in functionality to automatically retrieve the accessToken from the user, look at the github link below:

https://github.com/tuum-tech/identify/blob/main/packages/site/src/components/cards/ConfigureGoogleAccount.tsx

import { useGoogleLogin } from '@react-oauth/google';
import { FC, useContext, useRef, useState } from 'react';
import {
  MetaMaskContext,
  MetamaskActions,
} from '../../contexts/MetamaskContext';
import useModal from '../../hooks/useModal';
import {
  configureGoogleAccount,
  getCurrentMetamaskAccount,
  getCurrentNetwork,
  shouldDisplayReconnectButton,
} from '../../utils';
import { Card, SendHelloButton } from '../base';
import ExternalAccount, {
  GetExternalAccountRef,
} from '../sections/ExternalAccount';

type Props = {
  setMetamaskAddress: React.Dispatch<React.SetStateAction<string>>;
  setCurrentChainId: React.Dispatch<React.SetStateAction<string>>;
};

const ConfigureGoogleAccount: FC<Props> = ({
  setMetamaskAddress,
  setCurrentChainId,
}) => {
  const [state, dispatch] = useContext(MetaMaskContext);
  const [loading, setLoading] = useState(false);
  const { showModal } = useModal();

  const externalAccountRef = useRef<GetExternalAccountRef>(null);

  const handleConfigureGoogleAccount = useGoogleLogin({
    onSuccess: async (tokenResponse) => {
      setLoading(true);

      const metamaskAddress = await getCurrentMetamaskAccount();
      setMetamaskAddress(metamaskAddress);
      setCurrentChainId(await getCurrentNetwork());

      const externalAccountParams =
        externalAccountRef.current?.handleGetAccountParams();

      const configured = await configureGoogleAccount(
        metamaskAddress,
        tokenResponse.access_token,
        externalAccountParams,
      );
      console.log('Google Drive Configured: ', configured);
      showModal({
        title: 'Verify VC',
        content: `Google Drive Configured: ${configured}`,
      });
      setLoading(false);
    },
    onError: (e) => {
      console.error('Login Failed', e);
      dispatch({ type: MetamaskActions.SetError, payload: e });
    },
    scope:
      'https://www.googleapis.com/auth/drive.file https://www.googleapis.com/auth/drive.metadata.readonly',
  });

  return (
    <Card
      content={{
        title: 'configureGoogleAccount',
        description: 'Configure Google Account',
        form: <ExternalAccount ref={externalAccountRef} />,
        button: (
          <SendHelloButton
            buttonText="Configure Google Account"
            onClick={handleConfigureGoogleAccount}
            disabled={!state.installedSnap}
            loading={loading}
          />
        ),
      }}
      disabled={!state.installedSnap}
      fullWidth={
        state.isFlask &&
        Boolean(state.installedSnap) &&
        !shouldDisplayReconnectButton(state.installedSnap)
      }
    />
  );
};

export { ConfigureGoogleAccount };

How the API is handled between the app and snap

What the API does

1. Retrieves the currently connected account and the blockchain network the user has selected on Metamask. If it's the first time, the account info is also saved in snap state.

2. Retrieves the VCs from google drive

3. Retrieves the VCs from the local Metamask snap state

4. Compare the VCs from both stores and figure out what VCs are missing in snap state that are present in google drive and what VCs are missing in google drive that are present in snap state

5. Import the missing VCs from google drive onto Metamask snap state

6. Export the missing VCs from Metamask snap state onto google drive

Some example responses:

true

How the API works

https://github.com/tuum-tech/identify/blob/main/packages/snap/src/rpc/gdrive/configureGoogleAccount.ts

import { divider, heading, text } from '@metamask/snaps-ui';
import {
  GoogleToken,
  IdentitySnapParams,
  SnapDialogParams,
} from '../../interfaces';
import { verifyToken } from '../../plugins/veramo/google-drive-data-store';
import { generateCommonPanel, snapDialog } from '../../snap/dialog';
import { getCurrentCoinType, updateSnapState } from '../../snap/state';

export const configureGoogleAccount = async (
  identitySnapParams: IdentitySnapParams,
  { accessToken }: GoogleToken,
) => {
  const { origin, snap, state, account } = identitySnapParams;
  try {
    const newGUserEmail = await verifyToken(accessToken);
    const coinType = await getCurrentCoinType();

    const currentGUserInfo =
      state.accountState[coinType][account.evmAddress].accountConfig.identity
        .googleUserInfo;

    const dialogParams: SnapDialogParams = {
      type: 'confirmation',
      content: await generateCommonPanel(origin, [
        heading('Configure Google Drive'),
        text('Would you like to change your Google account to the following?'),
        divider(),
        text(
          `Current Gdrive account: ${
            currentGUserInfo.email ? currentGUserInfo.email : 'Not yet set'
          }`,
        ),
        text(`New Gdrive account: ${newGUserEmail}`),
      ]),
    };

    const result = await snapDialog(snap, dialogParams);
    if (result) {
      state.accountState[coinType][
        account.evmAddress
      ].accountConfig.identity.googleUserInfo.accessToken = accessToken;

      state.accountState[coinType][
        account.evmAddress
      ].accountConfig.identity.googleUserInfo.email = newGUserEmail;

      console.log('new state: ', JSON.stringify(state, null, 4));
      await updateSnapState(snap, state);
      return true;
    }
    return false;
  } catch (error) {
    console.error(
      'Could not configure Google Drive',
      JSON.stringify(error, null, 4),
    );
    throw error;
  }
};

Live Demo on CodePen

Some things to keep in mind while interacting with the above demo

• If you're getting any errors with the live demo, make sure you go through the FAQs section to learn about what you may be missing. You need to install Metamask in your browser for the live demo to work

• Whenever there is a new version of the IdentifySnap, always make sure to first uninstall the old version of the snap from Metamask and only then try the above demo so it can install the latest version

To ease the integration of Identify Snap on an application, we have created a template web application that you can run locally and check out the code in its entirety to learn how you can integrate and interact with various APIs exposed by Identify Snap. Check out the full source code at template application github repository.

You can also check out the API reference to learn how each API works.