Learn how to build an application that can verify an mDoc from another app on the same device

Similar to the iOS and Android videos, but with a single app running on both platforms.

• Complete the sign up form to get trial access to MATTR VII and the MATTR Portal, and then Create a tenant.
• As part of your MATTR Pi SDK onboarding process you should have been provided with access to the following SDK resources:
  • ZIP file which includes the required framework: (MobileCredentialVerifierSDK-*version*.xcframework.zip).
  • Sample Verifier app: You can use this app for reference as you work through this tutorial.

• Complete the sign up form to get trial access to MATTR VII and the MATTR Portal, and then Create a tenant.
• As part of your MATTR Pi SDK onboarding process you should have been provided with access to the following SDK resources:
  • A ZIP file that includes the required library (mobile-credential-verifier-*version*.zip).
  • Sample Verifier app: You can use this app for reference as we work through this tutorial.

• Complete the sign up form to get trial access to MATTR VII and the MATTR Portal, and then Create a tenant.
• Access to the @mattrglobal/mobile-credential-verifier-react-native npm package, provided as part of your MATTR Pi SDK onboarding process.
• Sample Verifier app: This tutorial is accompanied by a sample app you can use for reference as you work through it.

• Xcode setup with either:
  • Local build settings if you are developing locally.
  • iOS developer account if you intend to publish your app.

• Android Studio.

• Node.js (version 18 or later) and a package manager such as Yarn.
• A React Native development environment. This tutorial uses Expo with development builds.
• Platform tooling for the device you intend to target:
  • Xcode for iOS, with either local build settings or an iOS developer account if you intend to publish your app.
  • Android Studio for Android.

Supported iOS device to run the built Verifier application on, setup with:

• Available internet connection
• A wallet application that can present an mDoc remotely as per ISO/IEC 18013-7 and OID4VP. MATTR GO Hold does not support remote presentation, so if you don't have a suitable wallet available, we recommend using the sample holder app you can build with our Holder SDK quickstart guide.
• Use your testing wallet application to claim an mDoc by scanning the following QR code:

Supported Android device to run the built Verifier application on, setup with:

• Available internet connection
• A wallet application that can present an mDoc remotely as per ISO/IEC 18013-7 and OID4VP. MATTR GO Hold does not support remote presentation, so if you don't have a suitable wallet available, we recommend using the sample holder app you can build with our Holder SDK quickstart guide.
• Use your testing wallet application to claim an mDoc by scanning the following QR code:

A supported iOS or Android device to run the built Verifier application on, setup with:

• Available internet connection
• A wallet application that can present an mDoc remotely as per ISO/IEC 18013-7 and OID4VP. MATTR GO Hold does not support remote presentation, so if you don't have a suitable wallet available, we recommend using the sample holder app you can build with our Holder SDK quickstart guide.
• Use your testing wallet application to claim an mDoc by scanning the following QR code:

Step 1: Create a new project

Follow the detailed instructions to Create a new Xcode Project and add your organization's identifier.

Step 2: Unzip the dependencies file

1. Unzip the MobileCredentialVerifierSDK-*version*.xcframework.zip file.
2. Drag the MobileCredentialVerifierSDK-*version*.xcframework folder into your project.
3. Configure MobileCredentialVerifierSDK.xcframework to Embed & sign.

See Add existing files and folders for detailed instructions.

This should result in the the following framework being added to your project:

Step 3: Run the application

Select Run and make sure the application launches with a “Hello, world!” text in the middle of the display, as shown in the following image:

Step 1: Create a new project

1. Create a new Android Studio project, using the Empty Activity template.

2. Name the project Mobile Verifier Tutorial.
3. Select API 24 as the Minimum SDK version.
4. Select Kotlin DSL as the Build configuration language.

5. Click Finish.
6. Sync the project with Gradle files.

Step 2: Add required dependencies

1. Select the Project view.

2. Create a new directory named repo in your project's folder.

3. Unzip the mobile-credential-verifier-*version*.zip file and copy the unzipped global folder into the new repo folder.

4. Open the settings.gradle.kts file in the MobileVerifierTutorial folder and add the following Maven repository to the dependencyResolutionManagement.repositories block:

   maven {
       url = uri("repo")
   }

5. Open the app/build.gradle.kts file in your app folder and add the following dependencies to the dependencies block:

   implementation("global.mattr.mobilecredential:verifier:6.1.0")
   implementation("androidx.navigation:navigation-compose:2.9.0")

6. Open the Build tab and select Sync to make sure that the project has synced successfully.

   

Step 3: Run the application

1. Connect a debuggable mobile device to your machine.
2. Build and run the app on the connected mobile device. The app should launch with a “Hello, Android!” text displayed.

Step 4: Update app signing certificate

1. Open a terminal inside your project's root folder.
2. Run the following command to retrieve your application's signing certificate:

   ./gradlew signingReport

3. Locate the SHA-256 value in the Variant: debug section.
4. Copy the SHA-256 value and:
   • Remove all colons (:).
   • Convert all letters to lowercase.

echo '91:F7:CB:F9:D6:81:53:1B:C7:A5:8F:B8:33:CC:A1:4D:AB:ED:E5:09:C5' | tr -d ':' | tr 'A-F' 'a-f'

5. Make a request of the following structure to update your MATTR VII verifier application's packageSigningCertificateThumbprints value with the retrieved signing certificate thumbprint:

PUT /v2/presentations/applications/{applicationId}

• applicationId : Replace with the id of your MATTR VII verifier application created in Create a verifier application configuration.

{
  "name": "My Android Mobile Verifier Application",
  "type": "android",
  "packageName": "com.example.mobileverifiertutorial",
  "openid4vpConfiguration": {
    "redirectUri": "com.example.mobileverifiertutorial://oid4vp-callback"
  },
"packageSigningCertificateThumbprints" : ["91f7cbf9d681531bc7a58fb833cca14dabede509c5"]
}

• packageSigningCertificateThumbprints : Replace with the retrieved signing certificate thumbprint.

Step 1: Access the tutorial starter codebase

1. Access the tutorial starter codebase by either:

   • Cloning the MATTR sample-apps repository:

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

   • Or downloading just the starter directory using the download-directory.github.io utility.

