Web verification quickstart guide

Configure a Verifier application on MATTR VII

1. Log into the MATTR Portal.
2. Expand the Credential Verification section in the left-hand navigation panel.
3. Select Applications.
4. Select the Create new button.
5. Use the Name text box to insert a meaningful and friendly name for your application.
6. Use the Type radio button to select Web.
7. Use the Allowed domains text box to insert a placeholder domain name (e.g. place-holder.com). This indicates domain names that the MATTR VII tenant can verify incoming requests are from known and trusted applications. You will update this placeholder value later.
8. Use the Redirect URIs text box to insert a placeholder redirect URI (e.g. https://place-holder.com). This is the URI the user would be redirected to after presenting a credential on a same-device flow. You will update this placeholder value later.
9. Select the Create button to create the new application and display the Application detail screen.
10. Copy and record the ID value. You will use it later when initializing the SDK.

Configure a trusted issuer

1. Expand the Credential Verification section in the left-hand navigation panel.
2. Select Trusted issuers.
3. Select the Create new button.
4. Use the Certificate PEM file to upload the public key certificate of the issuer you want to trust.
5. Select the Add button to add the new trusted issuer.

Install the SDK

yarn add @mattrglobal/verifier-sdk-web

import { MATTRVerifierSDK } from "@mattrglobal/mattr-verifier-sdk-web";

<script src="https://cdn.mattr.global/js/verifier-sdk-web/{VERSION}/verifier-js.production.js"></script>

Initialize the SDK

MATTRVerifierSDK.initialise({
  apiBaseUrl: "<YOUR_TENANT_URL>",
  applicationId: "<APPLICATION_ID>",
});

• apiBaseUrl: The base URL of the MATTR tenant used to handle mDocs verification.
• applicationId: The ID of a verifier application in the referenced MATTR tenant.

Create a credential query

Define a credential query object with the following structure:

const credentialQuery = {
  profile:
    "MATTRVerifierSDK.OpenidPresentationCredentialProfileSupported.MOBILE",
  docType: "org.iso.18013.5.1.mDL",
  nameSpaces: {
    "org.iso.18013.5.1": {
      age_over_18: {},
      given_name: {},
      family_name: {},
      portrait: {},
    },
  },
};

• profile : The profile to use for the credential query. For remote presentations of mDocs, use MATTRVerifierSDK.OpenidPresentationCredentialProfileSupported.MOBILE.
• docType: The type of the mDoc to query. For mDLs, use org.iso.18013.5.1.mDL.
• nameSpaces: The namespaces and attributes to request from the mDoc. In this example, we request age_over_18, given_name, family_name, and portrait from the org.iso.18013.5.1 namespace.

Define credential request options

Using your credential query, define the credential request options:

const options = {
  credentialQuery: [credentialQuery],
  challenge: generateChallenge(),
  openid4vpConfiguration: {
    redirectUri: "<YOUR_APP_REDIRECT_URI>",
    walletProviderId: "<YOUR_WALLET_PROVIDER_ID>",
  },
};

• credentialQuery : An array of credential queries to request from the mDoc. Define what information is requested from the user for verification.
• challenge: A unique challenge string to prevent replay attacks. Use a secure random generator to create this.
• openid4vpConfiguration: Configuration for the OID4VP flow:
  • redirectUri: The web application to redirect the user to after completing a same-device presentation flow.
  • walletProviderId: The ID of a trusted wallet provider configured in the MATTR tenant. The tenant will only accept mDocs presented by wallets from this provider.

Request credentials and handle the verification results

Use the options defined above to request credentials for verification:

const results = await MATTRVerifierSDK.requestCredentials(options);

Once results are returned, you can parse and display them to the user as needed. Refer to the tutorial for an example.