@mehdad67/apitogo 0.1.30 → 0.1.32

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.32",
   type: "module",
   sideEffects: [
     "**/*.css",

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

@@ -4,28 +4,10 @@ export declare const useRefreshUserProfile: ({ refetchOnWindowFocus, }?: {
     refetchOnWindowFocus?: boolean | "always";
 }) => import("@tanstack/react-query").UseQueryResult<boolean | undefined, Error>;
 export declare const useVerifiedEmail: () => {
-    email: string | undefined;
-    isVerified: boolean | undefined;
+    email: any;
+    isVerified: any;
     supportsEmailVerification: boolean;
     refresh: () => undefined;
     requestEmailVerification: (options?: AuthActionOptions) => Promise<void>;
 };
-export declare const useAuth: () => {
-    isBackendAvailable: boolean;
-    authMode: import("./state.js").AuthMode;
-    login: (options?: AuthActionOptions) => Promise<void>;
-    logout: () => Promise<void>;
-    signup: (options?: AuthActionOptions) => Promise<void>;
-    requestEmailVerification: (options?: AuthActionOptions) => Promise<void>;
-    isAuthenticated: boolean;
-    isPending: boolean;
-    profile: import("./state.js").UserProfile | null;
-    providerData: import("./state.js").ProviderData | null;
-    setAuthenticationPending: () => void;
-    setLoggedOut: () => void;
-    setLoggedIn: (args: {
-        profile: import("./state.js").UserProfile;
-        providerData: import("./state.js").ProviderData;
-    }) => void;
-    isAuthEnabled: boolean;
-};
+export declare const useAuth: () => any;

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

@@ -16,32 +16,14 @@ export interface AuthState {
         providerData: ProviderData;
     }) => void;
 }
-export declare const authState: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<AuthState>, "setState" | "persist"> & {
-    setState(partial: AuthState | Partial<AuthState> | ((state: AuthState) => AuthState | Partial<AuthState>), replace?: false | undefined): unknown;
-    setState(state: AuthState | ((state: AuthState) => AuthState), replace: true): unknown;
-    persist: {
-        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<AuthState, unknown, unknown>>) => void;
-        clearStorage: () => void;
-        rehydrate: () => Promise<void> | void;
-        hasHydrated: () => boolean;
-        onHydrate: (fn: (state: AuthState) => void) => () => void;
-        onFinishHydration: (fn: (state: AuthState) => void) => () => void;
-        getOptions: () => Partial<import("zustand/middleware").PersistOptions<AuthState, unknown, unknown>>;
-    };
-}>;
-export declare const useAuthState: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<AuthState>, "setState" | "persist"> & {
-    setState(partial: AuthState | Partial<AuthState> | ((state: AuthState) => AuthState | Partial<AuthState>), replace?: false | undefined): unknown;
-    setState(state: AuthState | ((state: AuthState) => AuthState), replace: true): unknown;
-    persist: {
-        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<AuthState, unknown, unknown>>) => void;
-        clearStorage: () => void;
-        rehydrate: () => Promise<void> | void;
-        hasHydrated: () => boolean;
-        onHydrate: (fn: (state: AuthState) => void) => () => void;
-        onFinishHydration: (fn: (state: AuthState) => void) => () => void;
-        getOptions: () => Partial<import("zustand/middleware").PersistOptions<AuthState, unknown, unknown>>;
-    };
-}>;
+type AuthStateStore = ReturnType<typeof createAuthStateStore>;
+declare global {
+    var __APITOGO_AUTH_STATE: AuthStateStore | undefined;
+}
+declare function createAuthStateStore(): AuthStateStore;
+export declare const authState: any;
+export declare const useAuthState: any;
+export declare const waitForAuthStateHydration: () => Promise<void>;
 export interface UserProfile {
     sub: string;
     email: string | undefined;
@@ -50,3 +32,4 @@ export interface UserProfile {
     pictureUrl: string | undefined;
     [key: string]: string | boolean | undefined;
 }
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mehdad67/apitogo",
-  "version": "0.1.30",
+  "version": "0.1.32",
   "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

@@ -40,72 +40,135 @@ export interface AuthState {
   }) => void;
 }
 