2. Open the tutorial project in your code editor. You can find it in the sample-apps/react-native-remote-verification-tutorial/react-native-remote-verification-tutorial-starter/ directory.

Step 2: Configure the app identifiers

1. Open the app.config.ts file and update the bundleIdentifier value under the // Update the bundle identifier comment to the iOS bundle ID you used when you created the verifier application:

   bundleIdentifier: "global.mattr.learn.rnremoteverifiersampleapp",

2. Update the package value under the // Update the package name comment to the Android package name you used when you created the verifier application:

   package: "global.mattr.learn.rnremoteverifiersampleapp",

3. Add the custom URL scheme under the // Add the custom URL scheme used for the wallet redirect comment. This registers the scheme the wallet uses to redirect back to your app. Set it to your iOS bundle identifier:

   scheme: "global.mattr.learn.rnremoteverifiersampleapp",

Step 3: Configure the app plugins

Add the following code under the // Configure the app plugins comment to register the required plugin configurations:

    "./withMobileCredentialAndroidVerifierSdk",
    "./withOpenid4VpCallbackActivity",
    [
      "expo-build-properties",
      {
        android: {
          minSdkVersion: 24,
          compileSdkVersion: 36,
          targetSdkVersion: 34,
          kotlinVersion: "2.0.21",
        },
      },
    ],

These plugin files have already been created in your project root directory:

• withMobileCredentialAndroidVerifierSdk adds the Maven repository that hosts the native Android Verifier SDK.
• withOpenid4VpCallbackActivity declares the SDK's OpenID4VP callback activity in AndroidManifest.xml, so the wallet can redirect back to your app on Android. The activity is bound to {your_packageName}://oid4vp-callback.

You can also follow the instructions in the mDocs Verifier SDK Docs to perform this platform-specific configuration manually.

Step 4: Install the dependencies

1. Open a terminal in the project's root and navigate to the starter project directory:

   cd sample-apps/react-native-remote-verification-tutorial/react-native-remote-verification-tutorial-starter/

2. Install the application dependencies:

   yarn install

Step 5: Generate the iOS and Android project files

Run the following command to generate the native project files:

yarn expo prebuild

You should now see the ios and android folders in your project root.

Step 6: Start the application

Connect your testing device and run the following command for your target platform:

yarn ios --device

yarn android --device

The app should launch with a single Request credentials button.

Step 7 (Android only): Update the app signing certificate

1. From your project root, change into the generated android directory and retrieve your application's signing certificate:

   cd android && ./gradlew signingReport

2. Locate the SHA-256 value in the Variant: debug section, remove all colons (:), and convert all letters to lowercase:

   echo '91:F7:CB:F9:D6:81:53:1B:C7:A5:8F:B8:33:CC:A1:4D:AB:ED:E5:09:C5' | tr -d ':' | tr 'A-F' 'a-f'

3. In the MATTR Portal, edit your Android verifier application and replace the placeholder Signing certificate thumbprints value with this thumbprint.

   This thumbprint is only valid for your debug builds. If you intend to publish your app, repeat this process with the release signing certificate. Refer to Android App Signing for more information.

The first capability you will build into your app is to initialize the SDK so that the app can use its functions and classes. To achieve this, you need to import the MobilecredentialVerifierSDK framework and then initialize the MobileCredentialVerifier class.

1. Open the ContentView file in your new project and replace any existing code with the following:

   import SwiftUI
   import Combine
   // Step 2.3: Import MobileCredentialVerifierSDK
   
   struct ContentView: View {
       @ObservedObject var viewModel: VerifierViewModel = VerifierViewModel()
   
       var body: some View {
           NavigationStack(path: $viewModel.navigationPath) {
               VStack {
                   Button("Request credentials") {
                       viewModel.requestCredentials()
                   }
                   .padding()
               }
               .navigationDestination(for: NavigationState.self) { destination in
                   switch destination {
                   case .viewResponse:
                       presentationResponseView
                   }
               }
           }
           // Step 4.2: Handle MATTR VII redirect
   
       }
   
       // MARK: Verification Views
   
       var presentationResponseView: some View {
           // Step 4.4: Create PresentationResponseView
           EmptyView()
       }
   }
   
   // MARK: VerifierViewModel
   
   final class VerifierViewModel: ObservableObject {
       @Published var navigationPath = NavigationPath()
       // Step 2.4: Setup platform configuration
   
       // Step 2.5: Add MobileCredentialVerifier var
   
       // Step 2.6: Initialize the SDK
   
       // Step 3.1: Create MobileCredentialRequest instance
   
       // Step 3.2: Create receivedDocuments variable
   
   }
   
   // MARK: Same Device Verification
   
   extension VerifierViewModel {
       func requestCredentials() {
       // Step 3.3: Request credentials
       }
   }
   
   // MARK: - Navigation
   enum NavigationState: Hashable {
       case viewResponse
   }

   This will serve as the basic structure for your application. You will copy and paste different code snippets into specific locations to achieve the different functionalities. These locations are indicated by comments that reference both the section and the step.

   We recommend copying and pasting the comment text in Xcode search field (e.g. Step 2.3: Import MobileCredentialVerifierSDK) to easily locate it in the code.

2. Create a new file named Constants and paste the following code into it to define constants which are required to initialize the SDK:

   import Foundation
   
   enum Constants {
       static let tenantHost = URL(string: "https://learn.vii.au01.mattr.global")!
       static let applicationID = "74f91a0f-5909-43b0-a431-6da2397d1f86"
   }

   • tenantHost : Replace with the URL of your MATTR VII tenant.
   • applicationID : Replace with the id returned when you created the MATTR VII verifier application.

3. Return to the ContentView file and add the following code after the Step 2.3: Import MobileCredentialVerifierSDK comment to import MobileCredentialVerifierSDK and gain access to the SDK capabilities:

   import MobileCredentialVerifierSDK

4. Add the following code under the Step 2.4: Setup platform configuration comment to create a PlatformConfiguration instance:

       let platformConfiguration = PlatformConfiguration(
           tenantHost: Constants.tenantHost
       )

   This instance configures the MATTR VII tenant that the SDK will interact with (tenantHost) based on the constants defined in the Constants file.

