The sign-in widget

allowid-login.js draws the sign-in QR, waits for the person to approve in the app, and tells your page. 17 KB, no dependencies, no requests to anyone but AllowID.

Download allowid-login.js

Without writing JavaScript§

Put the element on the page and include the script. It finds every element with data-allowid-session and mounts itself there.

<div data-allowid-session="SESSION_ID"
     data-allowid-token="BROWSER_TOKEN"
     data-allowid-qr="QR_PAYLOAD"
     data-allowid-redirect="/login/done"></div>
<script src="/js/allowid-login.js" defer></script>

Attribute	Required
`data-allowid-session`	yes	`session_id` from `create_session`
`data-allowid-token`	yes	`browser_token` from `create_session`
`data-allowid-qr`	yes	`qr_payload` from `create_session`
`data-allowid-redirect`	no	Where to send the browser once the person approved
`data-allowid-base-url`	no	Only for testing against another AllowID environment

The element also fires allowid:state (with the state in event.detail) on every change, and allowid:authenticated when the person approves. When the QR expires, a New code button reloads the page, so your server makes a new session.

As a module§

From the JavaScript SDK, for single-page apps or when you want the callbacks:

import { mountAllowIDLogin } from "@allowid/sdk/widget";

const widget = mountAllowIDLogin(document.getElementById("login"), {
  sessionId, qrPayload, browserToken,            // from your server
  onAuthenticated: () => location.assign("/login/done"),
  onDenied: () => showMessage("You declined in the app."),
  renew: () => fetch("/login/new-session").then((r) => r.json()),   // optional "New code"
});
// widget.stop() stops waiting, e.g. when the dialog is closed.

Without a bundler, allowid-login.js exposes the same function as window.AllowIDLogin.mount(el, options).

Option
`sessionId`, `qrPayload`, `browserToken`	From `create_session`. Required.
`onAuthenticated()`	The person approved. Now ask your server to collect the result.
`onDenied()`, `onExpired()`	The person declined; the QR's three minutes ran out.
`onStateChange(state)`	`pending`, `authenticated`, `denied`, `expired`, `error`
`renew()`	Returns a promise of a new `{sessionId, qrPayload, browserToken}`; shows a New code button on expiry
`reload`	Without `renew`: New code reloads the page
`size`	QR width in pixels; default 240
`pollMs`	How often to check; default 1000, minimum 500
`text`	Your own words: `{scan, authenticated, denied, expired, error, retry}`. Translate here.

Styling§

The widget adds plain elements with these classes and no colours of its own, so it takes your page's fonts and colours:

.allowid-login            the element you gave it
.allowid-login__qr        the QR (always black on white, with its quiet zone)
.allowid-login__caption   the status line, announced to screen readers
.allowid-login__retry     the "New code" button

Keep the QR at least 200 pixels wide and on a white background. Phones read it from about 30 cm.

Content Security Policy§

Self-host the file and the widget needs only:

script-src 'self'; connect-src 'self' https://api.allowid.eu; img-src 'self' data:

The QR is drawn as inline SVG. The widget uses no eval, no inline scripts and no third-party code. Its QR encoder is part of the file.

What the widget can see§

Only the session's state. The browser token cannot collect the result, see who signed in, or do anything else. The person's identity goes from AllowID to your server, in step 3 of website sign-in.