@wtfalch/auth 0.20.0 → 0.23.0

package/dist/qr-door.js

@@ -0,0 +1,71 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * `<QrDoor>`: the QR sign-in code as a React component. Draws `url` (the
+ * `url` from `startQrSignIn()`) and plays the door animation once `approved`
+ * turns true -- that is, once `pollQrSignIn()` answered `signed_in`. The
+ * drawing itself lives in `qr-door-scene.ts`; this file only owns the canvas,
+ * its size, the animation clock and reduced motion.
+ *
+ * Browser file: nothing here touches OIDC, cookies or `node:`.
+ */
+import { useEffect, useMemo, useRef } from 'react';
+import { QR_DOOR_DURATION, QR_DOOR_SIZE, QR_DOOR_THEME, buildQrDoorScene, drawQrDoorRest, drawQrDoorScene, } from './qr-door-scene.js';
+export { QR_DOOR_DURATION, QR_DOOR_THEME, buildQrDoorScene, drawQrDoorRest, drawQrDoorScene, } from './qr-door-scene.js';
+export function QrDoor({ url, mark, approved, onDone, theme, className }) {
+    const canvasRef = useRef(null);
+    const scene = useMemo(() => buildQrDoorScene(url, mark), [url, mark]);
+    const ink = theme?.ink ?? QR_DOOR_THEME.ink;
+    const accent = theme?.accent ?? QR_DOOR_THEME.accent;
+    const paper = theme?.paper ?? QR_DOOR_THEME.paper;
+    const onDoneRef = useRef(onDone);
+    onDoneRef.current = onDone;
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        const ctx = canvas?.getContext('2d');
+        if (!canvas || !ctx)
+            return;
+        const th = { ink, accent, paper };
+        const reduce = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;
+        const start = performance.now();
+        let raf = 0;
+        let finished = false;
+        const fit = () => {
+            const dpr = Math.min(window.devicePixelRatio || 1, 2.5);
+            const px = Math.round((canvas.clientWidth || QR_DOOR_SIZE) * dpr);
+            // A canvas starts at 300×150, so check both sides, not just the width.
+            if (canvas.width !== px || canvas.height !== px)
+                canvas.width = canvas.height = px;
+            ctx.setTransform(px / QR_DOOR_SIZE, 0, 0, px / QR_DOOR_SIZE, 0, 0);
+        };
+        const paint = () => {
+            fit();
+            if (!approved) {
+                drawQrDoorRest(ctx, scene, th);
+                return;
+            }
+            const t = reduce ? QR_DOOR_DURATION : (performance.now() - start) / 1000;
+            drawQrDoorScene(ctx, scene, t, th);
+            if (t >= QR_DOOR_DURATION) {
+                if (!finished) {
+                    finished = true;
+                    onDoneRef.current?.();
+                }
+            }
+            else {
+                raf = requestAnimationFrame(paint);
+            }
+        };
+        paint();
+        const resize = new ResizeObserver(() => {
+            if (!approved || finished)
+                paint();
+        });
+        resize.observe(canvas);
+        return () => {
+            cancelAnimationFrame(raf);
+            resize.disconnect();
+        };
+    }, [scene, approved, ink, accent, paper]);
+    return (_jsx("canvas", { ref: canvasRef, className: className, style: { display: 'block', width: '100%', aspectRatio: '1' }, role: "img", "aria-label": approved ? 'Sign-in approved' : 'Scan this code with your phone to sign in' }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wtfalch/auth",
-  "version": "0.20.0",
+  "version": "0.23.0",
   "description": "Sign in against a self-hosted ZITADEL issuer: a server session for a Next.js app, and a browser client with silent single sign-on across subdomains.",
   "repository": {
     "type": "git",
@@ -42,6 +42,14 @@
       "types": "./dist/sessions.d.ts",
       "default": "./dist/sessions.js"
     },
+    "./person-token": {
+      "types": "./dist/person-token.d.ts",
+      "default": "./dist/person-token.js"
+    },
+    "./qr-door": {
+      "types": "./dist/qr-door.d.ts",
+      "default": "./dist/qr-door.js"
+    },
     "./testing": {
       "types": "./dist/testing.d.ts",
       "default": "./dist/testing.js"
@@ -59,25 +67,32 @@
     "test:cookie-browser": "vitest run --config vitest.cookie-browser.config.ts"
   },
   "dependencies": {
+    "@wtfalch/utils": "0.1.0",
     "jose": "^6.2.10",
     "obscenity": "^0.4.6",
     "openid-client": "6.8.7",
+    "qrcode": "^1.5.4",
     "reserved-usernames": "^1.1.6"
   },
   "peerDependencies": {
-    "next": ">=15.0.0"
+    "next": ">=15.0.0",
+    "react": ">=19.0.0"
   },
   "peerDependenciesMeta": {
     "next": {
       "optional": true
+    },
+    "react": {
+      "optional": true
     }
   },
   "devDependencies": {
     "@electric-sql/pglite": "^0.5.8",
     "@types/node": "^22",
+    "@types/qrcode": "^1.5.6",
     "@types/react": "^19",
     "@wtfalch/auth-broker": "workspace:*",
-    "next": "^16",
+    "next": "^16.4.0",
     "playwright-core": "^1.62.1",
     "react": "^19",
     "typescript": "^5.9.0",