@authu/react 1.0.66 → 1.0.67

package/README.md

@@ -128,6 +128,30 @@ function ApiComponent() {
 }
 ```
 
+### 5. Sign In Another Device with a QR Code
+
+`DeviceLinkQrCode` shows a QR code that signs the scanning phone into the
+current account, with no password:
+
+```tsx
+import {DeviceLinkQrCode} from '@authu/react';
+
+function OpenOnMobile() {
+  return <DeviceLinkQrCode size={220} />;
+}
+```
+
+The code encodes a one-shot AuthU link that expires after two minutes, and the
+component renews it on its own while mounted. Opening the link gives the phone
+its own AuthU session cookie, then redirects to the tenant `homeUrl`, where the
+silent renewal signs the app in. Since anyone photographing the screen within
+that window gets the session, only mount the component when the user asks for
+it.
+
+For a custom rendering, `useDeviceLink()` returns `{link, isLoading, error,
+renew}` with the same auto-renewal, and `createDeviceLink()` on `useAuthU()`
+creates a single link.
+
 ## Token Storage
 
 **Tokens never touch `localStorage`, `sessionStorage` or any other persistent
@@ -201,6 +225,7 @@ Two behaviour changes to expect in an app that upgrades:
 | `login(options?)` | `function` | Redirect to login |
 | `logout(options?)` | `function` | Log out user |
 | `getAccessToken()` | `function` | Get current access token |
+| `createDeviceLink()` | `function` | One-shot sign-in link for another device (`{url, expiresAt} \| null`) |
 
 ## Development
 

package/dist/AuthUProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AuthUProvider.d.ts","sourceRoot":"","sources":["../src/AuthUProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAef,OAAO,KAAK,EAEV,WAAW,EACX,iBAAiB,EAIlB,MAAM,YAAY,CAAC;AAEpB,eAAO,MAAM,YAAY,mDAAgD,CAAC;AAO1E,UAAU,kBAAkB;IAC1B,MAAM,EAAE,WAAW,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAuDD,wBAAgB,aAAa,CAAC,EAAC,MAAM,EAAE,QAAQ,EAAC,EAAE,kBAAkB,2CAwYnE"}
+{"version":3,"file":"AuthUProvider.d.ts","sourceRoot":"","sources":["../src/AuthUProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAef,OAAO,KAAK,EAEV,WAAW,EACX,iBAAiB,EAKlB,MAAM,YAAY,CAAC;AAEpB,eAAO,MAAM,YAAY,mDAAgD,CAAC;AAO1E,UAAU,kBAAkB;IAC1B,MAAM,EAAE,WAAW,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAuDD,wBAAgB,aAAa,CAAC,EAAC,MAAM,EAAE,QAAQ,EAAC,EAAE,kBAAkB,2CA6ZnE"}

package/dist/AuthUProvider.js

@@ -344,6 +344,24 @@ export function AuthUProvider({ config, children }) {
             return false;
         }
     }, [config.clientId, config.domain]);
+    const createDeviceLink = useCallback(async () => {
+        const accessToken = await getAccessToken();
+        if (!accessToken)
+            return null;
+        try {
+            const response = await fetch(`${buildBaseUrl(config.domain)}/api/auth/device-link`, {
+                method: 'POST',
+                headers: { Authorization: `Bearer ${accessToken}` }
+            });
+            if (!response.ok)
+                return null;
+            const data = await response.json();
+            return { url: data.url, expiresAt: new Date(data.expiresAt).getTime() };
+        }
+        catch {
+            return null;
+        }
+    }, [config.domain, getAccessToken]);
     const contextValue = {
         isLoading: state.isLoading,
         isAuthenticated: state.isAuthenticated,
@@ -352,7 +370,8 @@ export function AuthUProvider({ config, children }) {
         login,
         logout,
         getAccessToken,
-        checkEmailExists
+        checkEmailExists,
+        createDeviceLink
     };
     return (_jsx(AuthUContext.Provider, { value: contextValue, children: children }));
 }

package/dist/DeviceLinkQrCode.d.ts

@@ -0,0 +1,16 @@
+import { type CSSProperties } from 'react';
+interface DeviceLinkQrCodeProps {
+    /** Rendered width and height in pixels */
+    size?: number;
+    color?: string;
+    background?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * QR code that signs the scanning device into the current account. The link
+ * renews itself while mounted; nothing is rendered when signed out.
+ */
+export declare function DeviceLinkQrCode({ size, color, background, className, style }: DeviceLinkQrCodeProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=DeviceLinkQrCode.d.ts.map

package/dist/DeviceLinkQrCode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeviceLinkQrCode.d.ts","sourceRoot":"","sources":["../src/DeviceLinkQrCode.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,KAAK,aAAa,EAAU,MAAM,OAAO,CAAC;AAGlD,UAAU,qBAAqB;IAC7B,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAKD;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,IAAU,EACV,KAAiB,EACjB,UAAsB,EACtB,SAAS,EACT,KAAK,EACN,EAAE,qBAAqB,kDAsCvB"}

package/dist/DeviceLinkQrCode.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import qrcode from 'qrcode-generator';
+import { useMemo } from 'react';
+import { useDeviceLink } from './useDeviceLink.js';
+/** Quiet zone around the code, in modules, required by scanners */
+const MARGIN = 2;
+/**
+ * QR code that signs the scanning device into the current account. The link
+ * renews itself while mounted; nothing is rendered when signed out.
+ */
+export function DeviceLinkQrCode({ size = 200, color = '#000000', background = '#ffffff', className, style }) {
+    const { link } = useDeviceLink();
+    const qr = useMemo(() => {
+        if (!link)
+            return null;
+        const code = qrcode(0, 'M');
+        code.addData(link.url);
+        code.make();
+        const count = code.getModuleCount();
+        let path = '';
+        for (let row = 0; row < count; row++) {
+            for (let col = 0; col < count; col++) {
+                if (code.isDark(row, col)) {
+                    path += `M${col + MARGIN} ${row + MARGIN}h1v1h-1z`;
+                }
+            }
+        }
+        return { path, viewBox: count + MARGIN * 2 };
+    }, [link]);
+    if (!qr)
+        return null;
+    return (_jsxs("svg", { role: "img", "aria-label": "Sign-in QR code", width: size, height: size, viewBox: `0 0 ${qr.viewBox} ${qr.viewBox}`, shapeRendering: "crispEdges", className: className, style: style, children: [_jsx("rect", { width: qr.viewBox, height: qr.viewBox, fill: background }), _jsx("path", { d: qr.path, fill: color })] }));
+}

package/dist/index.d.ts

@@ -1,7 +1,9 @@
 export { AuthUProvider } from './AuthUProvider.js';
+export { DeviceLinkQrCode } from './DeviceLinkQrCode.js';
 export { PrivateRoute } from './PrivateRoute.js';
 export * from './pkce.js';
-export type { AuthUConfig, AuthUContextValue, AuthUUser } from './types.js';
+export type { AuthUConfig, AuthUContextValue, AuthUUser, DeviceLink } from './types.js';
 export { useApiToken } from './useApiToken.js';
 export { useAuthU } from './useAuthU.js';
+export { useDeviceLink } from './useDeviceLink.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,aAAa,EAAC,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAC,YAAY,EAAC,MAAM,mBAAmB,CAAC;AAC/C,cAAc,WAAW,CAAC;AAC1B,YAAY,EAAC,WAAW,EAAE,iBAAiB,EAAE,SAAS,EAAC,MAAM,YAAY,CAAC;AAC1E,OAAO,EAAC,WAAW,EAAC,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAC,QAAQ,EAAC,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,aAAa,EAAC,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAC,gBAAgB,EAAC,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAC,YAAY,EAAC,MAAM,mBAAmB,CAAC;AAC/C,cAAc,WAAW,CAAC;AAC1B,YAAY,EACV,WAAW,EACX,iBAAiB,EACjB,SAAS,EACT,UAAU,EACX,MAAM,YAAY,CAAC;AACpB,OAAO,EAAC,WAAW,EAAC,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAC,QAAQ,EAAC,MAAM,eAAe,CAAC;AACvC,OAAO,EAAC,aAAa,EAAC,MAAM,oBAAoB,CAAC"}

package/dist/index.js

@@ -1,5 +1,7 @@
 export { AuthUProvider } from './AuthUProvider.js';
+export { DeviceLinkQrCode } from './DeviceLinkQrCode.js';
 export { PrivateRoute } from './PrivateRoute.js';
 export * from './pkce.js';
 export { useApiToken } from './useApiToken.js';
 export { useAuthU } from './useAuthU.js';
+export { useDeviceLink } from './useDeviceLink.js';

package/dist/types.d.ts

@@ -28,6 +28,16 @@ export interface AuthUContextValue {
     logout: (options?: LogoutOptions) => void;
     getAccessToken: () => Promise<string | null>;
     checkEmailExists: (email: string) => Promise<boolean>;
+    /**
+     * One-shot link that signs another device into the same account, meant to
+     * be shown as a QR code. Expires after two minutes; null when signed out.
+     */
+    createDeviceLink: () => Promise<DeviceLink | null>;
+}
+export interface DeviceLink {
+    url: string;
+    /** Epoch milliseconds */
+    expiresAt: number;
 }
 export interface LoginOptions {
     returnTo?: string;

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,OAAO,CAAC;IACnB,eAAe,EAAE,OAAO,CAAC;IACzB,IAAI,EAAE,SAAS,GAAG,IAAI,CAAC;IACvB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,KAAK,EAAE,CAAC,OAAO,CAAC,EAAE,YAAY,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACjD,MAAM,EAAE,CAAC,OAAO,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IAC1C,cAAc,EAAE,MAAM,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC7C,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;CACvD;AAED,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;CACjC;AAED,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,aAAa;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,SAAS;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,eAAe,EAAE,OAAO,CAAC;IACzB,IAAI,EAAE,SAAS,GAAG,IAAI,CAAC;IACvB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;CACrB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,OAAO,CAAC;IACnB,eAAe,EAAE,OAAO,CAAC;IACzB,IAAI,EAAE,SAAS,GAAG,IAAI,CAAC;IACvB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,KAAK,EAAE,CAAC,OAAO,CAAC,EAAE,YAAY,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACjD,MAAM,EAAE,CAAC,OAAO,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IAC1C,cAAc,EAAE,MAAM,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC7C,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IACtD;;;OAGG;IACH,gBAAgB,EAAE,MAAM,OAAO,CAAC,UAAU,GAAG,IAAI,CAAC,CAAC;CACpD;AAED,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,yBAAyB;IACzB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;CACjC;AAED,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,aAAa;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,SAAS;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,eAAe,EAAE,OAAO,CAAC;IACzB,IAAI,EAAE,SAAS,GAAG,IAAI,CAAC;IACvB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;CACrB"}

package/dist/useDeviceLink.d.ts

@@ -0,0 +1,14 @@
+import type { DeviceLink } from './types.js';
+interface UseDeviceLinkReturn {
+    link: DeviceLink | null;
+    isLoading: boolean;
+    error: Error | null;
+    renew: () => Promise<void>;
+}
+/**
+ * Keeps a fresh device link while the component is mounted (and `enabled`),
+ * so a QR code can stay on screen without ever showing an expired link.
+ */
+export declare function useDeviceLink(enabled?: boolean): UseDeviceLinkReturn;
+export {};
+//# sourceMappingURL=useDeviceLink.d.ts.map

package/dist/useDeviceLink.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDeviceLink.d.ts","sourceRoot":"","sources":["../src/useDeviceLink.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,YAAY,CAAC;AAS3C,UAAU,mBAAmB;IAC3B,IAAI,EAAE,UAAU,GAAG,IAAI,CAAC;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC5B;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,OAAO,UAAO,GAAG,mBAAmB,CA8BjE"}

package/dist/useDeviceLink.js

@@ -0,0 +1,39 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useAuthU } from './useAuthU.js';
+/**
+ * Renewed this long before it expires, so a phone scanning at the last second
+ * still lands on a valid link.
+ */
+const RENEW_MARGIN_MS = 15_000;
+/**
+ * Keeps a fresh device link while the component is mounted (and `enabled`),
+ * so a QR code can stay on screen without ever showing an expired link.
+ */
+export function useDeviceLink(enabled = true) {
+    const { createDeviceLink, isAuthenticated } = useAuthU();
+    const [link, setLink] = useState(null);
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const renew = useCallback(async () => {
+        setIsLoading(true);
+        const created = await createDeviceLink();
+        setLink(created);
+        setError(created ? null : new Error('Could not create a device link'));
+        setIsLoading(false);
+    }, [createDeviceLink]);
+    useEffect(() => {
+        if (!enabled || !isAuthenticated) {
+            setLink(null);
+            return;
+        }
+        renew();
+    }, [enabled, isAuthenticated, renew]);
+    useEffect(() => {
+        if (!enabled || !link)
+            return;
+        const delay = Math.max(link.expiresAt - Date.now() - RENEW_MARGIN_MS, 0);
+        const timer = setTimeout(renew, delay);
+        return () => clearTimeout(timer);
+    }, [enabled, link, renew]);
+    return { link, isLoading, error, renew };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@authu/react",
-  "version": "1.0.66",
+  "version": "1.0.67",
   "description": "React SDK for AuthU - Centralized Multi-Tenant Authentication Service",
   "type": "module",
   "main": "./dist/index.js",
@@ -43,5 +43,8 @@
     "@types/react": "^19.0.4",
     "react": "^19.0.0",
     "typescript": "^5.7.3"
+  },
+  "dependencies": {
+    "qrcode-generator": "^2.0.4"
   }
 }