@flow-industries/id 0.24.2 → 0.24.5

package/dist/sdk/browser-session-route.d.ts

@@ -1,6 +1,7 @@
 export declare function safeReturnTo(value: string, audience: string, sessionPath?: string): string | null;
 export declare function startBrowserSession(request: Request, audience: string, issuerUrl: string, body: {
     action: "login" | "account";
+    redirect?: boolean;
     returnTo?: string;
     signUp?: boolean;
     accessKeyHash?: string;

package/dist/sdk/browser-session-route.js

@@ -81,7 +81,17 @@ export async function startBrowserSession(request, audience, issuerUrl, body, ap
         const { handoff } = z
             .object({ handoff: z.string().regex(opaquePattern) })
             .parse(await response.json());
-        return reply({ accountUrl: `${issuerUrl}/account#handoff=${handoff}` });
+        const accountUrl = `${issuerUrl}/account#handoff=${handoff}`;
+        if (body.redirect)
+            return new Response(null, {
+                status: 303,
+                headers: {
+                    Location: accountUrl,
+                    "Cache-Control": "no-store",
+                    "Referrer-Policy": "no-referrer",
+                },
+            });
+        return reply({ accountUrl });
     }
     const returnTo = safeReturnTo(body.returnTo ?? "/", audience, new URL(request.url).pathname);
     if (!returnTo)

package/dist/sdk/client/create-flow.js

@@ -394,34 +394,12 @@ export function createFlow(options = {}) {
         });
     }
     function openAccount() {
-        const tab = window.open("about:blank", "_blank");
+        const url = new URL(sessionPath, window.location.origin);
+        url.searchParams.set("action", "account");
+        const tab = window.open(url.href, "_blank");
         if (!tab)
             return false;
         tab.opener = null;
-        tab.document.title = "Opening Flow ID";
-        tab.document.body.textContent = "Opening your Flow ID account…";
-        void fetch(sessionPath, {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ action: "account" }),
-        })
-            .then(async (response) => {
-            if (!response.ok)
-                throw new Error("Account unavailable");
-            // SAFETY: the app session handler returns the SDK protocol response.
-            const result = (await response.json());
-            tab.location.replace(result.accountUrl);
-        })
-            .catch(() => {
-            tab.document.title = "Open Flow ID";
-            tab.document.body.textContent =
-                "Your app account could not be opened securely. Return to the app and try again, or open Flow ID and check the signed-in account before making changes. ";
-            const link = tab.document.createElement("a");
-            link.href = `${host}/account`;
-            link.textContent = "Open Flow ID";
-            link.rel = "noreferrer";
-            tab.document.body.appendChild(link);
-        });
         return true;
     }
     async function logout() {

package/dist/sdk/client/profile-button.d.ts

@@ -1,3 +1,3 @@
 import type { MountProfileOptions, ProfileButtonHandle } from "../types";
-/** Mount a native account button that opens Flow ID in a normal browser tab. */
+/** Mount an account button that signs guests in or opens full-account settings. */
 export declare function createProfileButton(options: MountProfileOptions): ProfileButtonHandle;

package/dist/sdk/client/profile-button.js

@@ -6,7 +6,7 @@ const POSITION_STYLE = {
     "bottom-right": { bottom: "0", right: "0" },
     "bottom-left": { bottom: "0", left: "0" },
 };
-/** Mount a native account button that opens Flow ID in a normal browser tab. */
+/** Mount an account button that signs guests in or opens full-account settings. */
 export function createProfileButton(options) {
     if (!("document" in globalThis))
         return { setTheme() { }, destroy() { } };
@@ -32,14 +32,19 @@ export function createProfileButton(options) {
     button.dataset.flowProfile = "";
     Object.assign(button.style, {
         display: "flex",
+        boxSizing: "border-box",
+        height: "var(--flow-profile-height, 2.25rem)",
+        flexShrink: "0",
         alignItems: "center",
         gap: "8px",
         border: "0",
-        borderRadius: "999px",
-        padding: "10px 16px",
-        background: "Canvas",
+        borderRadius: "0",
+        padding: "0.25rem 0.75rem",
+        background: "transparent",
         color: "CanvasText",
         font: "inherit",
+        fontSize: "0.875rem",
+        lineHeight: "1.25rem",
         cursor: "pointer",
         pointerEvents: "auto",
         maxWidth: "240px",
@@ -59,14 +64,21 @@ export function createProfileButton(options) {
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
-        width: "28px",
-        height: "28px",
-        borderRadius: "50%",
+        width: "calc(var(--flow-profile-height, 2.25rem) - 0.5rem)",
+        height: "calc(var(--flow-profile-height, 2.25rem) - 0.5rem)",
+        borderRadius: "var(--squircle-radius, 35%)",
+        // biome-ignore lint/plugin: CSSStyleDeclaration requires the browser's property name.
+        cornerShape: "superellipse(1.6)",
         overflow: "hidden",
         background: "color-mix(in srgb, currentColor 10%, transparent)",
         flexShrink: "0",
     });
     const name = document.createElement("span");
+    Object.assign(name.style, {
+        minWidth: "0",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+    });
     button.append(avatar, name);
     const fallback = document.createElement("a");
     fallback.href = `${host}/account`;
@@ -81,7 +93,9 @@ export function createProfileButton(options) {
     function update(refresh = false) {
         const user = flow.getState().user;
         name.textContent = user?.username ?? "Flow ID";
-        button.setAttribute("aria-label", `Open ${user?.username ?? "your"} Flow ID account in a new tab`);
+        button.setAttribute("aria-label", !user || user.isGuest
+            ? "Sign in to Flow ID"
+            : `Open ${user.username} Flow ID account in a new tab`);
         const identityChanged = user?.id !== lastUser?.id ||
             user?.username !== lastUser?.username ||
             user?.isGuest !== lastUser?.isGuest;
@@ -140,6 +154,19 @@ export function createProfileButton(options) {
         });
     }
     button.addEventListener("click", () => {
+        const user = flow.getState().user;
+        if (!user || user.isGuest) {
+            if (button.disabled)
+                return;
+            button.disabled = true;
+            notice.textContent = "";
+            fallback.hidden = true;
+            void flow.login().catch(() => {
+                button.disabled = false;
+                notice.textContent = "Could not start sign-in. Try again.";
+            });
+            return;
+        }
         const opened = flow.openAccount();
         notice.textContent = opened
             ? ""

package/dist/sdk/session-route.js

@@ -93,6 +93,14 @@ export async function handleSessionRequest(request, opts = {}) {
     }
     switch (request.method) {
         case "GET": {
+            if (callback.searchParams.get("action") === "account") {
+                try {
+                    return await startBrowserSession(request, audience, issuerUrl, { action: "account", redirect: true }, apiUrl);
+                }
+                catch {
+                    return json({ state: null }, 502);
+                }
+            }
             if (new URL(request.url).searchParams.get("refresh") === "1") {
                 const token = parseCookieHeader(request.headers.get("Cookie"))[cookieNamesFor(audience).refresh];
                 if (!token)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flow-industries/id",
-  "version": "0.24.2",
+  "version": "0.24.5",
   "license": "MIT",
   "repository": {
     "type": "git",