Web verification quickstart guide

Configure a Verifier application on MATTR VII

This creates the web verifier application that the Verifier Web SDK will use when interacting with the MATTR VII tenant to request and receive credential presentations.

1. Log into the MATTR Portal.
2. Switch to your tenant if you have access to multiple tenants, or create a new tenant if needed.
3. Expand the Credential Verification section in the left-hand navigation panel.
4. Select Applications.
5. Select the Create new button.
6. Use the Name text box to insert a name for your application (e.g. My Web Verifier).
7. Use the Type radio button to select Web.
8. Use the Allowed domains text box to insert a placeholder domain name (e.g. place-holder.com).
   You will update this placeholder value later.
9. Use the Redirect URIs text box to insert a placeholder redirect URI (e.g. https://place-holder.com/redirect).
   You will update this placeholder value later.
10. Select the Create button to create the new application and display the Application detail screen.
11. Copy and record the ID value. You will use it in the next step.

Configure a trusted issuer

In this quickstart you will add a MATTR-provided demo issuer certificate so your verifier accepts mDocs issued by this issuer.

1. Select Trusted issuers under the Credential Verification section.
2. Select the Create new button.
3. Copy and paste the following certificate into the dialogue box.

-----BEGIN CERTIFICATE-----
MIICYzCCAgmgAwIBAgIKXhjLoCkLWBxREDAKBggqhkjOPQQDAjA4MQswCQYDVQQG
EwJBVTEpMCcGA1UEAwwgbW9udGNsaWZmLWRtdi5tYXR0cmxhYnMuY29tIElBQ0Ew
HhcNMjQwMTE4MjMxNDE4WhcNMzQwMTE1MjMxNDE4WjA4MQswCQYDVQQGEwJBVTEp
MCcGA1UEAwwgbW9udGNsaWZmLWRtdi5tYXR0cmxhYnMuY29tIElBQ0EwWTATBgcq
hkjOPQIBBggqhkjOPQMBBwNCAASBnqobOh8baMW7mpSZaQMawj6wgM5e5nPd6HXp
dB8eUVPlCMKribQ7XiiLU96rib/yQLH2k1CUeZmEjxoEi42xo4H6MIH3MBIGA1Ud
EwEB/wQIMAYBAf8CAQAwDgYDVR0PAQH/BAQDAgEGMB0GA1UdDgQWBBRFZwEOI9yq
232NG+OzNQzFKa/LxDAuBgNVHRIEJzAlhiNodHRwczovL21vbnRjbGlmZi1kbXYu
bWF0dHJsYWJzLmNvbTCBgQYDVR0fBHoweDB2oHSgcoZwaHR0cHM6Ly9tb250Y2xp
ZmYtZG12LnZpaS5hdTAxLm1hdHRyLmdsb2JhbC92Mi9jcmVkZW50aWFscy9tb2Jp
bGUvaWFjYXMvMjk0YmExYmMtOTFhMS00MjJmLThhMTctY2IwODU0NWY0ODYwL2Ny
bDAKBggqhkjOPQQDAgNIADBFAiAlZYQP95lGzVJfCykhcpCzpQ2LWE/AbjTGkcGI
SNsu7gIhAJfP54a2hXz4YiQN4qJERlORjyL1Ru9M0/dtQppohFm6
-----END CERTIFICATE-----

4. Click the Add button.

Clone the sample application repository

git clone https://github.com/mattrglobal/sample-apps.git

Configure the sample application

Configure the sample web verifier with details required to communicate with your MATTR VII tenant and verifier application.

1. Navigate to the sample web verifier application directory:

cd sample-apps/verifier-web-tutorial

2. Rename the env-template file to .env:

mv env-template .env

3. Open the .env file in your code editor and only update the following values:

• NEXT_PUBLIC_TENANT_URL: Your MATTR VII tenant URL, available in the MATTR Portal under Platform Management > Tenant.
• NEXT_PUBLIC_APPLICATION_ID: Unique identifier of the Verifier application you created in the previous step.
• NGROK_AUTHTOKEN: Your ngrok authentication token.

This is how the values in the updated .env file should look like:

NEXT_PUBLIC_TENANT_URL="https://learn.vii.au01.mattr.global"
NEXT_PUBLIC_APPLICATION_ID="84a9c4e0-e597-4183-b231-3d0d699104a6"
NGROK_AUTHTOKEN="2bKVt************************************"

Start the application

1. Start the application:

npm install
npm run dev

2. Open your terminal and copy the public URL provided by ngrok (e.g. https://abc-123-xyz.ngrok-free.app).

You should now see the sample web verifier application running and reachable at your ngrok public URL.

Update the Verifier application configuration

Now point your verifier application configuration at the public URL of the sample web verifier application so the Verifier Web SDK can complete the remote presentation flow.

1. Go back to the MATTR Portal.
2. Expand the Credential Verification section in the left-hand navigation panel.
3. Select Applications.
4. Select the Verifier application you created in the first step.
5. Select the Edit button.
6. Replace the placeholder domain in the Allowed domains text box with the ngrok domain from the previous step. Make sure to remove the https:// prefix (e.g. abc-123-xyz.ngrok-free.app).
7. Replace the placeholder redirect URI in the Redirect URIs text box with a URI on the same ngrok domain. Make sure to include the https:// prefix (e.g. https://abc-123-xyz.ngrok-free.app).
8. Select the Update button.

Claim a credential to present

In order to test the verification flow, you need to have a compatible mDoc in your wallet to present. You can use the MATTR GO Hold example app to claim a demo mDL credential issued by the MATTR demo issuer you added as a trusted issuer in the tenant configuration steps.

1. Open the MATTR GO Hold example app and tap the Blue Share button.
2. Select Respond or Collect (You may need to allow the app to access your camera).
3. Scan the following QR code:

4. Follow the on-screen instructions to claim the credential into your MATTR GO Hold example app.

This credential will be used in the next step when you test the remote verification flow in the sample web verifier application.

Test the remote verification flow

Next, use the GO Hold app and the sample web verifier to complete both same-device and cross-device remote verification flows.

Initialize the SDK

In the sample application, this runs during startup so the Verifier Web SDK knows which tenant and verifier application to use:

MATTRVerifierSDK.initialize({
  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

Defining a credential query object specifies the type of credential and the attributes you want to request from the user for verification. For example, the following query requests an mDL with specific attributes:

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.
• docType: The type of the mDoc to query.
• nameSpaces: The namespaces and attributes to request from the mDoc.

Define credential request options

Defining the credential request options specifies the details of how you want to handle the OID4VP flow, including the credential query, challenge and OID4VP configuration:

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

• credentialQuery : Define what information is requested from the user for verification.
• challenge: A unique challenge string to prevent replay attacks.
• openid4vpConfiguration: Configuration for the OID4VP flow:
  • redirectUri: The web application to redirect the user to after completing a same-device presentation flow. Must match the redirect URI configured in the Verifier application settings on the MATTR tenant.
  • walletProviderId: The ID of a trusted wallet provider configured in the Verifier application settings on the MATTR tenant. The tenant will only accept mDocs presented by wallets from this provider. Refer to the tutorial to learn how to configure a wallet provider ID for a specific wallet application.

Request credentials and handle the verification results

Requesting credentials from the wallet will trigger the OID4VP flow, including a redirection to the wallet for same-device flows or QR code generation for cross-device flows. Once the flow is completed, the results of the verification will be returned to the application:

const results = await MATTRVerifierSDK.requestCredentials(options);

Once results are returned, you can parse and display them to the user as per your requirements.