@mehdad67/apitogo 0.1.30 → 0.1.31

package/dist/cli/cli.js

@@ -4121,7 +4121,7 @@ import {
 // package.json
 var package_default = {
   name: "@mehdad67/apitogo",
-  version: "0.1.30",
+  version: "0.1.31",
   type: "module",
   sideEffects: [
     "**/*.css",

package/dist/declarations/lib/authentication/providers/dev-portal.d.ts

@@ -20,6 +20,8 @@ export declare class DevPortalAuthenticationProvider extends CoreAuthenticationP
     private readonly redirectToAfterSignOut;
     private authMode;
     private backendAvailable;
+    private refreshGeneration;
+    private refreshInFlight;
     constructor({ apiBaseUrl, redirectToAfterSignIn, redirectToAfterSignUp, redirectToAfterSignOut, }: DevPortalAuthenticationConfig);
     initialize(_context: ZudokuContext): Promise<void>;
     onPageLoad: () => Promise<void>;
@@ -27,6 +29,7 @@ export declare class DevPortalAuthenticationProvider extends CoreAuthenticationP
     private setPreviewState;
     private ensureLiveBackend;
     refreshUserProfile(): Promise<boolean>;
+    private refreshUserProfileInternal;
     signIn(_: AuthActionContext, { redirectTo }?: AuthActionOptions): Promise<void>;
     signUp(_: AuthActionContext, { redirectTo }?: AuthActionOptions): Promise<void>;
     signOut(_: AuthActionContext): Promise<void>;

package/dist/declarations/lib/authentication/state.d.ts

@@ -42,6 +42,7 @@ export declare const useAuthState: import("zustand").UseBoundStore<Omit<import("
         getOptions: () => Partial<import("zustand/middleware").PersistOptions<AuthState, unknown, unknown>>;
     };
 }>;
+export declare const waitForAuthStateHydration: () => Promise<void>;
 export interface UserProfile {
     sub: string;
     email: string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mehdad67/apitogo",
-  "version": "0.1.30",
+  "version": "0.1.31",
   "type": "module",
   "sideEffects": [
     "**/*.css",

package/src/lib/authentication/providers/dev-portal.tsx

@@ -7,7 +7,11 @@ import type {
   AuthenticationProviderInitializer,
 } from "../authentication.js";
 import { CoreAuthenticationPlugin } from "../AuthenticationPlugin.js";
-import { type UserProfile, useAuthState } from "../state.js";
+import {
+  type UserProfile,
+  useAuthState,
+  waitForAuthStateHydration,
+} from "../state.js";
 import type {
   DevPortalAuthMode,
   EndUserMeResponse,
@@ -43,6 +47,8 @@ export class DevPortalAuthenticationProvider
   private readonly redirectToAfterSignOut: string;
   private authMode: DevPortalAuthMode = "preview";
   private backendAvailable = false;
+  private refreshGeneration = 0;
+  private refreshInFlight: Promise<boolean> | null = null;
 
   constructor({
     apiBaseUrl,
@@ -63,6 +69,7 @@ export class DevPortalAuthenticationProvider
       return;
     }
 
+    await waitForAuthStateHydration();
     await this.syncBackendAvailability();
     if (!this.backendAvailable) {
       this.setPreviewState();
@@ -77,6 +84,7 @@ export class DevPortalAuthenticationProvider
       return;
     }
 
+    await waitForAuthStateHydration();
     await this.syncBackendAvailability();
     if (!this.backendAvailable) {
       this.setPreviewState();
@@ -123,6 +131,18 @@ export class DevPortalAuthenticationProvider
   }
 
   async refreshUserProfile(): Promise<boolean> {
+    if (this.refreshInFlight) {
+      return this.refreshInFlight;
+    }
+
+    this.refreshInFlight = this.refreshUserProfileInternal().finally(() => {
+      this.refreshInFlight = null;
+    });
+
+    return this.refreshInFlight;
+  }
+
+  private async refreshUserProfileInternal(): Promise<boolean> {
     if (!this.apiBaseUrl) {
       this.setPreviewState();
       return false;
@@ -133,12 +153,16 @@ export class DevPortalAuthenticationProvider
       return false;
     }
 
+    await waitForAuthStateHydration();
     await this.syncBackendAvailability();
     if (!this.backendAvailable) {
       this.setPreviewState();
       return false;
     }
 
+    const generation = ++this.refreshGeneration;
+    useAuthState.setState({ isPending: true });
+
     try {
       const response = await fetch(`${this.apiBaseUrl}/api/v1/auth/me`, {
         method: "GET",
@@ -147,6 +171,10 @@ export class DevPortalAuthenticationProvider
         redirect: "manual",
       });
 
+      if (generation !== this.refreshGeneration) {
+        return useAuthState.getState().isAuthenticated;
+      }
+
       // Backends may still respond with 302 to the IdP; treat as unauthenticated.
       if (
         response.type === "opaqueredirect" ||
@@ -174,22 +202,30 @@ export class DevPortalAuthenticationProvider
       }
 
       const me = (await response.json()) as EndUserMeResponse;
+      if (generation !== this.refreshGeneration) {
+        return useAuthState.getState().isAuthenticated;
+      }
+
       const profile: UserProfile = mapEndUserMeToProfile(me);
 
-      useAuthState.getState().setLoggedIn({
+      useAuthState.setState({
+        isAuthenticated: true,
+        isPending: false,
         profile,
         providerData: {
           type: "dev-portal",
           apiBaseUrl: this.apiBaseUrl,
           authMode: "live",
         },
-      });
-      useAuthState.setState({
         isBackendAvailable: true,
         authMode: "live",
       });
       return true;
     } catch {
+      if (generation !== this.refreshGeneration) {
+        return useAuthState.getState().isAuthenticated;
+      }
+
       this.setPreviewState();
       return false;
     }

package/src/lib/authentication/state.ts

@@ -106,6 +106,25 @@ syncZustandState(authState);
 
 export const useAuthState = authState;
 
+/** Wait until persisted auth metadata has rehydrated from localStorage. */
+export const waitForAuthStateHydration = (): Promise<void> => {
+  if (typeof window === "undefined") {
+    return Promise.resolve();
+  }
+
+  const { persist } = useAuthState;
+  if (persist.hasHydrated()) {
+    return Promise.resolve();
+  }
+
+  return new Promise((resolve) => {
+    const unsubscribe = persist.onFinishHydration(() => {
+      unsubscribe();
+      resolve();
+    });
+  });
+};
+
 export interface UserProfile {
   sub: string;
   email: string | undefined;

package/src/lib/components/Header.tsx

@@ -73,13 +73,16 @@ const ProfileMenu = () => {
   const context = useZudoku();
   const profileItems = context.getProfileMenuItems();
   const auth = useAuth();
-  const { isAuthEnabled, isAuthenticated, profile, isBackendAvailable } = auth;
+  const { isAuthEnabled, isAuthenticated, isPending, profile, isBackendAvailable } =
+    auth;
 
   if (!isAuthEnabled || !isBackendAvailable) return null;
 
   return (
     <ClientOnly fallback={<Skeleton className="rounded-sm h-5 w-24 mr-4" />}>
-      {!isAuthenticated ? (
+      {isPending ? (
+        <Skeleton className="rounded-sm h-9 w-24" />
+      ) : !isAuthenticated ? (
         <Button size="lg" variant="ghost" onClick={() => auth.login()}>
           Login
         </Button>

package/src/lib/components/MobileTopNavigation.tsx

@@ -130,7 +130,7 @@ export const MobileTopNavigation = () => {
     getProfileMenuItems,
   } = context;
   const headerNavigation = header?.navigation ?? [];
-  const { isAuthenticated, profile, isAuthEnabled, isBackendAvailable } =
+  const { isAuthenticated, profile, isAuthEnabled, isBackendAvailable, isPending } =
     authState;
   const [drawerOpen, setDrawerOpen] = useState(false);
 
@@ -237,7 +237,9 @@ export const MobileTopNavigation = () => {
                 <ClientOnly
                   fallback={<Skeleton className="rounded-sm h-8 w-16" />}
                 >
-                  {isAuthenticated ? (
+                  {isPending ? (
+                    <Skeleton className="rounded-sm h-8 w-16" />
+                  ) : isAuthenticated ? (
                     <Button asChild variant="outline">
                       <Link
                         to="/signout"