5. Add the following code after the Step 2.5: Add MobileCredentialVerifier var comment to create a variable that will hold the mobileCredentialVerifier instance when the SDK is initialized:

       var mobileCredentialVerifier: MobileCredentialVerifier

6. Add the following code after the Step 2.6: Initialize the SDK comment to initialize the MobileCredentialVerifier instance with the parameters defined in the platformConfiguration instance:

       init() {
           do {
               mobileCredentialVerifier = MobileCredentialVerifier.shared
               try mobileCredentialVerifier.initialize(platformConfiguration: platformConfiguration)
           } catch {
               print(error.localizedDescription)
           }
       }

7. Run the app to ensure it compiles successfully.

The first capability you will build into your app is to initialize the SDK so that the app can use its functions and classes. To achieve this, you need to import the MobilecredentialVerifierSDK framework and then initialize the MobileCredentialVerifier class.

1. Open the MainActivity file in your new project and replace any existing code with the following:

   package com.example.mobileverifiertutorial
   
   import android.app.Activity
   import android.os.Bundle
   import androidx.activity.ComponentActivity
   import androidx.activity.compose.setContent
   import androidx.activity.enableEdgeToEdge
   import androidx.compose.foundation.layout.*
   import androidx.compose.foundation.lazy.LazyColumn
   import androidx.compose.foundation.lazy.items
   import androidx.compose.material3.Button
   import androidx.compose.material3.Scaffold
   import androidx.compose.material3.Text
   import androidx.compose.runtime.Composable
   import androidx.compose.runtime.collectAsState
   import androidx.compose.runtime.getValue
   import androidx.compose.ui.Alignment
   import androidx.compose.ui.Modifier
   import androidx.compose.ui.platform.LocalContext
   import androidx.compose.ui.tooling.preview.Preview
   import androidx.lifecycle.ViewModel
   import androidx.lifecycle.lifecycleScope
   import androidx.lifecycle.viewModelScope
   import androidx.lifecycle.viewmodel.compose.viewModel
   import com.example.mobileverifiertutorial.ui.theme.MobileVerifierTutorialTheme
   import global.mattr.mobilecredential.common.deviceretrieval.devicerequest.DataElements
   import global.mattr.mobilecredential.common.deviceretrieval.devicerequest.NameSpaces
   import global.mattr.mobilecredential.common.dto.MobileCredentialPresentation
   import global.mattr.mobilecredential.common.dto.MobileCredentialRequest
   import global.mattr.mobilecredential.verifier.MobileCredentialVerifier
   import global.mattr.mobilecredential.verifier.PlatformConfiguration
   import kotlinx.coroutines.flow.MutableStateFlow
   import kotlinx.coroutines.flow.StateFlow
   import kotlinx.coroutines.launch
   import java.net.URL
   
   class MainActivity : ComponentActivity() {
       override fun onCreate(savedInstanceState: Bundle?) {
           super.onCreate(savedInstanceState)
           enableEdgeToEdge()
           setContent {
               MobileVerifierTutorialTheme {
                   Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                       Content(
                           modifier = Modifier.padding(innerPadding)
                       )
                   }
               }
           }
   
           // Step 2.3: Setup platform configuration
   
           // Step 2.4: Initialize the SDK
   
       }
   }
   
   @Composable
   fun Content(modifier: Modifier = Modifier) {
       val activity = (LocalContext.current) as Activity
       val viewModel: VerifierViewModel = viewModel()
   
       val documents by viewModel.receivedDocuments.collectAsState()
   
       Column(
           modifier = modifier
                           .fillMaxSize(),
           verticalArrangement = Arrangement.Center,
           horizontalAlignment = Alignment.CenterHorizontally
       ) {
           Button(onClick = {
               viewModel.requestCredentials(activity)
           }) {
               Text("Request credentials")
           }
           LazyColumn(modifier = Modifier.fillMaxWidth()) {
               items(documents) { document ->
                   // Step 4.5: Display received documents
   
               }
           }
       }
   }
   
   @Preview(showBackground = true)
   @Composable
   fun ContentPreview() {
       MobileVerifierTutorialTheme {
           Content()
       }
   }
   
   class VerifierViewModel : ViewModel() {
       private val _receivedDocuments =
           MutableStateFlow<List<MobileCredentialPresentation>>(emptyList())
       val receivedDocuments: StateFlow<List<MobileCredentialPresentation>> = _receivedDocuments
   
       fun requestCredentials(activity: Activity) {
           // Step 3.1: Create MobileCredentialRequest instance
   
           viewModelScope.launch {
               _receivedDocuments.value = emptyList()
               try {
                   // Step 3.2: Request credentials
   
                   // Step 4.2: Handle response
   
               } catch (e: Exception) {
                   e.printStackTrace()
               }
           }
       }
   }

   This will serve as the basic structure for your application. You will copy and paste different code snippets into specific locations to achieve the different functionalities. These locations are indicated by comments that reference both the section and the step.

   We recommend copying and pasting the comment text in the Android Studio search field (e.g. Step 2.3: Setup platform configuration) to easily locate it in the code.

2. Create a new file named Constants and paste the following code, replacing the values as indicated, to define constants which are required to initialize the SDK:

   package com.example.mobileverifiertutorial
   
   object Constants {
       const val TENANT_HOST = "https://learn.vii.au01.mattr.global"
       const val APPLICATION_ID = "74f91a0f-5909-43b0-a431-6da2397d1f86"
   }

   • TENANT_HOST : Replace with the URL of your MATTR VII tenant. This indicates the tenant that the SDK will interact with.
   • APPLICATION_ID : Replace with the id returned when you created the MATTR VII verifier application. This indicates the verifier application that the SDK will represent.

3. Add the following code under the Step 2.3: Setup platform configuration comment to create a PlatformConfiguration instance:

   val platformConfiguration = PlatformConfiguration(
       tenantHost = URL(Constants.TENANT_HOST)
   )

   This instance configures the MATTR VII tenant that the SDK will interact with (tenantHost) based on the constants defined in the Constants file.

4. Add the following code after the Step 2.4: Initialize the SDK comment to initialize the MobileCredentialVerifier instance with the parameters defined in the platformConfiguration instance:

   lifecycleScope.launch {
       MobileCredentialVerifier.initialize(
           context = this@MainActivity, platformConfiguration = platformConfiguration
       )
   }

