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

Coming soon...

• 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:
  • ZIP files which include the required libraries:
    • common-*version*.zip
    • verifier-*version*.zip
  • Sample Verifier app: You can use this app for reference as you work through this tutorial.

Coming soon...

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

• Android Studio.

Coming soon...

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

• Available internet connection
• A wallet application that can present an mDoc remotely. If you don't have one available, we recommend using the app built in our Holder SDK remote presentation tutorial.
• 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. If you don't have one available, we recommend using the app built in our Holder SDK remote presentation tutorial.
• Use your testing wallet application to claim an mDoc by scanning the following QR code:

Coming soon...

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 common-*version*.zip and verifier-*version*.zip files and copy the unzipped global folders into the new repo folder, merging the top-level directories.

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:5.2.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.

Coming soon...

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
   internal 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.3: 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.

Coming soon...

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.

Coming soon...

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
   
       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)

Coming soon...

Coming soon...