# createVP ## 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](https://docs.tuum.tech/identify/identify-snap/snap-rpc-apis/..#connecting-to-a-non-metamask-external-account). 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: ```tsx const snapId = `npm:@hashgraph/hedera-identify-snap` const externalAccountParams = { externalAccount: { accountIdOrEvmAddress: '0.0.12345', curve: 'ED25519' } } /* The 'vcs' parameter should be an array of 'W3CVerifiableCredential'. W3CVerifiableCredential represents a signed Verifiable Credential (includes proof) in either JSON or compact JWT format. */ const vcs = [ { credentialSubject: { profile: { name: 'Kiran Pachhai', nickname: 'KP Woods' }, 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-07T16:11:16.000Z', expirationDate: '2024-04-07T16:11:16.000Z', proof: { type: 'JwtProof2020', jwt: 'eyJhbGciOiJFUzI1NksiLCJ0eXAiOiJKV1QifQ.eyJleHAiOjE3MTI1MDYyNzYsInZjIjp7IkBjb250ZXh0IjpbImh0dHBzOi8vd3d3LnczLm9yZy8yMDE4L2NyZWRlbnRpYWxzL3YxIl0sInR5cGUiOlsiVmVyaWZpYWJsZUNyZWRlbnRpYWwiLCJQcm9maWxlTmFtZXNDcmVkZW50aWFsIl0sImNyZWRlbnRpYWxTdWJqZWN0Ijp7InByb2ZpbGUiOnsibmFtZSI6IktpcmFuIFBhY2hoYWkiLCJuaWNrbmFtZSI6IktQIFdvb2RzIn19fSwic3ViIjoiZGlkOnBraDplaXAxNTU6MToweDJlNWZmMDI2N2I2NzhhMGZhZjlhOWY1YjBmYmY3YWM5NjM4YjViNTciLCJuYmYiOjE2ODA4ODM4NzYsImlzcyI6ImRpZDpwa2g6ZWlwMTU1OjE6MHgyZTVmZjAyNjdiNjc4YTBmYWY5YTlmNWIwZmJmN2FjOTYzOGI1YjU3In0.0NgbBHE6Le9yXj_T5nMcl1b5eUprh2YT3wpF6b3wUjQPEpdbzmH7syqmlP5eLtOyraBNjUmrH7ZH3i4duVgkeQ' } } ] const vcIds = ['9c81cabf-ef8e-4223-9987-a1c25773bece'] const proofInfo = { proofFormat: 'jwt', type: 'ProfileNamesPresentation' } const options = { // If you want to get the VCs from multiple stores, you can pass an // array like so: // store: ['snap', 'googleDrive'] store: ['snap'] } const metamaskAddress = '0x2e5fF0267b678A0FAF9A9f5b0FBf7Ac9638B5b57' const params = { metamaskAddress, vcs, /* Uncomment the below line if you want to pass in the vcIds */ // vcIds, proofInfo, options /* Uncomment the below line if you want to connect to a non-metamask account */ // ...externalAccountParams } const handleCreateVPAPI = async () => { await window.ethereum.request({ method: 'wallet_invokeSnap', params: { snapId, request: { method: 'createVP', params: params } } }) } ``` **Notes**: * There is no need to pass in `options` if you want to store the VC in the 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](https://docs.tuum.tech/identify/identify-snap/snap-rpc-apis/google-drive-apis/configuregoogleaccount). * You will need to pass `options` parameter only if you're passing `vcIds` parameter as Identify Snap needs to know which store to use for VC lookup. * You can either pass in just the `vcIds` or just the `vcs` or you can mix-match by passing both of them simultaneously. * Identify Snap currently supports [generating VC](https://docs.tuum.tech/identify/identify-snap/snap-rpc-apis/verifiable-credentials-apis/createvc) using `jwt` proof format however, it still supports the generation of VP of other types of VCs with other proof formats such as `lds` and `EthereumEip712Signature2021`. ## 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) according to the `vcIds` parameter passed. 3. Combines all the VCs passed with `vcIds` and `vcs` parameter and generates a Verifiable Presentation(VP) using the proofformat passed through `proofInfo` parameter. Note that `proofInfo` is optional and the default prooformat of `jwt` is used. 4. Returns the VP generated from multiple VCs back to the application. Some example responses: ```json { "verifiableCredential": [ { "credentialSubject": { "profile": { "name": "Kiran Pachhai", "nickname": "KP Woods" }, "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-07T16:11:16.000Z", "expirationDate": "2024-04-07T16:11:16.000Z", "proof": { "type": "JwtProof2020", "jwt": "eyJhbGciOiJFUzI1NksiLCJ0eXAiOiJKV1QifQ.eyJleHAiOjE3MTI1MDYyNzYsInZjIjp7IkBjb250ZXh0IjpbImh0dHBzOi8vd3d3LnczLm9yZy8yMDE4L2NyZWRlbnRpYWxzL3YxIl0sInR5cGUiOlsiVmVyaWZpYWJsZUNyZWRlbnRpYWwiLCJQcm9maWxlTmFtZXNDcmVkZW50aWFsIl0sImNyZWRlbnRpYWxTdWJqZWN0Ijp7InByb2ZpbGUiOnsibmFtZSI6IktpcmFuIFBhY2hoYWkiLCJuaWNrbmFtZSI6IktQIFdvb2RzIn19fSwic3ViIjoiZGlkOnBraDplaXAxNTU6MToweDJlNWZmMDI2N2I2NzhhMGZhZjlhOWY1YjBmYmY3YWM5NjM4YjViNTciLCJuYmYiOjE2ODA4ODM4NzYsImlzcyI6ImRpZDpwa2g6ZWlwMTU1OjE6MHgyZTVmZjAyNjdiNjc4YTBmYWY5YTlmNWIwZmJmN2FjOTYzOGI1YjU3In0.0NgbBHE6Le9yXj_T5nMcl1b5eUprh2YT3wpF6b3wUjQPEpdbzmH7syqmlP5eLtOyraBNjUmrH7ZH3i4duVgkeQ" } } ], "holder": "did:pkh:eip155:1:0x2e5ff0267b678a0faf9a9f5b0fbf7ac9638b5b57", "type": ["VerifiablePresentation", "ProfileNamesPresentation"], "@context": ["https://www.w3.org/2018/credentials/v1"], "issuanceDate": "2023-04-07T16:30:05.000Z", "proof": { "type": "JwtProof2020", "jwt": "eyJhbGciOiJFUzI1NksiLCJ0eXAiOiJKV1QifQ.eyJ2cCI6eyJAY29udGV4dCI6WyJodHRwczovL3d3dy53My5vcmcvMjAxOC9jcmVkZW50aWFscy92MSJdLCJ0eXBlIjpbIlZlcmlmaWFibGVQcmVzZW50YXRpb24iLCJQcm9maWxlTmFtZXNQcmVzZW50YXRpb24iXSwidmVyaWZpYWJsZUNyZWRlbnRpYWwiOlsiZXlKaGJHY2lPaUpGVXpJMU5rc2lMQ0owZVhBaU9pSktWMVFpZlEuZXlKbGVIQWlPakUzTVRJMU1EWXlOellzSW5aaklqcDdJa0JqYjI1MFpYaDBJanBiSW1oMGRIQnpPaTh2ZDNkM0xuY3pMbTl5Wnk4eU1ERTRMMk55WldSbGJuUnBZV3h6TDNZeElsMHNJblI1Y0dVaU9sc2lWbVZ5YVdacFlXSnNaVU55WldSbGJuUnBZV3dpTENKUWNtOW1hV3hsVG1GdFpYTkRjbVZrWlc1MGFXRnNJbDBzSW1OeVpXUmxiblJwWVd4VGRXSnFaV04wSWpwN0luQnliMlpwYkdVaU9uc2libUZ0WlNJNklrdHBjbUZ1SUZCaFkyaG9ZV2tpTENKdWFXTnJibUZ0WlNJNklrdFFJRmR2YjJSekluMTlmU3dpYzNWaUlqb2laR2xrT25CcmFEcGxhWEF4TlRVNk1Ub3dlREpsTldabU1ESTJOMkkyTnpoaE1HWmhaamxoT1dZMVlqQm1ZbVkzWVdNNU5qTTRZalZpTlRjaUxDSnVZbVlpT2pFMk9EQTRPRE00TnpZc0ltbHpjeUk2SW1ScFpEcHdhMmc2Wldsd01UVTFPakU2TUhneVpUVm1aakF5TmpkaU5qYzRZVEJtWVdZNVlUbG1OV0l3Wm1KbU4yRmpPVFl6T0dJMVlqVTNJbjAuME5nYkJIRTZMZTl5WGpfVDVuTWNsMWI1ZVVwcmgyWVQzd3BGNmIzd1VqUVBFcGRiem1IN3N5cW1sUDVlTHRPeXJhQk5qVW1ySDdaSDNpNGR1VmdrZVEiXX0sIm5iZiI6MTY4MDg4NTAwNSwiaXNzIjoiZGlkOnBraDplaXAxNTU6MToweDJlNWZmMDI2N2I2NzhhMGZhZjlhOWY1YjBmYmY3YWM5NjM4YjViNTcifQ.RYN5abLiiQrJhFyLKix8QzWjxdt9QBq_2iH5mWpeHTBBqb4_HxX2fW5D6TNdZ_r8HQ6W59ciBob_2rvvalXGhg" } } ``` ## Live Demo on CodePen {% embed url="" %}
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](https://docs.tuum.tech/identify/basics/faqs) section to learn about what you may be missing. You need to install [Metamask](https://metamask.io/) 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
{% hint style="info" %} 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](https://github.com/tuum-tech/identify/tree/main/packages/site). You can also check out the [API reference](https://docs.tuum.tech/identify/identify-snap/snap-rpc-apis) to learn how each API works. {% endhint %}