5. Run the app to ensure it compiles successfully.

The first capability you will build into your app is to initialize the SDK so that the app can use its functions and classes. To achieve this, you import the SDK and call initialize with your tenant host configuration.

1. Open the App.tsx file in your project and replace the existing code with the following skeleton structure:

   import {
     type MobileCredentialResponse,
     handleDeepLink,
     initialize,
     requestMobileCredentials,
   } from "@mattrglobal/mobile-credential-verifier-react-native";
   // import { VerificationResultsModal } from "./VerificationResultsModal";
   
   import * as Crypto from "expo-crypto";
   import { StatusBar } from "expo-status-bar";
   import { useEffect, useState } from "react";
   import { ActivityIndicator, Alert, Linking, Platform, SafeAreaView, Text, TouchableOpacity, View } from "react-native";
   
   import { Constants } from "./Constants";
   import { styles } from "./styles";
   
   export default function App() {
     // State variables for SDK initialization, UI, and loading messages.
     const [isSDKInitialized, setIsSDKInitialized] = useState(false);
     const [loadingMessage, setLoadingMessage] = useState<string | false>(false);
     const [verificationResults, setVerificationResults] = useState<MobileCredentialResponse | null>(null);
     const [showVerificationResults, setShowVerificationResults] = useState(false);
   
     // Step 2: Initialize the SDK
   
     // Step 4.1: Handle the wallet redirect (iOS)
   
     // Step 3: Request credentials
   
     return (
       <SafeAreaView style={styles.container}>
         <StatusBar style="auto" />
         <View style={styles.header}>
           <Text style={styles.title}>mDocs Remote Verifier</Text>
         </View>
   
         {loadingMessage ? (
           <View style={[styles.content, styles.center]}>
             <ActivityIndicator size="large" color="#007AFF" />
             <Text style={styles.loadingText}>{loadingMessage}</Text>
           </View>
         ) : (
           <View style={styles.content}>
             <View style={styles.buttonContainer}>
               {/* Step 3: Add the Request credentials button */}
             </View>
             {!isSDKInitialized && <Text style={styles.errorText}>SDK not initialized. Please restart the app.</Text>}
           </View>
         )}
   
         {/* Step 4.3: Display the verification results */}
       </SafeAreaView>
     );
   }

   This will serve as the basic structure for your application. You will add code to specific locations to achieve the different functionalities. These locations are indicated by comments that reference the step.

   We recommend using your editor's search functionality to locate comments like // Step 2: Initialize the SDK when adding new code.

2. Create a new file named Constants.ts and paste the following code, replacing the values as indicated, to define the constants required to initialize the SDK and request credentials:

   import { Platform } from "react-native";
   
   /**
    * Configuration values used to initialize the SDK and request credentials.
    *
    * Replace these placeholders with your own values before running the app:
    * - `TENANT_HOST`: the URL of your MATTR VII tenant, available in the MATTR Portal under
    *   Platform Management > Tenant.
    * - `IOS_APPLICATION_ID` / `ANDROID_APPLICATION_ID`: the `id` returned when you created the verifier
    *   application configuration in the MATTR Portal under Credential Verification > Applications.
    *   iOS and Android each use their own verifier application, because the redirect URI registered on
    *   the application must match that platform's URL scheme (see `app.config.ts`). Configure one
    *   application ID per platform.
    */
   const IOS_APPLICATION_ID = "your-ios-application-id";
   const ANDROID_APPLICATION_ID = "your-android-application-id";
   
   export const Constants = {
     TENANT_HOST: "https://your-tenant.vii.mattr.global",
     // Resolves to the verifier application ID for the current platform.
     APPLICATION_ID: Platform.OS === "ios" ? IOS_APPLICATION_ID : ANDROID_APPLICATION_ID,
   };

   • TENANT_HOST : Replace with the URL of your MATTR VII tenant. This indicates the tenant that the SDK will interact with.
   • IOS_APPLICATION_ID and ANDROID_APPLICATION_ID : Create one verifier application per platform you support, each with a redirect URI that matches that platform's URL scheme. You configure these schemes in app.config.ts in Step 1: Environment setup: iOS uses {scheme}://my/path and Android uses {package}://oid4vp-callback. Because the redirect URI on each verifier application must match the scheme its platform uses, each platform needs its own application. Paste the iOS application id into IOS_APPLICATION_ID and the Android application id into ANDROID_APPLICATION_ID. You can find the IDs in the MATTR Portal under Credential Verification > Applications.
   • APPLICATION_ID : Resolves automatically to the verifier application id for the current platform at runtime. The SDK reads this value when requesting credentials, so you do not need to change anywhere it is consumed.

3. Return to the App.tsx file and add the following code under the // Step 2: Initialize the SDK comment to initialize the SDK with your tenant host:

     useEffect(() => {
       const initializeSDK = async () => {
         try {
           setLoadingMessage("Initializing SDK...");
           const result = await initialize({
             platformConfiguration: { tenantHost: Constants.TENANT_HOST },
           });
           if (result.isErr()) {
             console.error("Failed to initialize SDK:", result.error);
             Alert.alert("Error", "Failed to initialize the verifier SDK");
             return;
           }
           setIsSDKInitialized(true);
         } catch (error) {
           console.error("Failed to initialize SDK:", error);
           Alert.alert("Error", "Failed to initialize the verifier SDK");
         } finally {
           setLoadingMessage(false);
         }
       };
   
       initializeSDK();
     }, []);

   Unlike the in-person (proximity) flow, the remote flow requires a tenantHost: the SDK starts presentation sessions with this MATTR VII tenant, which performs the verification server-side and returns the results. The SDK uses a Result type for expected errors, so you check result.isErr() rather than relying on a thrown exception.

4. Run the app to ensure it compiles successfully.

