@qrauth/web-components 0.4.1 → 0.4.3

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @qrauth/web-components
 
+## [0.4.3] — 2026-10-22
+
+### Changed
+- Rebuilt with esbuild 0.28.2 (was 0.28.0). The bundler runtime helper differs; no attribute, event or behaviour change. Bundle size unchanged within 0.1 KB.
+
+## [0.4.2] — 2026-10-13
+
+### Security
+- **Server error text is rendered as text.** All three components put the API's error message into the page with `textContent`. Before, it was interpolated into a template assigned to `innerHTML`, so markup in a message (the API used to echo the `redirect-uri` value back) was parsed in the embedding site's origin.
+- **`<qrauth-login>` and `<qrauth-2fa>` send the PKCE verifier in the `X-QRAuth-Code-Verifier` header** when polling, not in the URL. A query string is written to proxy and server access logs. Requires QRAuth API ≥ 2026-10-13. Against an older API the header is ignored and the approved result comes back without the user; the components now report that as `qrauth:error` instead of a sign-in with no identity.
+- **`<qrauth-login redirect-url>` only follows http(s) and relative URLs.** Any other scheme (`javascript:`, `data:`, ...) is ignored with a console warning. This includes custom app schemes (`myapp://`), which were never documented but did work.
+- **A throwing `on-auth` callback no longer stops the redirect or the modal from closing**, and only an own property of `window` is called (not an inherited one such as `constructor`).
+
+### Docs
+- `on-auth` is documented: it names a function on `window`, which is looked up and called with the session result. Set it only from your own markup. The `qrauth:authenticated` event carries the same data and needs no global.
+
+### Notes
+- No attribute or event changed. Sites that embed the unpinned `components.js` pick this up automatically; sites pinned to a versioned file with an SRI hash need the new file name and hash from `https://cdn.qrauth.io/v1/latest.json`.
+- If your site sets a Content-Security-Policy, `style-src` must allow `'unsafe-inline'` for the components' shadow-DOM styles.
+- Bundle size: 20.8 KB gzipped IIFE / 20.8 KB gzipped ESM (0.4.1: 20.3 KB).
+
 ## [0.4.1] — 2026-04-29
 
 ### Fixed

package/README.md

@@ -1,10 +1,14 @@
 # @qrauth/web-components
 
