@mattrglobal/verifier-sdk-web 2.0.0-preview-digital-credential-api.3 → 2.0.0-preview-digital-credential-api.5

package/README.md

@@ -35,7 +35,7 @@ Request or download the
 
 ## Overview
 
-The Verifier Web SDK is a powerful tool for integrating online credential verification capabilities into your web applications. It enables secure and efficient verification of [mDocs](https://learn.mattr.global/docs/formats/mdocs), supporting both [same-device](https://learn.mattr.global/docs/formats/mdocs/verification-workflows/online#same-device-verification-workflow) and [cross-device](https://learn.mattr.global/docs/formats/mdocs/verification-workflows/online#cross-device-verification-workflow) verification workflows. The SDK leverages the MATTR VII platform to handle credential presentation and verification processes.
+The Verifier Web SDK is a powerful tool for integrating online credential verification capabilities into your web applications. It enables secure and efficient verification of [mDocs](https://learn.mattr.global/docs/mdocs), supporting both [same-device](https://learn.mattr.global/docs/verification/online/mdocs/overview#same-device-verification-workflow) and [cross-device](https://learn.mattr.global/docs/verification/online/mdocs/overview#cross-device-verification-workflow) verification workflows. The SDK leverages the MATTR VII platform to handle credential presentation and verification processes.
 
 ## Features
 
@@ -50,7 +50,7 @@ The Verifier Web SDK is a powerful tool for integrating online credential verifi
 
 ## How to get access to the MATTR Pi Verifier Web SDK
 
-Refer to our [SDK Docs landing page](https://learn.mattr.global/sdk-docs) for step-by-step instructions to gain access
+Refer to our [SDK Docs landing page](https://learn.mattr.global/references#mattr-pi-sdk-docs) for step-by-step instructions to gain access
 to any of our SDKs.
 
 > Please [reach out](mailto:dev-support@mattr.global) if you need any assistance.
@@ -84,9 +84,9 @@ MATTRVerifierSDK.initialise(...);
 2. Access SDK functions via global `MATTRVerifierSDK` object.
 
 ```javascript
-<script> 
+<script>
    MATTRVerifierSDK.initialise(...);
-</script> 
+</script>
 ```
 
 # Usage
@@ -104,45 +104,53 @@ The SDK can make a request to create a presentation session with a configured MA
 This SDK supports the experimental Web Platform Digital Credential API and will automatically attempt to use the Digital Credential API (ahead of executing the request based on OpenID4VP as per ISO 18013-7) when the following conditions are met:
 - The SDK detects the Digital Credential API is available in the current web browser.
 - The feature has been enabled when the SDK was [initialised]((#initialise-the-sdk).
-  
+
 ## Initialise the SDK
 
-You must initialise the SDK before you can use any of its functions and methods.
+You must initialise the SDK before you can use any of its functions and methods:
 
 ```javascript
 MATTRVerifierSDK.initialise({
-  apiBaseUrl: "{tenant_url}", // provide the URL of the MATTR VII verifier tenant.
-  /** 
-   * Configurations when Digital Credential Api is available 
+  apiBaseUrl: "{tenant_url}",
+  applicationId: "{applicationId}",
+  /**
+   * Configurations when Digital Credential Api is available
    **/
-  enableDigitalCredentialsApiSameDeviceFlow: true, // indicates whether the SDK will use the Digital Credential API in same-device flows.
-  enableDigitalCredentialsApiCrossDeviceFlow: false, // indicates whether the SDK will use the Digital Credential API in cross-device flows.
+  enableDigitalCredentialsApiSameDeviceFlow: true, // indicate if SDK will request credential via Digital Credential Api in a same device flow
+  enableDigitalCredentialsApiCrossDeviceFlow: false, // indicate if SDK request credential via Digital Credential Api in a cross device flow
 });
 ```
 
+- `apiBaseUrl` (required): URL of the MATTR VII verifier tenant.
+- `applicationId` (optional): Unique identifier of the verifier application. This must match the [`name`](https://learn.mattr.global/api-reference/latest/tag/mDocs-verification#operation/postVerifierApplication!path=name&t=request) parameter defined as part of a Verifier application created on the MATTR VII verifier tenant.
+
 ## Prepare a credential query
 
-The following example credential query will request the `birthdate` and `portrait` claims from a `mobile` credential `profile` with `org.iso.18013.5.1.mDL` as a `docType`: 
+The following example credential query will request the `birthdate` and `portrait` claims from a `mobile` credential `profile` with `org.iso.18013.5.1.mDL` as a `docType`:
 
 ```javascript
-const credentialQuery = {
-  "profile": "mobile",
-  "docType": "org.iso.18013.5.1.mDL",
-  "nameSpaces": {
-    "org.iso.18013.5.1": {
-      "birthdate": {
-        "intentToRetain": false
+const credentialQuery = [
+  {
+    "profile": "mobile",
+    "docType": "org.iso.18013.5.1.mDL",
+    "nameSpaces": {
+      "org.iso.18013.5.1": {
+        "birthdate": {
+          "intentToRetain": false
+        },
+        "portrait": {
+          "intentToRetain": false
+        },
+        "resident_postal_code": {
+          "intentToRetain": false
+        }
       },
-      "portrait": {},
-      "resident_postal_code": {
-        "intentToRetain": false
-      }
-    },
+    }
   }
-};
+];
 ```
 
-> The API supports multiple queries in one request. For simplicity, this example only includes a single query.
+> The API supports including multiple query objects in the `credentialQuery` array in a single request. For simplicity, this example only includes a single query object.
 
 ## Generate challenge
 
@@ -156,7 +164,7 @@ When the challenge is generated by your backend, you should use it to validate t
 
 The **same-device flow** involves the user completing all steps on a single device, such as their smartphone. They initiate the credential request on the verifier's web app, are redirected to their wallet app to consent and present credentials, and then return to the verifier's web app with the results.
 
-In contrast, the **cross-device flow** starts on one device, like a laptop. When the user initiates the request, the web app responds by displaying a QR code. The user then scans this QR code with their smartphone, use their wallet app to present matching credentials, and the results are sent back to the verifier's web app. 
+In contrast, the **cross-device flow** starts on one device, like a laptop. When the user initiates the request, the web app responds by displaying a QR code. The user then scans this QR code with their smartphone, use their wallet app to present matching credentials, and the results are sent back to the verifier's web app.
 
 The main difference is that the same-device flow uses only one device for the entire process, while the cross-device flow uses two devices for added flexibility.
 
@@ -184,8 +192,8 @@ When using the same-device presentation flow with OpenID4VP (ISO 18013-7) e.g in
 ## Request credentials with automatic flow selection
 
 ```javascript
-MATTRVerifierSDK.initialise({ apiBaseUrl }); // Initialise the SDK
-const requestCredentialsResult = await MATTRVerifierSDK.requestCredentials({
+MATTRVerifierSDK.initialise({ apiBaseUrl, applicationId }); // Initialise the SDK
+const result = await MATTRVerifierSDK.requestCredentials({
   credentialQuery: [credentialQuery], // Define what credential query to use
   challenge: MATTRVerifierSDK.utils.generateChallenge(), // Pass a unique challenge
   walletProviderId, // Define the wallet identifier
@@ -201,7 +209,7 @@ const requestCredentialsResult = await MATTRVerifierSDK.requestCredentials({
 });
 
 // Check result when it's available in the return value
-if (requestCredentialsResult.isOk() && "result" in requestCredentialsResult.value) { 
+if (requestCredentialsResult.isOk() && "result" in requestCredentialsResult.value) {
   console.info("<<< MATTRVerifierSDK.requestCredentials result",result.value.result);
 }
 
@@ -222,7 +230,7 @@ window.addEventListener("load", async () => {
 ## Request credentials with explicit same-device flow
 
 ```javascript
-MATTRVerifierSDK.initialise({ apiBaseUrl });
+MATTRVerifierSDK.initialise({ apiBaseUrl, applicationId });
 const requestCredentialsResult = await MATTRVerifierSDK.requestCredentials({
   credentialQuery: [credentialQuery],
   challenge: MATTRVerifierSDK.utils.generateChallenge(),
@@ -232,13 +240,13 @@ const requestCredentialsResult = await MATTRVerifierSDK.requestCredentials({
 });
 
 // Check result when it's available in the return value
-if (requestCredentialsResult.isOk() && "result" in requestCredentialsResult.value) { 
+if (requestCredentialsResult.isOk() && "result" in requestCredentialsResult.value) {
   console.info("<<< MATTRVerifierSDK.requestCredentials result",result.value.result);
 }
 
 // Check result also in your page of redirect_uri
 window.addEventListener("load", async () => {
-  MATTRVerifierSDK.initialise({ apiBaseUrl });
+  MATTRVerifierSDK.initialise({ apiBaseUrl, applicationId });
   const result = await MATTRVerifierSDK.handleRedirectCallback();
 });
 ```
@@ -250,7 +258,7 @@ window.addEventListener("load", async () => {
 ## Request credentials with explicit cross-device flow
 
 ```javascript
-MATTRVerifierSDK.initialise({ apiBaseUrl });
+MATTRVerifierSDK.initialise({ apiBaseUrl, applicationId });
 const requestCredentialsResult = await MATTRVerifierSDK.requestCredentials({
   credentialQuery: [credentialQuery],
   challenge: MATTRVerifierSDK.utils.generateChallenge(),
@@ -267,7 +275,7 @@ const requestCredentialsResult = await MATTRVerifierSDK.requestCredentials({
 });
 
 // Check result when it's available in the return value
-if (requestCredentialsResult.isOk() && "result" in requestCredentialsResult.value) { 
+if (requestCredentialsResult.isOk() && "result" in requestCredentialsResult.value) {
   console.info("<<< MATTRVerifierSDK.requestCredentials result",result.value.result);
 }
 ```

package/dist/lib/verifier-js-no-deps.cjs.js

@@ -7,8 +7,8 @@
  * Do Not Translate or Localize
  *
  * Bundle of @mattrglobal/verifier-sdk-web
- * Generated: 2025-02-18
- * Version: 2.0.0-preview-digital-credential-api.3
+ * Generated: 2025-04-28
+ * Version: 2.0.0-preview-digital-credential-api.5
  * Dependencies:
  */
 
@@ -127,6 +127,9 @@ exports.MobileCredentialVerificationReasonType = void 0;
 (function(MobileCredentialVerificationReasonType) {
     MobileCredentialVerificationReasonType["Expired"] = "expired";
     MobileCredentialVerificationReasonType["Inactive"] = "inactive";
+    MobileCredentialVerificationReasonType["StatusRevoked"] = "invalid";
+    MobileCredentialVerificationReasonType["StatusSuspended"] = "suspended";
+    MobileCredentialVerificationReasonType["StatusUnknown"] = "unknown";
 })(exports.MobileCredentialVerificationReasonType || (exports.MobileCredentialVerificationReasonType = {}));
 
 exports.ClaimType = void 0;
@@ -169,6 +172,22 @@ const CredentialQueryValidator = v__namespace.object({
     })))
 });
 
+const DcqlCredentialQueryValidator = v__namespace.object({
+    credentials: v__namespace.array(v__namespace.object({
+        id: v__namespace.string(),
+        format: v__namespace.string(),
+        meta: v__namespace.optional(v__namespace.unknown()),
+        claims: v__namespace.array(v__namespace.object({
+            path: v__namespace.array(v__namespace.string())
+        }))
+    })),
+    credential_sets: v__namespace.optional(v__namespace.array(v__namespace.object({
+        options: v__namespace.array(v__namespace.array(v__namespace.string())),
+        required: v__namespace.optional(v__namespace.boolean()),
+        purpose: v__namespace.optional(v__namespace.unknown())
+    })))
+});
+
 var PresentationErrorType;
 
 (function(PresentationErrorType) {
@@ -189,7 +208,7 @@ const PresentationResultRelaxValidator = v__namespace.object({
 });
 
 v__namespace.object({
-    credentialQuery: v__namespace.array(CredentialQueryValidator),
+    credentialQuery: v__namespace.union([ v__namespace.array(CredentialQueryValidator), DcqlCredentialQueryValidator ]),
     challenge: v__namespace.string(),
     redirectUri: v__namespace.optional(v__namespace.string()),
     walletProviderId: v__namespace.optional(v__namespace.string())
@@ -228,7 +247,7 @@ var MessageEventDataType;
 })(MessageEventDataType || (MessageEventDataType = {}));
 
 const RequestCredentialsSameDeviceOptionsValidator = v__namespace.object({
-    credentialQuery: v__namespace.pipe(v__namespace.array(CredentialQueryValidator), v__namespace.nonEmpty()),
+    credentialQuery: v__namespace.union([ v__namespace.pipe(v__namespace.array(CredentialQueryValidator), v__namespace.nonEmpty()), DcqlCredentialQueryValidator ]),
     redirectUri: v__namespace.string(),
     challenge: v__namespace.optional(v__namespace.string()),
     walletProviderId: v__namespace.optional(v__namespace.string()),
@@ -236,7 +255,7 @@ const RequestCredentialsSameDeviceOptionsValidator = v__namespace.object({
 });
 
 const RequestCredentialsCrossDeviceOptionsValidator = v__namespace.object({
-    credentialQuery: v__namespace.pipe(v__namespace.array(CredentialQueryValidator), v__namespace.nonEmpty()),
+    credentialQuery: v__namespace.union([ v__namespace.pipe(v__namespace.array(CredentialQueryValidator), v__namespace.nonEmpty()), DcqlCredentialQueryValidator ]),
     crossDeviceCallback: v__namespace.object({
         onComplete: v__namespace.function(),
         onFailure: v__namespace.function()
@@ -247,7 +266,7 @@ const RequestCredentialsCrossDeviceOptionsValidator = v__namespace.object({
 });
 
 const RequestCredentialsAutoDetectDeviceOptionsValidator = v__namespace.object({
-    credentialQuery: v__namespace.pipe(v__namespace.array(CredentialQueryValidator), v__namespace.nonEmpty()),
+    credentialQuery: v__namespace.union([ v__namespace.pipe(v__namespace.array(CredentialQueryValidator), v__namespace.nonEmpty()), DcqlCredentialQueryValidator ]),
     crossDeviceCallback: v__namespace.object({
         onComplete: v__namespace.function(),
         onFailure: v__namespace.function()
@@ -268,6 +287,7 @@ exports.RequestCredentialsErrorType = void 0;
 
 const InitialiseOptionsValidator = v__namespace.object({
     apiBaseUrl: v__namespace.string(),
+    applicationId: v__namespace.optional(v__namespace.string()),
     enableDigitalCredentialsApiSameDeviceFlow: v__namespace.optional(v__namespace.boolean()),
     enableDigitalCredentialsApiCrossDeviceFlow: v__namespace.optional(v__namespace.boolean())
 });
@@ -319,12 +339,14 @@ const getHashParamValue = (hash, param) => {
     return urlParams.get(param);
 };
 
-const createSession = async ({credentialQuery: credentialQuery, challenge: challenge, redirectUri: redirectUri, apiBaseUrl: apiBaseUrl, walletProviderId: walletProviderId}) => {
-    const postData = Object.assign(Object.assign({
+const createSession = async ({credentialQuery: credentialQuery, challenge: challenge, redirectUri: redirectUri, apiBaseUrl: apiBaseUrl, applicationId: applicationId, walletProviderId: walletProviderId}) => {
+    const postData = Object.assign(Object.assign(Object.assign({
         credentialQuery: credentialQuery,
         challenge: challenge
     }, redirectUri ? {
         redirectUri: redirectUri
+    } : {}), applicationId ? {
+        applicationId: applicationId
     } : {}), walletProviderId ? {
         walletProviderId: walletProviderId
     } : {});
@@ -401,7 +423,7 @@ const createDigitalCredentialsApiSession = async ({credentialQuery: credentialQu
     }, protocol && {
         protocol: protocol
     });
-    const responseResult = await safeFetch(`${apiBaseUrl}/v2/presentations/sessions/browserApi/request`, {
+    const responseResult = await safeFetch(`${apiBaseUrl}/v2/presentations/sessions/web/request`, {
         method: "POST",
         headers: {
             "Content-Type": "application/json"
@@ -421,13 +443,14 @@ const createDigitalCredentialsApiSession = async ({credentialQuery: credentialQu
     return neverthrow.ok(data);
 };
 
-const getDigitalCredentialsApiSessionResult = async ({challenge: challenge, sessionId: sessionId, response: response, apiBaseUrl: apiBaseUrl}) => {
+const getDigitalCredentialsApiSessionResult = async ({challenge: challenge, sessionId: sessionId, response: response, apiBaseUrl: apiBaseUrl, protocol: protocol}) => {
     const postData = {
         challenge: challenge,
         sessionId: sessionId,
-        response: response
+        response: response,
+        protocol: protocol
     };
-    const fetchResultFn = async () => await safeFetch(`${apiBaseUrl}/v2/presentations/sessions/browserApi/response`, {
+    const fetchResultFn = async () => await safeFetch(`${apiBaseUrl}/v2/presentations/sessions/web/response`, {
         method: "POST",
         headers: {
             "Content-Type": "application/json"
@@ -548,17 +571,19 @@ const openCrossDeviceModal = options => {
     modalContainer.appendChild(style);
     modalContainer.appendChild(iframe);
     document.body.appendChild(modalContainer);
-    modalContainer.setAttribute("style", "background: rgba(0, 0, 0, 0.5) !important; position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important;");
+    modalContainer.setAttribute("style", "background: rgba(0, 0, 0, 0.5) !important; position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; z-index: 999;");
+    modalContainer.setAttribute("class", "mattr-verifier-modal-container");
     return modalContainer;
 };
 
 const requestCredentialsCrossDevice = async options => {
     const {challenge: challenge, walletProviderId: walletProviderId, credentialQuery: credentialQuery, crossDeviceCallback: crossDeviceCallback, initialiseOptions: initialiseOptions} = options;
-    const {apiBaseUrl: apiBaseUrl} = initialiseOptions;
+    const {apiBaseUrl: apiBaseUrl, applicationId: applicationId} = initialiseOptions;
     const createSessionResult = await createSession({
         credentialQuery: credentialQuery,
         challenge: challenge,
         apiBaseUrl: apiBaseUrl,
+        applicationId: applicationId,
         walletProviderId: walletProviderId
     });
     if (createSessionResult.isErr()) {
@@ -595,7 +620,7 @@ var SameDeviceRequestCredentialsErrorMessage$1;
 
 const requestCredentialsSameDevice = async options => {
     const {challenge: challenge, credentialQuery: credentialQuery, redirectUri: redirectUri, walletProviderId: walletProviderId, initialiseOptions: initialiseOptions} = options;
-    const {apiBaseUrl: apiBaseUrl} = initialiseOptions;
+    const {apiBaseUrl: apiBaseUrl, applicationId: applicationId} = initialiseOptions;
     window.localStorage.setItem(LocalStorageKey.challenge, challenge);
     const storedChallenge = window.localStorage.getItem(LocalStorageKey.challenge);
     if (!storedChallenge) {
@@ -609,6 +634,7 @@ const requestCredentialsSameDevice = async options => {
         challenge: storedChallenge,
         redirectUri: redirectUri,
         apiBaseUrl: apiBaseUrl,
+        applicationId: applicationId,
         walletProviderId: walletProviderId
     });
     if (createSessionResult.isErr()) {
@@ -678,7 +704,8 @@ const requestCredentialsDigitalCredentialsApi = async options => {
         challenge: challenge,
         sessionId: sessionId,
         response: response,
-        apiBaseUrl: apiBaseUrl
+        apiBaseUrl: apiBaseUrl,
+        protocol: digitalCredentialsApiProtocol !== null && digitalCredentialsApiProtocol !== void 0 ? digitalCredentialsApiProtocol : "preview"
     });
     if (result.isOk()) {
         return neverthrow.ok({