1. Open the ContentView file and add the following code under the Step 3.1: Create MobileCredentialRequest instance comment to create a new MobileCredentialRequest instance:

       let mobileCredentialRequest = MobileCredentialRequest(
           docType: "org.iso.18013.5.1.mDL",
           namespaces: [
               "org.iso.18013.5.1":  [
                   "family_name": false,
                   "given_name": false,
                   "birth_date": false
               ]
           ]
       )

   This object defines what information is required for verification:

   • The requested credential type (e.g. org.iso.18013.5.1.mDL).
   • The claims required for verification (e.g. family_name).
   • The requested namespace (e.g. org.iso.18013.5.1).
   • Whether or not the verifier intends to persist the claim value (true/false). Declarative only and not currently enforced by the SDK. For the verification to be successful, the presented credential must include the referenced claim against the specific namespace defined in the request. Our example requests the birth_date under the org.iso.18013.5.1 namespace. If a wallet responds to this request with a credential that includes a birth_date but rather under the org.iso.18013.5.1.US namespace, the claim will not be verified.

2. Add the following code under the Step 3.2: Create receivedDocuments variable comment to create a new receivedDocuments variable that will hold the response received from the wallet application:

       @Published var receivedDocuments: [MobileCredentialPresentation] = []

3. Add the following code under the Step 3.3: Request credentials comment to call the SDK's requestMobileCredentials method:

           Task { @MainActor in
               // Clean the response before fetching a new one
               receivedDocuments = []
               do {
                   let onlinePresentationResult = try await mobileCredentialVerifier.requestMobileCredentials(request: [mobileCredentialRequest], challenge: UUID().uuidString, applicationId: Constants.applicationID)
                   guard let receivedCredentials = onlinePresentationResult.mobileCredentialResponse?.credentials else {
                       let errorMessage = onlinePresentationResult.error?.message ?? "No error message"
                       print("No response received: \(errorMessage)")
                       return
                   }
                   receivedDocuments = receivedCredentials
               } catch {
                   print(error.localizedDescription)
               }
           }

   The following parameters are passed to the requestMobileCredentials method:

   • request : Defines what information to request. This example is passing the mobileCredentialRequest instance you created in the previous step.
   • challenge : Unique challenge generated by the SDK to identify this specific presentation session. Should be a unique, unpredictable value generated for each verification session to mitigate replay attacks by ensuring the response from the wallet app is tied to the current request and cannot be reused maliciously. Always generate a new challenge for every same credential request.
   • applicationId : Identifier of the application that will be used to verify the request. In this example it is retrieved from the information defined in the Constants file.

4. Run the app and press Request credentials button.

   You will be redirected to a compliant wallet application, where you will see the verification request details and choose what mDoc to present for verification.

Once you send the response from the wallet nothing will happen, which is expected at this stage. In the next step you will build the capability to redirect the user back to the verifier application and handle the response from the wallet.

1. Open the MainActivity file and add the following code under the Step 3.1: Create MobileCredentialRequest instance comment to create a new MobileCredentialRequest instance:

    val mobileCredentialRequest = MobileCredentialRequest(
        docType = "org.iso.18013.5.1.mDL", namespaces = NameSpaces(
            mapOf(
                "org.iso.18013.5.1" to DataElements(
                    mapOf(
                        "family_name" to false, "given_name" to false, "birth_date" to false
                    )
                )
            )
        )
    )

   This object defines what information is required for verification:

   • The requested credential type (e.g. org.iso.18013.5.1.mDL).
   • The claims required for verification (e.g. family_name).
   • The requested namespace (e.g. org.iso.18013.5.1).
   • Whether or not the verifier intends to persist the claim value (true/false). Declarative only and not currently enforced by the SDK.

   For the verification to be successful, the presented credential must include the referenced claim against the specific namespace defined in the request. Our example requests the birth_date under the org.iso.18013.5.1 namespace. If a wallet responds to this request with a credential that includes a birth_date but rather under the org.iso.18013.5.1.US namespace, the claim will not be verified.

2. Add the following code under the Step 3.2: Request credentials comment to call the SDK's requestMobileCredentials method:

   val onlinePresentationResult = MobileCredentialVerifier.requestMobileCredentials(
       activity = activity,
       request = listOf(mobileCredentialRequest),
       applicationId = Constants.APPLICATION_ID
   )

   The following parameters are passed to the requestMobileCredentials method:

   • activity : Defines the current activity context.
   • request : Defines what information to request. This example is passing the mobileCredentialRequest instance you created in the previous step.
   • applicationId : Identifier of the application that will be used to verify the request. In this example it is retrieved from the information defined in the Constants file.

3. Run the app and press Request credentials button.

   You will be redirected to a compliant wallet application, where you will see the verification request details and choose what mDoc to present for verification.

Once you send the response from the wallet nothing will happen, which is expected at this stage. In the next step you will build the capability to redirect the user back to the verifier application and handle the response from the wallet.

1. Open the App.tsx file and add the following code under the // Step 3: Request credentials comment to create a function that builds a request and starts a remote presentation session:

     const requestCredentials = async () => {
       try {
         setVerificationResults(null);
         setLoadingMessage("Requesting credentials...");
   
         // Define what information to request:
         // - docType: the requested credential type (org.iso.18013.5.1.mDL)
         // - namespaces: the requested namespace (org.iso.18013.5.1) and claims
         // - Each claim value (false) indicates the verifier does NOT intend to retain the data.
         const mobileCredentialRequest = {
           docType: "org.iso.18013.5.1.mDL",
           namespaces: {
             "org.iso.18013.5.1": {
               family_name: false,
               given_name: false,
               birth_date: false,
             },
           },
         };
   
         const result = await requestMobileCredentials({
           request: [mobileCredentialRequest],
           applicationId: Constants.APPLICATION_ID,
           challenge: Crypto.randomUUID(),
         });
   
         if (result.isErr()) {
           throw new Error(`Failed to request credentials: ${result.error.message}`);
         }
   
         const session = result.value;
         if (!session.isSuccess) {
           throw new Error(`Verification session failed: ${session.error.message}`);
         }
   
         const response = session.mobileCredentialResponse;
         if (!response) {
           throw new Error("No verification results were returned by the tenant.");
         }
   
         setVerificationResults(response);
         setShowVerificationResults(true);
       } catch (error) {
         console.error("Error requesting credentials:", error);
         Alert.alert("Error", error instanceof Error ? error.message : String(error));
       } finally {
         setLoadingMessage(false);
       }
     };

   The following parameters are passed to the requestMobileCredentials method:

   • request : Defines what information to request. This example passes the mobileCredentialRequest object you defined above. For the verification to be successful, the presented credential must include the referenced claims against the specific namespace defined in the request.
   • applicationId : Identifier of the verifier application that will be used to verify the request. In this example it is retrieved from the Constants file.
   • challenge : A unique, unpredictable value generated for each verification session to mitigate replay attacks. This example uses Crypto.randomUUID() from expo-crypto. Always generate a new challenge for every request.