-export const authState = create<AuthState>()(
-  persist(
-    (set) => ({
-      isAuthenticated: false,
-      isPending: true,
-      profile: null,
-      providerData: null,
-      isBackendAvailable: true,
-      authMode: "live",
-      setAuthenticationPending: () =>
-        set(() => ({
-          isAuthenticated: false,
-          isPending: false,
-          profile: null,
-          providerData: null,
-          isBackendAvailable: true,
-          authMode: "live",
-        })),
-      setLoggedOut: () =>
-        set(() => ({
-          isAuthenticated: false,
-          isPending: false,
-          profile: null,
-          providerData: null,
-          isBackendAvailable: true,
-          authMode: "live",
-        })),
-      setLoggedIn: ({ profile, providerData }) =>
-        set(() => ({
-          isAuthenticated: true,
-          isPending: false,
-          profile,
-          providerData,
-        })),
-    }),
-    {
-      merge: (persistedState, currentState) => {
-        const persisted =
-          typeof persistedState === "object" && persistedState !== null
-            ? (persistedState as Partial<AuthState>)
-            : {};
-
-        // Cookie/session auth is refreshed from the backend on load. Do not
-        // restore identity fields from localStorage or OIDC return looks logged out.
-        return {
-          ...currentState,
-          isPending: false,
-          isBackendAvailable:
-            persisted.isBackendAvailable ?? currentState.isBackendAvailable,
-          authMode: persisted.authMode ?? currentState.authMode,
-        };
-      },
-      partialize: (state) => ({
-        isBackendAvailable: state.isBackendAvailable,
-        authMode: state.authMode,
+type AuthStateStore = ReturnType<typeof createAuthStateStore>;
+
+/**
+ * Vite SSR/dev can load authentication modules more than once (app + plugins),
+ * which would otherwise create duplicate Zustand stores. The header would read
+ * one store while dev-portal auth writes another.
+ */
+declare global {
+  var __APITOGO_AUTH_STATE: AuthStateStore | undefined;
+}
+
+function createAuthStateStore(): AuthStateStore {
+  return create<AuthState>()(
+    persist(
+      (set) => ({
+        isAuthenticated: false,
+        isPending: true,
+        profile: null,
+        providerData: null,
+        isBackendAvailable: true,
+        authMode: "live",
+        setAuthenticationPending: () =>
+          set(() => ({
+            isAuthenticated: false,
+            isPending: false,
+            profile: null,
+            providerData: null,
+            isBackendAvailable: true,
+            authMode: "live",
+          })),
+        setLoggedOut: () =>
+          set(() => ({
+            isAuthenticated: false,
+            isPending: false,
+            profile: null,
+            providerData: null,
+            isBackendAvailable: true,
+            authMode: "live",
+          })),
+        setLoggedIn: ({ profile, providerData }) =>
+          set(() => ({
+            isAuthenticated: true,
+            isPending: false,
+            profile,
+            providerData,
+          })),
       }),
-      name: "auth-state",
-      storage: createJSONStorage(() => localStorage),
-    },
-  ),
-);
+      {
+        version: 1,
+        migrate: (persistedState, version) => {
+          const persisted =
+            typeof persistedState === "object" && persistedState !== null
+              ? (persistedState as Partial<AuthState>)
+              : {};
+
+          // v0 stored full auth identity in localStorage; keep only backend metadata.
+          if (version === 0) {
+            return {
+              isBackendAvailable: persisted.isBackendAvailable,
+              authMode: persisted.authMode,
+            };
+          }
+
+          return persisted;
+        },
+        merge: (persistedState, currentState) => {
+          const persisted =
+            typeof persistedState === "object" && persistedState !== null
+              ? (persistedState as Partial<AuthState>)
+              : {};
+
+          // Cookie/session auth is refreshed from the backend on load. Do not
+          // restore identity fields from localStorage or OIDC return looks logged out.
+          return {
+            ...currentState,
+            isPending: false,
+            isAuthenticated: currentState.isAuthenticated,
+            profile: currentState.profile,
+            providerData: currentState.providerData,
+            isBackendAvailable:
+              persisted.isBackendAvailable ?? currentState.isBackendAvailable,
+            authMode: persisted.authMode ?? currentState.authMode,
+          };
+        },
+        partialize: (state) => ({
+          isBackendAvailable: state.isBackendAvailable,
+          authMode: state.authMode,
+        }),
+        name: "auth-state",
+        storage: createJSONStorage(() => localStorage),
+      },
+    ),
+  );
+}
+
+globalThis.__APITOGO_AUTH_STATE ??= createAuthStateStore();
+
+export const authState = globalThis.__APITOGO_AUTH_STATE;
 
 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;
+
+  return new Promise((resolve) => {
+    const finish = () => {
+      // Let hydration merge flush before /auth/me refresh runs.
+      queueMicrotask(resolve);
+    };
+
+    if (persist.hasHydrated()) {
+      finish();
+      return;
+    }
+
+    const unsubscribe = persist.onFinishHydration(() => {
+      unsubscribe();
+      finish();
+    });
+  });
+};
+
 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"