Store VCs on google drive

Overview

To learn about how accounts works within Identify Snap, refer to the Snap Account documentation.

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.

By default, Identify Snap saves the Verifiable Credentials(VCs) within Metamask snap state which is entirely local however, there are times when you want to store these VCs remotely such as the in the case of when you want to use an application from another browser or device. Because all the data is stored locally, whenever you switch a browser or device, the VCs are not transferred. You would need to reimport all the VCs using saveVC snap API. But that becomes very time consuming if you have a large amount of VCs.

As such, Identify Snap offers a way for the user to store their VCs in their personal google drive and at a later time, they can use the syncGoogleVCs snap API to import/export their VCs to and from snap and google drive.

In this tutorial, we are going to store our Verifiable Credentials(VCs) on our google drive. There are multiple ways of doing that and we're going to explore both of these options here.

Method 1: Call Snap APIs by passing in the type of store on options

Each and every single API of Identify Snap can be called with an additional options parameter which lets you define the type of store to use. It doesn't make sense to pass this parameter for the APIs that don't deal with any storage however, for the APIs such as createVC, saveVC, getVCs, removeVC, deleteAllVCs, you can pass this parameter. For example:

Create and save VC on google drive:

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

const vcValue = {
  name: "KP"
};
const options = {
  store: ['googleDrive'],
}

const metamaskAddress = '0x2e5fF0267b678A0FAF9A9f5b0FBf7Ac9638B5b57'
const params = {
  metamaskAddress,
  vcKey: "profile",
  vcValue: vcValue,
  credTypes: ["ProfileNamesCredential"],
  options 
}

const handleCreateVCAPI = async () => {
  await window.ethereum.request({
    method: `wallet_snap_${snapId}`,
    params: {
      method: 'createVC',
      params: params,
    },
  });
};

Note: The above code will create a VC based on the values passed and then save it to the user's google drive. Note that if store is explicitly passed like this, because snap is not mentioned, Identify Snap will not store the VC locally within the Metamask snap state.

Save VC on google drive:

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

const 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-05T14:34:47.000Z",
  "expirationDate": "2024-04-05T14:34:47.000Z",
  "proof": {
    "type": "JwtProof2020",
    "jwt": "eyJhbGciOiJFUzI1NksiLCJ0eXAiOiJKV1QifQ.eyJleHAiOjE3MTIzMjc2ODcsInZjIjp7IkBjb250ZXh0IjpbImh0dHBzOi8vd3d3LnczLm9yZy8yMDE4L2NyZWRlbnRpYWxzL3YxIl0sInR5cGUiOlsiVmVyaWZpYWJsZUNyZWRlbnRpYWwiLCJQcm9maWxlTmFtZXNDcmVkZW50aWFsIl0sImNyZWRlbnRpYWxTdWJqZWN0Ijp7InByb2ZpbGUiOnsibmFtZSI6IktQIn19fSwic3ViIjoiZGlkOnBraDplaXAxNTU6MToweDJlNWZmMDI2N2I2NzhhMGZhZjlhOWY1YjBmYmY3YWM5NjM4YjViNTciLCJuYmYiOjE2ODA3MDUyODcsImlzcyI6ImRpZDpwa2g6ZWlwMTU1OjE6MHgyZTVmZjAyNjdiNjc4YTBmYWY5YTlmNWIwZmJmN2FjOTYzOGI1YjU3In0.CR1A_XpG001_PCaAt3VN9G5Lt75gTm2M5YSt6trqhkEoW0wce9rU7SrsZnQ0drmaG2tee4IMrZFx241yi8UsLg"
  }
}]

const options = {
  store: ['snap', 'googleDrive'],
}
const params = {
  data,
  options,
}

const handleSaveVCAPI = async () => {
  await window.ethereum.request({
    method: `wallet_snap_${snapId}`,
    params: {
      method: 'saveVC',
      params: params,
    },
  });
};

Note: The above code will save the VC data to both local Metamask snap state and the user's google drive because we have included both snap and googleDrive for the store parameter.

One thing to note is that there is no need to pass in options if you want to store the VC in the local Metamask snap state as this is the default behavior however, for storing it in googleDrive, you will need to specify via this parameter. In order to use googleDrive , you first need to first configure your google account.

Method 2: Sync VCs using `syncGoogleVCs` snap API

If you don't want to immediately use the google drive as the storage option as part of the snap API call, you can also use the syncGoogleVCs snap API at a later time to sync the VCs between the local Metamask snap state and google drive. This API will do the following:

  • Retrieves the VCs from google drive

  • Retrieves the VCs from the local Metamask snap state

  • 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

  • Import the missing VCs from google drive onto Metamask snap state

  • Export the missing VCs from Metamask snap state onto google drive

TODO here

Note: In order to use googleDrive , you first need to first configure your google account.

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.

Last updated