2. Add the following code under the {/* Step 3: Add the Request credentials button */} comment to add a button that invokes the requestCredentials function:

               <TouchableOpacity
                 style={[styles.button, !isSDKInitialized && styles.buttonDisabled]}
                 onPress={requestCredentials}
                 disabled={!isSDKInitialized}
               >
                 <Text style={styles.buttonText}>Request credentials</Text>
               </TouchableOpacity>

3. Run the app and press the Request credentials button.

   You will be redirected to a compliant wallet application, where you will see the verification request details and choose what mDoc to present for verification.

Once you send the response from the wallet nothing will happen, which is expected at this stage. In the next step you will build the capability to handle the response from the wallet and display the verification results.

To enable the redirect back to your verifier application you must register a redirection link. This could be either a Universal link or a custom URL scheme. In this tutorial you will use a custom URL scheme.

1. Register a custom URL scheme in your verifier application:

   • Open the project view and select your application target.
   • Select the Info tab.
   • Scroll down and expand the URL Types area.
   • Select the plus button.
   • Insert io.mattrlabs.dev.sampleApp.MdocSampleApp in both the Identifier and URL Schemes fields.

2. In your ContentView file, add the following code under the Step 4.2: Handle MATTR VII redirect comment to handle the redirect from the wallet application:

           .onOpenURL { url in
               // Navigate to response screen
               viewModel.navigationPath.append(NavigationState.viewResponse)
               viewModel.mobileCredentialVerifier.handleDeepLink(url)
           }

   This will pass the redirect URL to the SDK's handleDeepLink method, which will process the response from the wallet application and update the receivedDocuments variable with the verification results.

3. Create a new file named DocumentView and add the following code to display the retrieved verification results:

   import MobileCredentialVerifierSDK
   import SwiftUI
   import Combine
   
       struct DocumentView: View {
   
           var viewModel: DocumentViewModel
   
           var body: some View {
               VStack(alignment: .leading, spacing: 10) {
                   Text(viewModel.docType)
                       .font(.title)
                       .fontWeight(.bold)
                       .padding(.bottom, 5)
   
                   Text(viewModel.verificationResult)
                       .font(.title)
                       .fontWeight(.bold)
                       .foregroundStyle(viewModel.verificationFailedReason == nil ? .green : .red)
                       .padding(.bottom, 5)
   
                   if let verificationFailedReason = viewModel.verificationFailedReason {
                       Text(verificationFailedReason)
                           .font(.title3)
                           .fontWeight(.bold)
                           .foregroundStyle(.red)
                           .padding(.bottom, 5)
                   }
   
                   ForEach(viewModel.namespacesAndClaims.keys.sorted(), id: \.self) { key in
                       VStack(alignment: .leading, spacing: 5) {
                           Text(key)
                               .font(.headline)
                               .padding(.vertical, 5)
                               .padding(.horizontal, 10)
                               .background(Color.gray.opacity(0.2))
                               .cornerRadius(5)
   
                           ForEach(viewModel.namespacesAndClaims[key]!.keys.sorted(), id: \.self) { claim in
                               HStack {
                                   Text(claim)
                                       .fontWeight(.semibold)
                                   Spacer()
                                   Text(viewModel.namespacesAndClaims[key]![claim]! ?? "")
                                       .fontWeight(.regular)
                               }
                               .padding(.vertical, 5)
                               .padding(.horizontal, 10)
                               .background(Color.white)
                               .cornerRadius(5)
                               .shadow(radius: 1)
                           }
                       }
                       .padding(.vertical, 5)
                   }
   
                   if !viewModel.claimErrors.isEmpty {
                   Text("Failed Claims:")
                       .font(.headline)
                       .padding(.vertical, 5)
   
                       ForEach(viewModel.claimErrors.keys.sorted(), id: \.self) { key in
                           VStack(alignment: .leading, spacing: 5) {
                               Text(key)
                                   .font(.headline)
                                   .padding(.vertical, 5)
                                   .padding(.horizontal, 10)
                                   .background(Color.gray.opacity(0.2))
                                   .cornerRadius(5)
   
                               ForEach(viewModel.claimErrors[key]!.keys.sorted(), id: \.self) { claim in
                                   HStack {
                                       Text(claim)
                                           .fontWeight(.semibold)
                                       Spacer()
                                       Text(viewModel.claimErrors[key]![claim]! ?? "")
                                           .fontWeight(.regular)
                                   }
                                   .padding(.vertical, 5)
                                   .padding(.horizontal, 10)
                                   .background(Color.white)
                                   .cornerRadius(5)
                                   .shadow(radius: 1)
                               }
                           }
                           .padding(.vertical, 5)
                       }
                   }
               }
               .padding()
               .background(RoundedRectangle(cornerRadius: 10).fill(Color.white).shadow(radius: 5))
               .padding(.horizontal)
           }
       }
   
       // MARK: DocumentViewModel
   
       class DocumentViewModel: ObservableObject {
           let docType: String
           let namespacesAndClaims: [String: [String: String?]]
           let claimErrors: [String: [String: String?]]
           let verificationResult: String
           let verificationFailedReason: String?
   
           init(from presentation: MobileCredentialPresentation) {
               self.docType = presentation.docType
               self.verificationResult = presentation.verificationResult.verified ? "Verified" : "Invalid"
               self.verificationFailedReason = presentation.verificationResult.reason?.message
   
               self.namespacesAndClaims = presentation.claims?.reduce(into: [String: [String: String]]()) { result, outerElement in
                   let (outerKey, innerDict) = outerElement
                   result[outerKey] = innerDict.mapValues { $0.textRepresentation }
               } ?? [:]
   
               self.claimErrors = presentation.claimErrors?.reduce(into: [String: [String: String]]()) { result, outerElement in
                   let (outerKey, innerDict) = outerElement
                   result[outerKey] = innerDict.mapValues { "\($0)" }
               } ?? [:]
           }
       }
   
       // MARK: Helper
       extension MobileCredentialElementValue {
           var textRepresentation: String {
               switch self {
               case .bool(let bool):
                   return "\(bool)"
               case .string(let string):
                   return string
               case .int(let int):
                   return "\(int)"
               case .unsigned(let uInt):
                   return "\(uInt)"
               case .float(let float):
                   return "\(float)"
               case .double(let double):
                   return "\(double)"
               case let .date(date):
                   let dateFormatter = DateFormatter()
                   dateFormatter.dateStyle = .short
                   dateFormatter.timeStyle = .none
                   return dateFormatter.string(from: date)
               case let .dateTime(date):
                   let dateFormatter = DateFormatter()
                   dateFormatter.dateStyle = .short
                   dateFormatter.timeStyle = .short
                   return dateFormatter.string(from: date)
               case .data(let data):
                   return "Data \(data.count) bytes"
               case .map(let dictionary):
                   let result = dictionary.mapValues { value in
                       value.textRepresentation
                   }
                   return "\(result)"
               case .array(let array):
                   return array.reduce("") { partialResult, element in
                       partialResult + element.textRepresentation
                   }
                   .appending("")
               @unknown default:
                   return "Unknown type"
               }
           }
       }

   The DocumentView file comprises the following elements:

   • DocumentView : Basic UI layout for viewing received documents and verification results.
   • DocumentViewModel : This class takes MobileCredentialPresentation and converts its elements into strings that are displayed in the DocumentView.
   • Extension of MobileCredentialElementValue which converts the values of received claims into a human-readable format.