-Drop-in Web Components for [QRAuth](https://qrauth.io) — passwordless QR authentication, 2FA, and ephemeral delegated access. Shadow DOM, framework-free, ~10 KB gzipped.
+Drop-in Web Components for [QRAuth](https://qrauth.io) — passwordless QR authentication, 2FA, and ephemeral delegated access. Shadow DOM, framework-free, 20.8 KB gzipped (0.4.3).
+
+<a href="https://openid.net/certification/certified-openid-providers-profiles/"><img src="https://qrauth.io/assets/certifications/openid-certified.png" alt="OpenID Certified" width="180" /></a>
+
+QRAuth is an **OpenID Certified™** OpenID Provider (Basic OP + Config OP profiles).
 
 - `<qrauth-login>` — passwordless sign-in, button or inline. Mobile-aware pending state (tap-to-continue CTA with QR demoted under a "Use another device" expander).
 - `<qrauth-2fa>` — drop-in second-factor step with session-token binding.
-- `<qrauth-ephemeral>` — time-limited, device-bound access QRs.
+- `<qrauth-ephemeral>` — time-limited access QRs, optionally bound to a device fingerprint.
 
 All three components bubble `qrauth:*` events across the Shadow DOM boundary (`composed: true`) so any framework can listen with plain `addEventListener`.
 
@@ -18,8 +22,8 @@ Or load the CDN IIFE directly in any HTML page (latest hashes at [`https://cdn.q
 
 ```html
 <script
-  src="https://cdn.qrauth.io/v1/components-0.4.0.js"
-  integrity="sha384-ZsvnpXBK9tghmz/PCtZUtR+7qTF7XhR35/SGNfJuJgLOBxnIRi3JYhRt1oFxNtU6"
+  src="https://cdn.qrauth.io/v1/components-<version>.js"
+  integrity="<sha384 for that file, from latest.json>"
   crossorigin="anonymous"
 ></script>
 
@@ -51,8 +55,8 @@ Or load the CDN IIFE directly in any HTML page (latest hashes at [`https://cdn.q
 | `theme` | `light` \| `dark` | `light` | Colour scheme. |
 | `base-url` | URL | `https://qrauth.io` | API host. Override for staging / local dev. |
 | `scopes` | space-separated | `identity` | OAuth-style scopes requested. |
-| `redirect-url` | URL | — | Auto-redirect after success. |
-| `on-auth` | string | — | Name of a global function to invoke on success. |
+| `redirect-url` | URL | — | Auto-redirect after success. Only an http(s) URL or a relative URL is followed; any other scheme is ignored with a console warning. |
+| `on-auth` | string | — | Name of a function on `window`, called with the session result on success. It is looked up by name, so set it only from your own markup, never from user input. The `qrauth:authenticated` event carries the same data and needs no global. |
 | `display` | `button` \| `inline` | `button` | Modal trigger vs. embedded widget. |
 | `animated` | boolean | off | Enables the pulse animation on the QR. |
 | `force-mode` | `mobile` \| `desktop` \| `auto` | `auto` | Override automatic mobile detection. |
@@ -69,6 +73,9 @@ All events bubble across the Shadow DOM (`composed: true`):
 - `qrauth:denied` — user denied approval on their device
 - `qrauth:error` — `detail: { message }`
 
+`qrauth:error` carries `detail.message`, which can be text from the API. Show
+it with `textContent`, never `innerHTML`.
+
 ## Theming
 
 Override any of the following CSS custom properties on the host page or on the element itself:
@@ -90,6 +97,13 @@ qrauth-login {
 
 Or flip the bundled dark palette via `theme="dark"`.
 
+## Content Security Policy
+
+The components style themselves inside their shadow root with inline
+`<style>`. If the embedding page sends a Content-Security-Policy, `style-src`
+must allow `'unsafe-inline'`. `connect-src` must allow the QRAuth API origin
+(`https://qrauth.io` unless you set `base-url`).
+
 ## Framework integration
 
 The components are framework-free native Custom Elements. They work in React, Vue, Svelte, Angular, plain HTML — wherever the browser exposes `customElements`. For React, wrap event listeners in `useEffect` because React's synthetic event system doesn't observe custom events directly.

package/dist/base.d.ts

@@ -8,6 +8,16 @@
  * Exported for documentation and test mocks.
  */
 export declare const MOBILE_MEDIA_QUERY = "(pointer: coarse) and (hover: none)";
+/** Header the API reads the PKCE verifier from when an auth session is polled. */
+export declare const CODE_VERIFIER_HEADER = "X-QRAuth-Code-Verifier";
+/**
+ * Where `redirect-url` may send the browser: an http(s) URL, or a relative
+ * one resolved against the current page. Anything that does not resolve to
+ * http(s), `javascript:` and `data:` in particular, is refused. Returns the
+ * absolute URL to navigate to, or null. This is a scheme check, not an
+ * origin check: an absolute URL on another site is allowed, as documented.
+ */
+export declare function safeRedirectTarget(raw: string | null | undefined, pageUrl: string): string | null;
 export declare abstract class QRAuthElement extends HTMLElement {
     protected shadow: ShadowRoot;
     private _sseConnection;
@@ -43,6 +53,31 @@ export declare abstract class QRAuthElement extends HTMLElement {
     protected startPolling(url: string, intervalMs: number, callback: (data: unknown) => void, headers?: Record<string, string>): void;
     protected stopPolling(): void;
     protected cleanup(): void;
+    /**
+     * Put a message into the rendered error state as text. The message can come
+     * from the API, so it is never parsed as HTML; the template only supplies
+     * the element and its default wording.
+     */
+    protected setErrorText(message: string | null | undefined): void;
+    /**
+     * True when a PKCE-bound session came back APPROVED without the user: the
+     * API did not accept the verifier (an API older than the verifier header
+     * ignores it). There is no identity to hand to the page, so this must not
+     * be reported as a successful sign-in.
+     */
+    protected isApprovalWithoutIdentity(sentVerifier: boolean, data: {
+        user?: unknown;
+    } | undefined): boolean;
+    /**
+     * Call the function named by an `on-*` attribute. Only an own property of
+     * `window` is called, not an inherited one (`constructor`, `toString`), and
+     * a throwing callback does not stop the component. Built-ins such as
+     * `alert` are own properties of `window` in browsers, so the attribute must
+     * still come from the embedding page's own markup, as documented.
+     */
+    protected callGlobal(name: string | null, payload: unknown): void;
+    /** Leave the page. Separate so it can be observed in tests. */
+    protected navigate(url: string): void;
     protected emit(name: string, detail?: unknown): void;
     protected generateCodeVerifier(): Promise<string>;
     protected computeCodeChallenge(verifier: string): Promise<string>;

package/dist/login.d.ts

@@ -7,8 +7,14 @@ import { QRAuthElement } from './base.js';
  *   theme                 — "light" (default) | "dark"
  *   base-url              — API base URL (default: https://qrauth.io)
  *   scopes                — Space-separated scopes (default: "identity")
- *   redirect-url          — Optional redirect after successful auth
- *   on-auth               — Name of a global callback function to call on success
+ *   redirect-url          — Optional redirect after successful auth. Only an
+ *                           http(s) URL or a relative URL is followed; any
+ *                           other scheme is ignored with a console warning.
+ *   on-auth               — Name of a function on `window` to call on success
+ *                           with the session result. It is looked up by name
+ *                           and called, so set it only from your own markup,
+ *                           never from user input. The `qrauth:authenticated`
+ *                           event carries the same data and needs no global.
  *   display               — "button" (default) | "inline"
  *   animated              — If present, enables subtle QR pulse animation
  *   force-mode            — "mobile" | "desktop" | "auto" (default "auto").
@@ -108,6 +114,8 @@ export declare class QRAuthLogin extends QRAuthElement {
     private _openModal;
     private _closeModal;
     private _startAuth;
+    /** The scan was approved but the API returned no identity for it. */
+    private _failWithoutIdentity;
     private _retry;
     private _beginPolling;
     private _handleStatusChange;