Creating a Verification Endpoint

What We Are Doing:

• Adding an endpoint (e.g., /kyc-authorize) to request a verification QR code from the Verifier.

• Displaying the verification QR code in the frontend.

• Using SSE (Server-Sent Events) to receive real-time verification updates.

Why: To trigger the verification process, we need an endpoint that asks the Verifier for a QR code and returns it to the frontend. The user scans it with the DID Wallet, and if verified, the user gets redirected to a protected resource.

Steps: Add to src/verifier-routes.js:

import { Router } from "express";
import fetch from "node-fetch";
import dotenv from "dotenv";

dotenv.config();

const router = Router();
const BASE_URL = process.env.BASE_URL;
const VERIFIER_CLIENT_SECRET = process.env.VERIFIER_CLIENT_SECRET;

router.post('/kyc-authorize', async (req, res) => {
    try {
        const response = await fetch(`${BASE_URL}/api/verifier/kyc/v1/authorize-qr-code`, {
            method: 'POST',
            headers: {
                'x-client-secret': VERIFIER_CLIENT_SECRET,
            },
        });
        const data = await response.json();
        res.status(200).json(data);
    } catch (error) {
        console.error(error);
        res.status(500).json({ error: 'Internal server error' });
    }
});

export default router;

In public/index.html, at the very bottom of body add a button to start verification:

<button id="kyc-authorize-btn">Authorize with KYC Credential</button>
<img id="verifier-qrcode" style="display: none;" alt="Scan to verify" />

<script>
    // Grab the button element
    const authorizeBtn = document.getElementById('kyc-authorize-btn');

    authorizeBtn.addEventListener('click', async () => {
        // 1. Call our backend endpoint to get the Verifier’s QR-code info
        const res = await fetch('/verifier/kyc-authorize', { method: 'POST' });
        const data = await res.json(); // { state, qr_code_url, ... }

        // 2. Fetch the actual QR code image data from the issued URL
        const qrRes = await fetch(data.qr_code_url);
        const qrCodeData = await qrRes.json(); // Typically a data-URL string

        // 3. Display the QR code image in the page
        const qrcodeImg = document.getElementById('verifier-qrcode');
        qrcodeImg.src = qrCodeData;    // Set the <img> src to the data-URL
        qrcodeImg.style.display = 'block';

        // 4. Open an SSE connection to listen for real-time verification updates
        const eventSource = new EventSource(
                `${window.location.origin}/api/verifier/kyc/v1/connection/${data.state}`
        );

        // 5. When a message arrives, parse it and check for an access_token
        eventSource.onmessage = (event) => {
            console.log("eventSource message received:", event);
            console.log("Received SSE message:", event.data);
            const result = JSON.parse(event.data);
            if (result.access_token) {
                // Save the token and redirect to the protected dashboard
                localStorage.setItem("access_token", result.access_token);
                window.location.href = result.redirect_url;
            }
            eventSource.close(); // Close the SSE connection once done
        };
    });
</script>

With this in place, clicking "Authorize with KYC Credential" initiates the verification flow. But we still need to handle the verification result and redirect the user to a protected resource.