4. Return to the ContentView file and replace the EmptyView() under the Step 4.4: Create PresentationResponseView comment with the following code to display the DocumentView view when verification results are available:

           ZStack {
           if viewModel.receivedDocuments.isEmpty {
               VStack(spacing: 40) {
                   Text("Waiting for response...")
                       .font(.title)
                   ProgressView()
                       .progressViewStyle(.circular)
                       .scaleEffect(2)
               }
           } else {
               ScrollView {
                   ForEach(viewModel.receivedDocuments, id: \.docType) { doc in
                       DocumentView(viewModel: DocumentViewModel(from: doc))
                           .padding(10)
                   }
               }
           }
       }

To enable the redirect back to your verifier application you must register a redirection link. This could be either App Links or a Custom deep links. In this tutorial you will use a custom deep link.

1. In your app's AndroidManifest.xml file, add the following activity declaration to register the callback url:

   <activity
       android:name="global.mattr.mobilecredential.verifier.a2apresentation.callback.Openid4VpCallbackActivity"
       android:exported="true">
     <intent-filter>
       <action android:name="android.intent.action.VIEW" />
       <category android:name="android.intent.category.DEFAULT" />
       <category android:name="android.intent.category.BROWSABLE" />
       <!-- Match the openid4vpConfiguration you configured in the MATTR VII Verifier application -->
       <data
           android:scheme="com.example.mobileverifiertutorial"
           android:host="oid4vp-callback" />
     </intent-filter>
   </activity>

   • android:scheme : This must match the redirect custom scheme you defined when you created the verifier application.
   • android:host : This must match the redirect host you defined when you created the verifier application.

2. Add the following code under the Step 4.2: Handle response to navigate the user to the response screen, where they can see the retrieved credentials, if the retrieval was successful:

   _receivedDocuments.value =
       onlinePresentationResult.mobileCredentialResponse?.credentials ?: emptyList()

3. Create a new file named DocumentView.kt that will be used to display the response to the verifier application user.

4. Copy and paste the following code into the new file:

   package com.example.mobileverifiertutorial
   
   import androidx.compose.foundation.layout.*
   import androidx.compose.material3.Card
   import androidx.compose.material3.CardDefaults
   import androidx.compose.material3.MaterialTheme
   import androidx.compose.material3.Text
   import androidx.compose.runtime.Composable
   import androidx.compose.ui.Modifier
   import androidx.compose.ui.graphics.Color
   import androidx.compose.ui.text.font.FontWeight
   import androidx.compose.ui.unit.dp
   import global.mattr.mobilecredential.common.dto.MobileCredentialPresentation
   
   @Composable
   fun DocumentView(document: MobileCredentialPresentation, modifier: Modifier = Modifier) {
       val verified: Boolean = document.verificationResult.verified
       val statusText: String = if (verified) "Verified" else "Invalid"
       val statusColor: Color = if (verified) Color.Green else Color.Red
       val flatClaims: List<String> = document.claims?.flatMap { (_, claimsMap) ->
           claimsMap.map { (claim, value) -> "$claim: ${value.value}" }
       } ?: emptyList()
   
       Card(
           modifier = modifier.fillMaxWidth(),
           colors = CardDefaults.cardColors(containerColor = Color.White),
           elevation = CardDefaults.cardElevation(defaultElevation = 2.dp)
       ) {
           Column(modifier = Modifier.padding(16.dp)) {
               Text(
                   text = document.docType,
                   color = Color.Black,
                   style = MaterialTheme.typography.titleLarge,
                   fontWeight = FontWeight.Bold,
               )
               Spacer(modifier = Modifier.height(4.dp))
               Text(
                   text = statusText,
                   color = statusColor,
                   style = MaterialTheme.typography.titleMedium,
                   fontWeight = FontWeight.SemiBold
               )
               Spacer(modifier = Modifier.height(12.dp))
               if (flatClaims.isEmpty()) {
                   Text(
                       text = "No claims",
                       color = Color.Black,
                       style = MaterialTheme.typography.labelMedium,
                   )
               } else {
                   flatClaims.forEach { line ->
                       Text(
                           text = line,
                           color = Color.Black,
                           style = MaterialTheme.typography.labelMedium
                       )
                   }
               }
           }
       }
   }

5. Back in the MainActivity.kt file, add the following code under the Step 4.5: Display received documents comment:

   DocumentView(document)

After the wallet presents the credential, the user is redirected back to your app and the SDK makes the verification results available. Handling this redirect differs by platform:

