Learn how to build an iOS application that can present an mDoc online

Register the verifier’s Authorization endpoint

The Authorization endpoint is a URI associated with an application identifier in the MATTR VII tenant configuration. It is used to invoke an application that will handle the presentation request. The application then uses the URI to retrieve a request object, which details what information is required for verification.

Online verifiers are recommended to generate this URI as a Universal link, as this enables them to explicitly define and validate applications that can respond to their verification requests.

However, for simplicity reasons in this tutorial our verifier is using the default custom URI scheme defined by the OID4VP specification (mdoc-openid4vp). This means that we need to configure the application to be able to handle this custom URI scheme.

1. Open the Xcode project with the application built in the Claim a credential tutorial.
2. Register mdoc-openid4vp as a recognized URL scheme:
   • 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 mdoc-openid4vp in both the Identifier and URL Schemes fields.

3. Run the app and then close it (this updates the app on your testing device) and perform the following instructions:

   • Use a desktop browser to navigate to the MATTR Labs Maggie’s Groceries demo, where you must provide proof for purchasing an age restricted item.
   • In the checkout area, use the dropdown list to select Generic Wallet.
   • Select Share from wallet.
   • Open the camera on your testing mobile device and scan the QR code.
   • Confirm opening the QR code with your tutorial application.
   • The tutorial application should be launched on your testing mobile device.

Create an online presentation session

Now that the application can handle an OID4VP custom URI scheme, the next step is build the capability to use the request URI to retrieve the request object. This object details:

• What credentials are required.
• What specific claims are required from these credentials.
• What MATTR VII tenant to interact with.

1. In your project’s ContentView file, add the following code under the // Online Presentation - Step 2.1: Create a variable to hold the online presentation session object comment to create a variable that will hold the online presentation session:

   ContentView

   @Published var onlinePresentationSession: OnlinePresentationSession?

2. Add the following code under the // Proximity and Online Presentation: Create variables for credential presentations comment to create the following variables:

   ContentView

       @Published var matchedCredentials: [MobileCredential] = []
       @Published var matchedMetadata: [MobileCredentialMetadata] = []
       @Published var credentialRequest: [MobileCredentialRequest] = []
   • matchedCredentials : Holds stored credentials that match the credential request.
   • matchedMetadata : Holds metadata of credentials that match the credential request.
   • credentialRequest: Holds the credentials that were requested for verification.

3. Replace the print statement under the // Online Presentation - Step 2.3: Create online presentation session comment with the following code to create a function that calls the SDK’s createOnlinePresentationSession method with the authorizationRequestURI parameter (the request URI retrieved from the link/QR code):

   ContentView

       Task {
           do {
               onlinePresentationSession = try await mobileCredentialHolder.createOnlinePresentationSession(authorisationRequestUri: authorizationRequestURI, requireTrustedVerifier: false)
               matchedMetadata = onlinePresentationSession?.matchedCredentials?
                   .flatMap { $0.matchedMobileCredentials }
                   .compactMap { $0 } ?? []
    
               credentialRequest = onlinePresentationSession?.matchedCredentials?
                   .compactMap { $0.request }
                   .compactMap { $0 } ?? []
           } catch {
               print(error.localizedDescription)
           }
       }

   This function:

   • Creates an OnlinePresentationSession instance and assigns it to the onlinePresentationSession variable.
   • Stores matched MobileCredentialMetadata in the matchedMetadata variable and the MobileCredentialRequest in the credentialRequest variable in our ViewModel to enable displaying these values to the user.

4. Add the following code under the // Online Presentation - Step 2.4: Create session from request URI comment to add an onOpenURL modifier that will call the createOnlinePresentationSession function when the application is launched following selecting a link (same-device flow) or scanning a QR code (cross-device flow) that includes a registered URI:

   ContentView

       .onOpenURL { url in
           Task {
               await viewModel.createOnlinePresentationSession(authorizationRequestURI: url.absoluteString)
           }
           // Navigate to online presentation view
           viewModel.navigationPath.append(NavigationState.onlinePresentation)
       }

   Now, once a user opens an online presentation link on their device, an online presentation session will be created the user will be navigated to a new view, which we will implement in the next step.

Handle a presentation request

We will now build the capability to use information retrieved by the createOnlinePresentationSession function to handle the presentation request. This includes:

• Displaying what information is requested.
• Displaying what existing credentials match the requested information.
• Displaying what information from these existing claims will be shared with the verifier.
• Asking for the user’s consent to share requested information from matching credentials.

1. Replace the print statement under the // Proximity and Online Presentation: Retrieve a credential from storage comment with the following code create a function that uses the SDK’s getCredential method to retrieve a credential from the application storage:

   ContentView

       Task {
           do {
               let credential = try await mobileCredentialHolder.getCredential(credentialId: id)
               matchedCredentials.append(credential)
           } catch {
               print(error)
           }
       }

   The MobileCredentialMetadata object does not include the values of claims included in the credential. To display these values, the above function calls the SDK’s getCredential method with the id property of the MobileCredentialMetadata.

2. Create a new file called PresentCredentialsView.swift and paste the following code to create a view to display credential requests and matching credentials stored in the application:

   PresentCredentialsView

   import MobileCredentialHolderSDK
   import SwiftUI
    
   struct PresentCredentialsView: View {
       @ObservedObject var viewModel: PresentCredentialsViewModel
       @State var selectedID: String?
    
       init(viewModel: PresentCredentialsViewModel) {
           self.viewModel = viewModel
       }
    
       var body: some View {
           ScrollView {
               VStack(alignment: .leading, spacing: 20) {
                   Text("Requested Documents")
                       .font(.headline)
                       .padding(.leading)
    
                   ForEach(viewModel.requestedDocuments, id: \.docType) { requestedDocument in
                       DocumentView(viewModel: DocumentViewModel(from: requestedDocument))
                   }
    
                   Text("Matched Credentials")
                       .font(.headline)
                       .padding(.leading)
    
                   ForEach(viewModel.matchedMetadata, id: \.id) { matchedMetadata in
                       VStack(alignment: .leading, spacing: 10) {
                           if let matchedCredential = viewModel.matchedMobileCredential(id: matchedMetadata.id) {
                               DocumentView(viewModel: DocumentViewModel(from: matchedCredential))
                                   .padding(.vertical)
                                   .background(selectedID == matchedMetadata.id ? Color.blue.opacity(0.2) : Color.clear)
                                   .onTapGesture {
                                       guard selectedID != matchedMetadata.id else {
                                           selectedID = nil
                                           return
                                       }
                                       selectedID = matchedMetadata.id
                                   }
                               Button("Hide claim values") {
                                   viewModel.matchedCredentials.removeAll(where: { $0.id == matchedMetadata.id })
                               }
                               .frame(maxWidth: .infinity, alignment: .center)
                           } else {
                               DocumentView(viewModel: DocumentViewModel(from: matchedMetadata))
                                   .padding(.vertical)
                                   .background(selectedID == matchedMetadata.id ? Color.blue.opacity(0.2) : Color.clear)
                                   .onTapGesture {
                                       guard selectedID != matchedMetadata.id else {
                                           selectedID = nil
                                           return
                                       }
                                       selectedID = matchedMetadata.id
                                   }
                               Button("Show claim values") {
                                   viewModel.getCredentialAction(matchedMetadata.id)
                               }
                               .frame(maxWidth: .infinity, alignment: .center)
                           }
                       }
                   }
               }
           }
           if selectedID != nil {
               Button("Send Response") {
                   viewModel.sendCredentialAction(selectedID!)
               }
               .buttonStyle(.borderedProminent)
               .clipShape(Capsule())
               .frame(maxWidth: .infinity, alignment: .center)
           }
       }
   }
    
   // MARK: PresentCredentialsViewModel
    
   class PresentCredentialsViewModel: ObservableObject {
       @Binding var requestedDocuments: [MobileCredentialRequest]
       @Binding var matchedCredentials: [MobileCredential]
       @Binding var matchedMetadata: [MobileCredentialMetadata]
    
       var getCredentialAction: (String) -> Void
       var sendCredentialAction: (String) -> Void
    
       init(
           requestedDocuments: Binding<[MobileCredentialRequest]>,
           matchedCredentials: Binding<[MobileCredential]>,
           matchedMetadata: Binding<[MobileCredentialMetadata]>,
           sendCredentialAction: @escaping (String) -> Void,
           getCredentialAction: @escaping (String) -> Void
       ) {
           self._requestedDocuments = requestedDocuments
           self._matchedCredentials = matchedCredentials
           self._matchedMetadata = matchedMetadata
           self.sendCredentialAction = sendCredentialAction
           self.getCredentialAction = getCredentialAction
       }
    
       func matchedMobileCredential(id: String) -> MobileCredential? {
           matchedCredentials.first(where: { $0.id == id })
       }
   }

   The PresentCredentialsView view is used to:

   • Display requested information.
   • Display stored credentials that include the requested information.
   • Enable the user to provide consent to sharing the requested information with the verifier.

   The PresentCredentialsViewModel object is used to reference values from a credential request. It takes two closures in its initializer:

   • getCredentialAction: (String) -> Void is used to display claim values.
   • sendCredentialAction: (String) -> Void is used to send a credential response to the verifier once the user selected a credential and provided consent by selecting the Send Response button.

