@flow-industries/id 0.23.2 → 0.23.4

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

@@ -34,7 +34,7 @@ export function createProfileButton(options) {
         display: "flex",
         alignItems: "center",
         gap: "8px",
-        border: "1px solid color-mix(in srgb, currentColor 18%, transparent)",
+        border: "0",
         borderRadius: "999px",
         padding: "10px 16px",
         background: "Canvas",
@@ -74,17 +74,26 @@ export function createProfileButton(options) {
     fallback.rel = "noopener noreferrer";
     fallback.textContent = "Open Flow ID";
     fallback.hidden = true;
-    let lastUsername;
+    let lastUser = null;
+    let imageUrl = null;
+    avatar.textContent = "F";
     let profileRequest = null;
-    function update() {
+    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`);
-        if (user?.username === lastUsername)
+        const identityChanged = user?.id !== lastUser?.id ||
+            user?.username !== lastUser?.username ||
+            user?.isGuest !== lastUser?.isGuest;
+        if (identityChanged) {
+            profileRequest?.abort();
+            profileRequest = null;
+            imageUrl = null;
+            avatar.textContent = user?.username.slice(0, 1).toUpperCase() ?? "F";
+            lastUser = user;
+        }
+        else if (!refresh || profileRequest)
             return;
-        lastUsername = user?.username;
-        profileRequest?.abort();
-        avatar.textContent = user?.username.slice(0, 1).toUpperCase() ?? "F";
         if (!user || user.isGuest)
             return;
         const controller = new AbortController();
@@ -98,7 +107,14 @@ export function createProfileButton(options) {
                 return;
             // SAFETY: Flow ID owns the public profile endpoint and its optional image field.
             const profile = (await response.json());
-            if (controller.signal.aborted || !profile.image)
+            if (controller.signal.aborted)
+                return;
+            if (profile.image === null) {
+                imageUrl = null;
+                avatar.textContent = user.username.slice(0, 1).toUpperCase();
+                return;
+            }
+            if (!profile.image || profile.image === imageUrl)
                 return;
             const image = document.createElement("img");
             image.src = profile.image;
@@ -108,9 +124,17 @@ export function createProfileButton(options) {
                 height: "100%",
                 objectFit: "cover",
             });
+            await image.decode();
+            if (controller.signal.aborted)
+                return;
+            imageUrl = profile.image;
             avatar.replaceChildren(image);
         })
-            .catch(() => { });
+            .catch(() => { })
+            .finally(() => {
+            if (profileRequest === controller)
+                profileRequest = null;
+        });
     }
     button.addEventListener("click", () => {
         const opened = flow.openAccount();
@@ -120,8 +144,7 @@ export function createProfileButton(options) {
         fallback.hidden = opened;
     });
     function refresh() {
-        lastUsername = undefined;
-        update();
+        update(true);
     }
     window.addEventListener("focus", refresh);
     function setTheme(theme) {
@@ -130,7 +153,7 @@ export function createProfileButton(options) {
     setTheme(options.theme ?? "light dark");
     container.append(button, notice, fallback);
     update();
-    const unsubscribe = flow.subscribe(update);
+    const unsubscribe = flow.subscribe(() => update());
     return {
         setTheme,
         destroy() {

package/dist/sdk/types/dialog.d.ts

@@ -90,6 +90,10 @@ export type DialogState = {
     customLabels?: DialogCustomLabels;
 };
 export type SignUpProps = {
+    verifiedEmail?: {
+        email: string;
+        nonce: string;
+    };
     rpId: string;
     accessKeyHash?: string | undefined;
     guestToken?: string | undefined;

package/dist/sdk/types/events.d.ts

@@ -10,7 +10,7 @@ export type AuthMode = "sign-up" | "sign-in";
 /** Client-only funnel steps reported via the `/api/events` beacon. */
 export type FunnelStep = "mode_selected" | "email_entered" | "ceremony_started" | "ceremony_failed" | "done_shown";
 export type AuthEventName = "auth.username.checked" | "auth.signup.succeeded" | "auth.signup.failed" | "auth.otp.sent" | "auth.otp.verified" | "auth.otp.failed" | "auth.email.verify.sent" | "auth.email.verify.succeeded" | "auth.email.verify.failed" | "auth.email.changed" | "auth.avatar.upload.succeeded" | "auth.avatar.upload.failed" | "auth.bio.update.succeeded" | "auth.bio.update.failed" | "auth.profile.view.failed" | "auth.profile.view.uncapped" | "auth.challenge.issued" | "auth.signin.succeeded" | "auth.signin.failed" | "auth.passkey.added" | "auth.passkey.add_failed" | "auth.restore.succeeded" | "auth.restore.failed" | "auth.restore.no_session" | "auth.refresh.succeeded" | "auth.refresh.failed" | "auth.refresh.reuse" | "auth.refresh.grace" | "auth.jwt.verified" | "auth.jwt.rejected" | "auth.signout" | "auth.session.revoked" | "auth.session.revoked_all" | "auth.audience.rejected" | "auth.audience.minted" | "auth.guest.created" | "auth.guest.restored" | "auth.guest.upgraded" | "auth.guest.failed" | "auth.role.granted" | "auth.role.revoked" | "auth.account.deleted" | "auth.account.exported" | "room.restriction.issued" | "room.restriction.lifted" | "auth.funnel.mode_selected" | "auth.funnel.email_entered" | "auth.funnel.ceremony_started" | "auth.funnel.ceremony_failed" | "auth.funnel.done_shown" | "room_event.activated" | "room_event.completed" | "room_event.reminder_dispatched" | "room_event.reminder_failed";
-export type AuthErrorCode = "username_taken" | "credential_taken" | "email_taken" | "email_not_verified" | "no_email" | "image_upload_forbidden" | "image_upload_rate_limited" | "invalid_image_type" | "image_too_large" | "image_upload_failed" | "bio_forbidden" | "bio_invalid" | "bio_too_long" | "profile_rate_limited" | "profile_ip_missing" | "otp_invalid" | "otp_expired" | "otp_attempts_exceeded" | "otp_resend_cooldown" | "otp_resend_limit" | "otp_global_limit" | "otp_send_failed" | "challenge_expired" | "unknown_credential" | "invalid_assertion_type" | "invalid_assertion_origin" | "user_verification_required" | "invalid_signature" | "user_not_found" | "missing_audience" | "audience_not_allowed" | "audience_mismatch" | "no_session" | "no_passkey" | "refresh_token_invalid" | "refresh_token_expired" | "refresh_epoch_stale" | "refresh_user_epoch_stale" | "refresh_reuse_detected" | "guest_rate_limited" | "guest_global_limit" | "guest_username_exhausted" | "guest_session" | "passkey_exists" | "already_upgraded" | "malformed_token" | "unknown_key" | "verification_failed" | "webauthn_not_allowed" | "webauthn_security" | "webauthn_invalid_state" | "webauthn_not_supported" | "webauthn_constraint" | "webauthn_aborted" | "webauthn_unknown" | "internal_error";
+export type AuthErrorCode = "username_taken" | "credential_taken" | "email_taken" | "email_not_verified" | "no_email" | "image_upload_forbidden" | "image_upload_rate_limited" | "invalid_image_type" | "image_too_large" | "image_upload_failed" | "bio_forbidden" | "bio_invalid" | "bio_too_long" | "profile_rate_limited" | "profile_ip_missing" | "otp_invalid" | "otp_expired" | "otp_attempts_exceeded" | "otp_resend_cooldown" | "otp_resend_limit" | "otp_global_limit" | "otp_send_failed" | "challenge_expired" | "unknown_credential" | "invalid_assertion_type" | "invalid_assertion_origin" | "user_verification_required" | "invalid_signature" | "user_not_found" | "missing_audience" | "audience_not_allowed" | "audience_mismatch" | "no_session" | "no_passkey" | "refresh_token_invalid" | "refresh_token_expired" | "refresh_epoch_stale" | "refresh_user_epoch_stale" | "refresh_reuse_detected" | "refresh_token_revoked" | "guest_rate_limited" | "guest_global_limit" | "guest_username_exhausted" | "guest_session" | "passkey_exists" | "already_upgraded" | "malformed_token" | "unknown_key" | "verification_failed" | "webauthn_not_allowed" | "webauthn_security" | "webauthn_invalid_state" | "webauthn_not_supported" | "webauthn_constraint" | "webauthn_aborted" | "webauthn_unknown" | "internal_error";
 /** One flat record per event = one row in the `auth_events` stream. */
 export interface AuthEventRecord {
     service: "auth";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flow-industries/id",
-  "version": "0.23.2",
+  "version": "0.23.4",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -140,7 +140,7 @@
   ],
   "dependencies": {
     "@aws-sdk/client-s3": "^3.1073.0",
-    "@flow-industries/ui": "^0.21.1",
+    "@flow-industries/ui": "^0.23.3",
     "@hono/otel": "^1.1.2",
     "@openobserve/browser-logs": "^0.3.1",
     "@openobserve/browser-rum": "^0.3.1",