• iOS: The wallet redirects back to your app via the custom URL scheme you registered in app.config.ts. You must forward the redirect URL to the SDK so it can complete the pending requestMobileCredentials call.
• Android: The withOpenid4VpCallbackActivity plugin you configured in Step 1: Environment setup declared the SDK's Openid4VpCallbackActivity in AndroidManifest.xml. The SDK handles the redirect automatically, so requestMobileCredentials resolves directly with the result and no additional code is required.

1. In your App.tsx file, add the following code under the // Step 4.1: Handle the wallet redirect (iOS) comment to forward the redirect URL to the SDK on iOS:

     useEffect(() => {
       if (Platform.OS !== "ios") {
         return;
       }
       const subscription = Linking.addEventListener("url", ({ url }) => {
         handleDeepLink({ url });
       });
       return () => subscription.remove();
     }, []);

   This passes the redirect URL to the SDK's handleDeepLink method, which processes the response from the wallet and resolves the pending requestMobileCredentials call so it returns the verification results.

2. Create a new file named VerificationResultsModal.tsx and paste the following code to display the retrieved verification results:

   import type { MobileCredentialResponse } from "@mattrglobal/mobile-credential-verifier-react-native";
   import { Modal, SafeAreaView, ScrollView, Text, TouchableOpacity, View } from "react-native";
   import { styles } from "./styles";
   
   interface VerificationResultsModalProps {
     visible: boolean;
     onClose: () => void;
     verificationResults: MobileCredentialResponse | null;
   }
   
   export function VerificationResultsModal({ visible, onClose, verificationResults }: VerificationResultsModalProps) {
     if (!visible || !verificationResults) return null;
   
     // mDoc claims can have various types (string, number, date, array, object, etc.).
     // Arrays and objects are serialized to JSON; all other types use String conversion.
     function renderClaimValue(claim: any): string {
       if (!claim) return "undefined";
       if (claim.type === "array" || claim.type === "object") {
         return JSON.stringify(claim.value);
       }
       return String(claim.value);
     }
   
     return (
       <Modal visible={visible} animationType="slide" transparent={false}>
         <SafeAreaView style={styles.container}>
           <View style={styles.header}>
             <Text style={styles.title}>Verification Results</Text>
             <TouchableOpacity onPress={onClose}>
               <Text style={styles.buttonText}>Close</Text>
             </TouchableOpacity>
           </View>
   
           <ScrollView style={styles.content}>
             {verificationResults.credentials && verificationResults.credentials.length > 0 ? (
               <View>
                 {/* Overall verification status for the first credential, as determined by the tenant. */}
                 <View style={[styles.center, styles.marginBottom]}>
                   <Text
                     style={
                       verificationResults.credentials[0].verificationResult?.verified
                         ? styles.verificationSuccess
                         : styles.verificationFailed
                     }
                   >
                     {verificationResults.credentials[0].verificationResult?.verified
                       ? "✓ Verified"
                       : "✗ Verification Failed"}
                   </Text>
                   <Text style={styles.verificationSubtext}>{verificationResults.credentials[0].docType}</Text>
                 </View>
   
                 {/* Claims organized by namespace. */}
                 {verificationResults.credentials.map((credential, credIndex) => (
                   <View key={`credential-${credIndex}`}>
                     {credential.claims &&
                       Object.keys(credential.claims).map((namespace, nsIndex) => (
                         <View key={`namespace-${nsIndex}`} style={styles.marginBottom}>
                           <Text style={styles.cardTitle}>{namespace}</Text>
                           <View style={styles.card}>
                             {credential.claims &&
                               Object.entries(credential.claims[namespace]).map(([key, value], idx) => (
                                 <View key={`${namespace}-${key}-${idx}`} style={styles.listItem}>
                                   <Text>{key}:</Text>
                                   <Text>{renderClaimValue(value)}</Text>
                                 </View>
                               ))}
                           </View>
                         </View>
                       ))}
   
                     {/* Verification failure reason, if the mDoc did not pass verification. */}
                     {!credential.verificationResult?.verified && credential.verificationResult?.reason && (
                       <View style={styles.card}>
                         <Text style={styles.listItemTitle}>Verification Failed:</Text>
                         <Text>Type: {credential.verificationResult.reason.type}</Text>
                         <Text>Message: {credential.verificationResult.reason.message}</Text>
                       </View>
                     )}
   
                     {/* Claim errors: claims that were requested but not provided. */}
                     {credential.claimErrors && Object.keys(credential.claimErrors).length > 0 && (
                       <View style={styles.marginBottom}>
                         <Text style={styles.cardTitle}>Claim Errors</Text>
                         <View style={styles.card}>
                           {Object.entries(credential.claimErrors).map(([namespace, errors]) =>
                             Object.entries(errors).map(([elementId, errorCode]) => (
                               <View key={`error-${namespace}-${elementId}`} style={styles.listItem}>
                                 <Text>
                                   {namespace}.{elementId}:
                                 </Text>
                                 <Text style={styles.errorColor}>Error: {errorCode}</Text>
                               </View>
                             ))
                           )}
                         </View>
                       </View>
                     )}
                   </View>
                 ))}
               </View>
             ) : (
               <View style={styles.card}>
                 <Text style={[styles.centeredText, styles.grayColor]}>No data available</Text>
               </View>
             )}
           </ScrollView>
         </SafeAreaView>
       </Modal>
     );
   }

   This component reads each MobileCredentialPresentation from the MobileCredentialResponse and renders the docType, the overall verification result, the received claims grouped by namespace, and any claim errors.

3. Back in App.tsx, uncomment the VerificationResultsModal import at the top of the file:

   import { VerificationResultsModal } from "./VerificationResultsModal";

4. Add the following code under the {/* Step 4.3: Display the verification results */} comment to render the modal when results are available:

         <VerificationResultsModal
           visible={showVerificationResults}
           onClose={() => setShowVerificationResults(false)}
           verificationResults={verificationResults}
         />

The React Native app follows the same end-to-end flow as the iOS and Android apps shown above: the verifier app starts a presentation session, redirects to a compliant wallet, and displays the verification results returned by the MATTR VII tenant once the user consents to share the requested information.