@qrauth/web-components 0.4.0 → 0.4.2

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @qrauth/web-components
 
+## [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
+- Removed dependency on `api.qrserver.com` for QR rendering. QR codes are now rendered locally as inline SVG via the `qrcode` library. Required for WP.org plugin directory submission and for any consumer with strict CSP.
+- QR quiet zone increased from 1 to 4 modules per ISO/IEC 18004 — restores the scan reliability of the previous external renderer on stricter readers (iPhone Camera, older Android, low-light captures).
+- Capacity overflow in `qrToSvg()` no longer crashes the component render — `QRCode.create` is now wrapped in try/catch and returns an empty SVG on overflow, letting the calling state render its empty-qr fallback.
+
+### Changed
+- New runtime dependency: `qrcode@1.5.4` (already pinned by `@qrauth/animated-qr`).
+- **`<qrauth-login>` and `<qrauth-2fa>` mobile "Continue with QRAuth" CTA** now appends `?dr=1` to the hosted approval URL. Forward-compatible with an upcoming server-side change at `qrauth.io/a/:token` that will gate the post-approval redirect on this flag — same-device clicks redirect, cross-device scans land on a terminal "Approved, you can close this tab" state. No behavior change until the server gating ships; safe to deploy independently.
+
 ## 0.4.0
 
 - **`<qrauth-login>` and `<qrauth-2fa>`: new `redirect-uri` attribute.** After the user taps Approve on the mobile CTA path, the QRAuth hosted approval page now navigates back to the consumer site instead of landing on a "you can close this page" dead end. The attribute is forwarded to `POST /api/v1/auth-sessions` as `redirectUrl` and validated server-side against the app's registered `redirectUrls` allowlist (same security model as OAuth 2.0 redirect URIs — strips trailing slash and ignores query + fragment before comparison). No-op on the desktop QR flow since polling in the original tab already handles the transition.

package/README.md

@@ -2,6 +2,10 @@
 
 Drop-in Web Components for [QRAuth](https://qrauth.io) — passwordless QR authentication, 2FA, and ephemeral delegated access. Shadow DOM, framework-free, ~10 KB gzipped.
 
+<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.
@@ -14,12 +18,12 @@ All three components bubble `qrauth:*` events across the Shadow DOM boundary (`c
 npm install @qrauth/web-components
 ```
 
-Or load the CDN IIFE directly in any HTML page:
+Or load the CDN IIFE directly in any HTML page (latest hashes at [`https://cdn.qrauth.io/v1/latest.json`](https://cdn.qrauth.io/v1/latest.json)):
 
 ```html
 <script
-  src="https://cdn.qrauth.io/v1/components.js"
-  integrity="sha384-..."
+  src="https://cdn.qrauth.io/v1/components-<version>.js"
+  integrity="<sha384 for that file, from latest.json>"
   crossorigin="anonymous"
 ></script>
 
@@ -51,12 +55,13 @@ Or load the CDN IIFE directly in any HTML page:
 | `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. |
 | `mobile-fallback-only` | boolean | off | Keep the QR-first body on every device; disables the mobile CTA path. |
+| `redirect-uri` | URL | — | Where the hosted approval page sends the user after Approve. Required for the mobile flow to feel complete. Must match the app's registered `redirectUrls` allowlist. See [docs.qrauth.io/guide/web-components](https://docs.qrauth.io/guide/web-components#the-mobile-flow) for the URL-callback handler your app needs. |
 
 ## Events
 
@@ -68,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:
@@ -89,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").
@@ -53,6 +59,7 @@ export declare class QRAuthLogin extends QRAuthElement {
     private _codeVerifier;
     private _status;
     private _expiresAt;
+    private _currentQrUrl;
     private _timerInterval;
     private _pollTimeout;
     get scopes(): string;
@@ -97,11 +104,18 @@ export declare class QRAuthLogin extends QRAuthElement {
      * The existing polling loop in _beginPolling picks up SCANNED / APPROVED
      * transitions from the server once the user completes the flow there,
      * so qrauth:scanned and qrauth:authenticated fire unchanged.
+     *
+     * The `dr=1` query flag tells the hosted approval page that this is a
+     * same-device click (not a cross-device QR scan), and that the
+     * post-approval redirect to redirectUrl should fire. The QR matrix
+     * encodes the bare /a/:token URL, so a scanner cannot carry this flag.
      */
     private _openApprovalPage;
     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;