# 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`:

```javascript
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:

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.empe.io/getting-started/tutorial/verify-endpoint.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.