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:

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:

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.