getVCs

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`

// If filter is undefined, Identify snap retrieves all the VCs from the given store
const filter = undefined
/*
  // You can also retrieve VCs according to their vcIds
  const filter = {
    type: 'id',
    filter: ['532e0b77-fd00-47cf-8b62-daf6f5326eae'] // This can either be a string or an array of strings
    // filter: none // If filter is none, it retrieves all the VCs
  }
  
  // You can also retrieve VCs according to a specific VC type
  const filter = {
    type: 'vcType',
    filter: 'ProfileNamesCredential' // This can either be a string or an array of strings
  }
  
  // You can also retrieve VCs according to a JSONPath
  const jsonPath =
  '$[?(@.data.credentialSubject.profile.name == "KP")]';
  const filter = {
    type: 'JSONPath',
    filter: jsonPath
*/
const options = {
  // If you want to get the VCs from the multiple stores, you can pass an
  // array like so:
  // store: ['snap', 'googleDrive']
  store: ['snap']
}

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

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

Notes:

• There is no need to pass in options if you want to retrieve the VCs that are in the Metamask snap state as this is the default behavior however, for retrieving VCs from googleDrive, you will need to specify via this parameter. In order to use googleDrive , you first need to first configure your google account.

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 Verifiable Credentials(VCs) from the appropriate storage(eg. snap/googleDrive).

Some example responses:

[
  {
    "data": {
      "credentialSubject": {
        "profile": {
          "name": "KP"
        },
        "id": "did:pkh:eip155:1:0x2e5ff0267b678a0faf9a9f5b0fbf7ac9638b5b57"
      },
      "issuer": {
        "id": "did:pkh:eip155:1:0x2e5ff0267b678a0faf9a9f5b0fbf7ac9638b5b57"
      },
      "type": ["VerifiableCredential", "ProfileNamesCredential"],
      "@context": ["https://www.w3.org/2018/credentials/v1"],
      "issuanceDate": "2023-04-06T21:44:28.000Z",
      "expirationDate": "2024-04-06T21:44:28.000Z",
      "proof": {
        "type": "JwtProof2020",
        "jwt": "eyJhbGciOiJFUzI1NksiLCJ0eXAiOiJKV1QifQ.eyJleHAiOjE3MTI0Mzk4NjgsInZjIjp7IkBjb250ZXh0IjpbImh0dHBzOi8vd3d3LnczLm9yZy8yMDE4L2NyZWRlbnRpYWxzL3YxIl0sInR5cGUiOlsiVmVyaWZpYWJsZUNyZWRlbnRpYWwiLCJQcm9maWxlTmFtZXNDcmVkZW50aWFsIl0sImNyZWRlbnRpYWxTdWJqZWN0Ijp7InByb2ZpbGUiOnsibmFtZSI6IktQIn19fSwic3ViIjoiZGlkOnBraDplaXAxNTU6MToweDJlNWZmMDI2N2I2NzhhMGZhZjlhOWY1YjBmYmY3YWM5NjM4YjViNTciLCJuYmYiOjE2ODA4MTc0NjgsImlzcyI6ImRpZDpwa2g6ZWlwMTU1OjE6MHgyZTVmZjAyNjdiNjc4YTBmYWY5YTlmNWIwZmJmN2FjOTYzOGI1YjU3In0.2zs9QiJAe2O3AWgOPFKvkwugt9fbiGl564M_E7KZocXFQX_kObciRpPoK10VHHE3RvWu1DoaZJbQhVAxHba6TA"
      }
    },
    "metadata": {
      "id": "9c81cabf-ef8e-4223-9987-a1c25773bece",
      "store": "snap"
    }
  }
]

How the API works

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

import { IdentitySnapParams, SnapDialogParams } from '../../interfaces';
import {
  IDataManagerQueryArgs,
  IDataManagerQueryResult,
  QueryOptions,
} from '../../plugins/veramo/verifiable-creds-manager';
import { generateVCPanel, snapDialog } from '../../snap/dialog';
import { getAccountStateByCoinType } from '../../snap/state';
import { getVeramoAgent } from '../../veramo/agent';

/**
 * Function to get VCs.
 *
 * @param identitySnapParams - Identity snap params.
 * @param vcRequestParams - VC request params.
 */
export async function getVCs(
  identitySnapParams: IdentitySnapParams,
  vcRequestParams: IDataManagerQueryArgs,
): Promise<IDataManagerQueryResult[]> {
  const { origin, snap, state, account } = identitySnapParams;

  const { filter, options } = vcRequestParams || {};
  const { store = 'snap', returnStore = true } = options || {};

  // Get Veramo agent
  const agent = await getVeramoAgent(snap, state);

  // Get VCs
  const accountState = await getAccountStateByCoinType(
    state,
    account.evmAddress,
  );
  const optionsFiltered = { store, returnStore } as QueryOptions;
  const vcs = (await agent.queryVC({
    filter,
    options: optionsFiltered,
    accessToken: accountState.accountConfig.identity.googleUserInfo.accessToken,
  })) as IDataManagerQueryResult[];
  console.log('VCs: ', JSON.stringify(vcs, null, 4));

  const header = 'Retrieve Verifiable Credentials';
  const prompt = 'Are you sure you want to send VCs to the dApp?';
  const description = `Some dApps are less secure than others and could save data from VCs against your will. Be careful where you send your private VCs! Number of VCs submitted is ${vcs.length.toString()}`;
  const dialogParams: SnapDialogParams = {
    type: 'confirmation',
    content: await generateVCPanel(origin, header, prompt, description, vcs),
  };

  if (
    state.snapConfig.dApp.disablePopups ||
    (await snapDialog(snap, dialogParams))
  ) {
    return vcs;
  }

  return [];
}

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.