3. Replace EmptyView under the // Online Presentation - Step 3.3: Display online presentation view comment with the new view that we created:

    PresentCredentialsView(
        viewModel: PresentCredentialsViewModel(
            requestedDocuments: $viewModel.credentialRequest,
            matchedCredentials: $viewModel.matchedCredentials,
            matchedMetadata: $viewModel.matchedMetadata,
            sendCredentialAction: viewModel.sendOnlinePresentationSessionResponse(id:),
            getCredentialAction: viewModel.getCredential(id:)
        )
    )

4. Replace the return false statement under the // Online Presentation - Step 3.4: View Online Presentation comment with the following code to enable the user to manually navigate to the presentation session view if required:

    onlinePresentationSession != nil

5. Run the app and then close it (this updates the app on your testing device) and perform the following instructions:

   • Use a desktop browser to navigate to the MATTR Labs Maggie’s Groceries demo, where you must provide proof for purchasing an age restricted item.
   • In the checkout area, use the dropdown list to select Generic Wallet.
   • Select Share from wallet.
   • Open the camera on your testing mobile device and scan the QR code.
   • Confirm opening the QR code with your tutorial application.
   • The tutorial application should be launched on your testing mobile device, displaying the verification request and any matching credentials.
   • When a credential is selected, it will be highlighted and a Send Response button will appear (the logic associated with the button will be implemented in the next step).

The result will look something like this:

Send response

After displaying matching credentials to the user and enabling them to select what credential to share, the last thing we need to do is build the capability to share the selected credential with the verifier.

1. Replace the print statement under the // Online Presentation - Step 4.1: Send online presentation response comment with the following code to call the sendResponse method when the user selects the Send Response button:

        Task {
            do {
                _ = try await onlinePresentationSession?.sendResponse(credentialIds: [id])
                // set presentation session to nil after sending a response
                onlinePresentationSession = nil
                // Return to root view after the response is sent
                navigationPath = NavigationPath()
            } catch {
                print(error)
            }
        }

Test the application

Let’s test that the application is working as expected in both workflows.

Same-device workflow

1. Run the app and then close it (this updates the app on your testing device).
2. Use a browser on your testing mobile device to navigate to the MATTR Labs Maggie’s Groceries demo, where you must provide proof for purchasing an age restricted item.
3. In the checkout area, use the dropdown list to select Generic Wallet.
4. Select Share from wallet.
5. Select Allow to open the tutorial application.
6. The tutorial application should be launched on your testing mobile device.
7. Select the credential you wish to send to the verifier from the list of matched credentials.
8. Select Send Response.
9. You should be redirected back to Maggie’s online store and see a Over 18 years old verified indication.
10. You can now proceed with the interaction (don’t expect any items to be shipped to you by Maggie’s though).

The result will look something like this:

Cross-device workflow

1. Run the app and then close it (this updates the app on your testing device).
2. Use a desktop browser to navigate to the MATTR Labs Maggie’s Groceries demo, where you must provide proof for purchasing an age restricted item.
3. In the checkout area, use the dropdown list to select Generic Wallet.
4. Select Share from wallet.
5. Open the camera on your testing mobile device and scan the QR code.
6. Confirm opening the QR code with your tutorial application.
7. The tutorial application should be launched on your testing mobile device.
8. Select the credential you wish to send to the verifier from the list of matched credentials.
9. Select Send Response.
10. Back on your desktop browser, you should see a Over 18 years old verified indication.
11. You can proceed with the interaction (don’t expect any items to be shipped to you by Maggie’s though).

The result will look something like this: