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.ts:
import { Router } from "express";
import fetch from "node-fetch";
import dotenv from "dotenv";
dotenv.config(); // Load environment variables from .env
const router = Router();
const BASE_URL = process.env.BASE_URL; // Our server’s base URL
const VERIFIER_CLIENT_SECRET = process.env.VERIFIER_CLIENT_SECRET; // Secret to authenticate with Verifier
// POST /kyc-authorize
// - Requests a verification QR code from the Verifier service
// - Returns the Verifier’s response (including state and QR code endpoint) to the frontend
router.post('/kyc-authorize', async (req, res) => {
try {
// Fetch the authorization QR-code from our own VerifierClient
const response = await fetch(`${BASE_URL}/api/verifier/kyc/v1/authorize-qr-code`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'x-client-secret': VERIFIER_CLIENT_SECRET, // Authenticate this request
},
});
const data = await response.json(); // { state, qr_code_url, ... }
res.status(200).json(data); // Send back to the frontend
} catch (error) {
console.error(error);
res.status(500).json({ error: 'Internal server error' });
}
});
export default router;
In public/index.html, 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('/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) => {
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.