# Frontend Integration

Integrating the Verifier into your front-end application provides a seamless user experience for credential verification:

## Typical Workflow

1. **Initiate Verification**:\
   Trigger a flow from the front-end (e.g., "Login with Credential").\
   The backend requests an authorization QR code from the Verifier Service.
2. **Display QR Code**:\
   The front-end receives `qr_code_url` and renders it for the user.\
   Users scan the QR code with their Empe DID Wallet.
3. **Open SSE Connection**:\
   Once the QR code is displayed, open an SSE connection to the Verifier Service.\
   This channel delivers real-time updates (verified, failed, etc.).
4. **Wallet Interaction**:\
   The wallet retrieves verification requests, submits a VP, and upon successful validation, the SSE stream updates the front-end about success or failure.
5. **Finalize User Session**:\
   On a successful verification, redirect the user, show their dashboard, or grant access tokens as needed.

## Example Code Snippets

**Fetching QR Code:**

```javascript
const response = await fetch('/api/verifier/passwordless-login/v1/authorize-qr-code', {
  method: 'POST', headers: { 'Content-Type': 'application/json' }
});
const data = await response.json();
document.getElementById('qr-code').src = data.qr_code_url;
```

**SSE Connection:**

```javascript
const eventSource = new EventSource(`/api/verifier/passwordless-login/v1/connection/${state}`);
eventSource.onmessage = (event) => {
  const result = JSON.parse(event.data);
  if (result.verification_status === 'verified') {
    window.location.href = result.redirect_url;
    eventSource.close();
  } else if (result.verification_status === 'failed') {
    alert('Verification failed. Please try again.');
    eventSource.close();
  }
};
```

By following these steps, you provide users with a smooth, secure verification experience integrated directly into your front-end.


---

# 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/develop/verifier/frontend-integration.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.