> ## Documentation Index
> Fetch the complete documentation index at: https://docs.neuro-tech.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Quick Login browser quickstart

> Request a QR code, register for client events, and receive an approved identity

This flow sends the approved identity directly to the browser. For an application login controlled by your server, use [backend mode](/quick-login/backend).

## 1. Choose the Neuron and purpose

Use an HTTPS Neuron that provides Quick Login. The public example uses `https://eu.id.tagroot.io`. A user needs Neuro Access or another compatible app with a Legal Identity accepted by the provider.

Write a purpose that names your application and explains what approving will do. The [live demo](/quick-login/live-demo) explicitly asks to display identity information on this documentation page.

## 2. Register for events

The reference [Events.js](https://eu.quicklog.in/Events.js) provides a `TabID` and registers it for client events. A custom client can use the same WebSocket protocol:

```javascript theme={null}
const tab = crypto.randomUUID();
const events = new WebSocket("wss://eu.id.tagroot.io/ClientEventsWS", ["ls"]);

events.onopen = () => {
  events.send(JSON.stringify({
    cmd: "Register",
    tabId: tab,
    location: window.location.href
  }));
  // Request the first QR code after registering this tab.
};

events.onmessage = ({ data }) => {
  if (!data) return;
  const event = JSON.parse(data);
  if (event.type === "SignatureReceived") {
    document.getElementById("result").textContent =
      JSON.stringify(event.data, null, 2);
    // Stop QR refresh and release the event connection here.
  }
};
```

The deployed client sends `{"cmd":"Ping"}` every ten seconds while connected and `{"cmd":"Unregister"}` before closing. Handle connection loss and malformed messages, and dispatch only the event names your application expects.

## 3. Request and display the QR code

Use the same `tab` value as the event registration:

```javascript theme={null}
const response = await fetch("https://eu.id.tagroot.io/QuickLogin", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  credentials: "omit",
  body: JSON.stringify({
    serviceId: "",
    tab,
    mode: "base64",
    purpose: "Display my identity in the Example application for five minutes."
  })
});
if (!response.ok) throw new Error(`Quick Login returned HTTP ${response.status}`);
const code = await response.json();

document.getElementById("qr").src =
  `data:${code.contentType};base64,${code.base64}`;
document.getElementById("sign").href = code.signUrl;
```

```html theme={null}
<a id="sign"><img id="qr" alt="Scan to approve the identity request" /></a>
<pre id="result" aria-live="polite"></pre>
```

The clickable QR opens `signUrl` for users on the same device as their identity app. Keep the QR on a white background with its full margin visible. Do not send `signUrl` to a third-party QR rendering service.

## 4. Receive the approved identity

Scan the QR, review the purpose in the identity app, and approve. The Neuron pushes a `SignatureReceived` event to the registered tab. Its `data` contains the [identity response](/quick-login/identity-response).

Until completion, request fresh codes at the reference client's two-second interval, with no overlapping requests. Stop after approval, cancellation, connection failure, or a bounded waiting period. Clear timers, abort pending HTTP requests, and close the WebSocket when leaving the page. Cancellation in your UI stops local waiting; it does not revoke already issued codes before their five-minute expiry.

## Use the reference browser scripts

The [upstream Web API guide](https://eu.quicklog.in/QuickLogin.md#webClientOnly) also supports a `quickLoginCode` element with `data-mode`, `data-purpose`, and optional `data-serviceId`, together with `/Events.js`, `/QuickLogin.js`, and a `<meta name="NEURON" content="your-neuron-host" />` header.

Adapt these scripts to your page before embedding them. The currently deployed `QuickLogin.js` expects property-filter and attachment-filter controls and redirects to `/` after five minutes. Loading it unchanged into a documentation site or single-page app introduces those behaviors. A custom component can keep its timers, callbacks, and results scoped to its own lifecycle.

For a different website origin, the provider must allow the HTTP request through CORS and accept the WebSocket origin. Session modes also require compatible cookies. See [connection troubleshooting](/quick-login/troubleshooting).