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, which includes the following information:

• 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 object.

   Swift

   @Published var onlinePresentationSession: OnlinePresentationSession?

2. Add the following code under the // Online Presentation - Step 2.2: Create createOnlinePresentationSession function to create a function that uses the SDK’s createOnlinePresentationSession method with the authorizationRequestURI parameter (the request URI retrieved from the link/QR code) to create an OnlinePresentationSession instance and assign it to the onlinePresentationSession variable created in the previous step:

   Swift

   func createOnlinePresentationSession(authorizationRequestURI: String) async {
       Task { @MainActor in
           do {
               onlinePresentationSession = try await mobileCredentialHolder.createOnlinePresentationSession(authorisationRequestUri: authorizationRequestURI, requireTrustedVerifier: false)
           } catch {
               print(error.localizedDescription)
           }
       }
   }

3. Add the following code under the // Online Presentation - Step 2.3: Create session from request URI comment to add an onOpenURL modifier that will call the createOnlinePresentationSession 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:

   Swift

   .onOpenURL { url in
        Task {
            await viewModel.createOnlinePresentationSession(authorizationRequestURI: url.absoluteString)
        }
        // Online Presentation - Step 3.6: Launch online presentation session view automatically
   }

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.
• Getting user’s consent to share requested information from matching credentials.

1. Add the following code under the // Online Presentation - Step 3.1: Create variable to store selected credential comment to create a variable that will store the credential the user will select to share with the verifier:

@State var selectedCredential: String?

2. Add the following code under the // Online Presentation - Step 3.2: Create PresentCredentialsView comment to add a new view that will be used for displaying matched credentials and enabling the user to select a credential to share with the verifier:

var onlinePresentationSessionView: some View {
    VStack {
        if viewModel.onlinePresentationSession?.matchedCredentials != nil {
            List(selection: $selectedCredential) {
                Section(header: Text("Requested Document")) {
                    Text("\(viewModel.onlinePresentationSession!.matchedCredentials![0].request.docType)")
                }
                let matchedCredentials = viewModel.onlinePresentationSession!.matchedCredentials![0].matchedMobileCredentials
                Section(header: Text("Please select matching document to present")) {
                    ForEach(matchedCredentials, id: \.id) { credential in
                        Text(credential.docType)
                    }
                }
            }
            if let selectedCredential {
                Button {
                    // Online Presentation Step 4.2: Call sendResponse function
                } label: {
                    Text("Send Response")
                }
            }
        }
        Spacer()
    }
}

3. Add the following code under the // Online Presentation - Step 3.3: Add isPresentingOnlinePresentation variable comment to manage navigation to the onlinePresentationSessionView view:

    @State var isPresentingOnlinePresentation = false

4. Add the following code under the // Online Presentation - Step 3.4: View Online Presentation Session comment to add add a new button that will enable the user to manually navigate to the onlinePresentationSessionView view if required:

    if viewModel.onlinePresentationSession != nil {
        Button("View Online Presentation Session") {
            isPresentingOnlinePresentation = true
        }
        .padding()
    }

5. Add the following code under the // Online Presentation - Step 3.5: Add navigation to onlinePresentationSessionView comment to control navigation to the onlinePresentationSessionView view:

     .navigationDestination(isPresented: $isPresentingOnlinePresentation) {
        onlinePresentationSessionView
    }

6. Add the following code under the // Online Presentation - Step 3.6: Launch online presentation session view automatically comment to automatically launch the onlinePresentationSessionView view when the user interacts with an online credential request:

    isPresentingOnlinePresentation = true

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

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. Add the following code under the // Online Presentation - Step 4.1: Create send response function comment to create a new function that will call the SDK’s sendResponse method of the onlinePresentationSession object and send the selected credential to the verifier:

    func sendOnlinePresentationSessionResponse(_ id: String) {
    Task { @MainActor in
        do {
        _ = try await onlinePresentationSession?.sendResponse(credentialIds: [id])
        } catch {
            print(error)
        }
    }
}

2. Add the following code after the // Online Presentation - Step 4.2: Call sendResponse function so that the sendResponse function is called when the user selects the Send Response button.

viewModel.sendOnlinePresentationSessionResponse(selectedCredential)
isPresentingOnlinePresentation = false

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: