@sybilion/uilib 1.2.11 → 1.2.13

package/dist/esm/components/widgets/SignInPage/SignInPage.js

@@ -7,7 +7,7 @@ import { SybilionSignInPanel } from '../SybilionSignInPanel/SybilionSignInPanel.
 const DEFAULT_TITLE = 'Sign In';
 const DEFAULT_SUBTITLE = 'To get access authenticate through google or your email.';
 function SignInPage({ title = DEFAULT_TITLE, subtitle = DEFAULT_SUBTITLE, forgotPasswordTo = '/forgot-password', releasesTo = '/releases', versionLabel, primaryButtonLabel, connectingLabel, loginRedirectOptions, logoSize, containerClassName, }) {
-    const { error, loginWithRedirect, isLoading } = useSybilionAuth();
+    const { error, loginWithRedirect, isLoading, isAuthenticated } = useSybilionAuth();
     const handleSignIn = () => loginWithRedirect({
         ...loginRedirectOptions,
         authorizationParams: {
@@ -19,7 +19,7 @@ function SignInPage({ title = DEFAULT_TITLE, subtitle = DEFAULT_SUBTITLE, forgot
             ...loginRedirectOptions?.authorizationParams,
         },
     });
-    return (jsx(SybilionAuthLayout, { title: title, subtitle: subtitle, logoSize: logoSize, containerClassName: containerClassName, children: jsx(SybilionSignInPanel, { onSignIn: handleSignIn, isSigningIn: isLoading, error: error, forgotPasswordTo: forgotPasswordTo, releasesTo: releasesTo, versionLabel: versionLabel, primaryButtonLabel: primaryButtonLabel, connectingLabel: connectingLabel }) }));
+    return (jsx(SybilionAuthLayout, { title: title, subtitle: subtitle, logoSize: logoSize, containerClassName: containerClassName, children: jsx(SybilionSignInPanel, { onSignIn: handleSignIn, isSigningIn: isLoading && !isAuthenticated, error: error, forgotPasswordTo: forgotPasswordTo, releasesTo: releasesTo, versionLabel: versionLabel, primaryButtonLabel: primaryButtonLabel, connectingLabel: connectingLabel }) }));
 }
 
 export { SignInPage };

package/dist/esm/hooks/index.js

@@ -0,0 +1 @@
+export { useIsMobile } from './useIsMobile.js';

package/dist/esm/index.js

@@ -1,3 +1,4 @@
+export { useIsMobile } from './hooks/useIsMobile.js';
 export { ThemeProvider, useTheme } from './contexts/theme-context.js';
 export { DEFAULT_THEME_ACTIVE_COLOR } from './docs/lib/theme.js';
 export { SybilionAuthProvider, createSybilionApiFetch, getSybilionApiOriginFromSdk, sybilionApiFetch, useSybilionApiFetch, useSybilionAuth } from './sybilion-auth/SybilionAuthProvider.js';

package/dist/esm/sybilion-auth/SybilionAuthProvider.js

@@ -59,6 +59,16 @@ function useSybilionApiFetch() {
     const { apiBaseUrl, getSybilionAccessToken } = useSybilionAuth();
     return useMemo(() => createSybilionApiFetch(apiBaseUrl, getSybilionAccessToken), [apiBaseUrl, getSybilionAccessToken]);
 }
+function readTokenFromLs(key) {
+    if (typeof localStorage === 'undefined')
+        return null;
+    try {
+        return localStorage.getItem(key);
+    }
+    catch {
+        return null;
+    }
+}
 function writeLs(key, value) {
     if (typeof localStorage === 'undefined')
         return;
@@ -76,7 +86,7 @@ function InnerSybilionSession({ children, sdk, storageKey, logoutReturnTo, useFe
     const auth0 = useAuth0();
     const auth0Ref = useRef(auth0);
     auth0Ref.current = auth0;
-    const [sybilionToken, setSybilionToken] = useState(null);
+    const [sybilionToken, setSybilionToken] = useState(() => typeof window === 'undefined' ? null : readTokenFromLs(storageKey));
     const [exchangeLoading, setExchangeLoading] = useState(false);
     const [exchangeError, setExchangeError] = useState(null);
     const [isLoggingOut, setIsLoggingOut] = useState(false);
@@ -106,10 +116,15 @@ function InnerSybilionSession({ children, sdk, storageKey, logoutReturnTo, useFe
     }, [auth0.isAuthenticated]);
     const apiBaseUrl = useMemo(() => getSybilionApiOriginFromSdk(sdk), [sdk]);
     useEffect(() => {
+        // While Auth0 restores from localStorage, `isAuthenticated` is false — do not
+        // wipe the Sybilion JWT (would break reload: sign-in flash / lost session).
+        if (auth0.isLoading) {
+            return;
+        }
         if (!auth0.isAuthenticated || !auth0.user?.sub) {
             persistToken(null);
         }
-    }, [auth0.isAuthenticated, auth0.user?.sub, persistToken]);
+    }, [auth0.isLoading, auth0.isAuthenticated, auth0.user?.sub, persistToken]);
     useEffect(() => {
         if (!auth0.isAuthenticated || !auth0.user?.sub) {
             setExchangeLoading(false);
@@ -145,13 +160,7 @@ function InnerSybilionSession({ children, sdk, storageKey, logoutReturnTo, useFe
         return () => {
             cancelled = true;
         };
-    }, [
-        sdk,
-        auth0.isAuthenticated,
-        auth0.user?.sub,
-        persistToken,
-        doLogout,
-    ]);
+    }, [sdk, auth0.isAuthenticated, auth0.user?.sub, persistToken, doLogout]);
     const getAuth0AccessToken = useCallback(async () => {
         if (!auth0.isAuthenticated)
             return undefined;
@@ -168,13 +177,21 @@ function InnerSybilionSession({ children, sdk, storageKey, logoutReturnTo, useFe
     const logout = useCallback(() => {
         doLogout();
     }, [doLogout]);
-    const isAuthenticated = Boolean(auth0.isAuthenticated && sybilionToken && !exchangeError);
-    const isLoading = auth0.isLoading ||
-        exchangeLoading ||
-        (Boolean(auth0.isAuthenticated && auth0.user) &&
-            sybilionToken === null &&
-            exchangeError === null &&
-            !isLoggingOut);
+    const hasAuth0User = Boolean(auth0.isAuthenticated && auth0.user?.sub);
+    /** Auth0 session is enough for app routes; Sybilion JWT is filled by exchange. */
+    const isAuthenticated = Boolean(!exchangeError &&
+        !isLoggingOut &&
+        (hasAuth0User ||
+            (Boolean(sybilionToken) && (auth0.isAuthenticated || auth0.isLoading))));
+    const needsFirstSybilionToken = Boolean(auth0.isAuthenticated &&
+        auth0.user &&
+        sybilionToken === null &&
+        exchangeError === null &&
+        !isLoggingOut);
+    /** Omit Auth0/exchange "busy" once we already have a Sybilion JWT — avoids header skeleton flicker on refresh. */
+    const isLoading = (auth0.isLoading && sybilionToken === null) ||
+        (exchangeLoading && sybilionToken === null) ||
+        needsFirstSybilionToken;
     const value = useMemo(() => ({
         apiBaseUrl,
         isLoading,

package/dist/esm/types/src/hooks/index.d.ts

@@ -0,0 +1 @@
+export { useIsMobile } from './useIsMobile';

package/dist/esm/types/src/index.d.ts

@@ -1,3 +1,4 @@
+export { useIsMobile } from './hooks/useIsMobile';
 export * from './contexts/theme-context';
 export { DEFAULT_THEME_ACTIVE_COLOR } from './docs/lib/theme';
 export * from './sybilion-auth';

package/dist/esm/types/src/sybilion-auth/SybilionAuthProvider.d.ts

@@ -1,6 +1,6 @@
 import { type RedirectLoginOptions } from '@auth0/auth0-react';
-import type { SybilionSDK } from '@sybilion/sdk';
 import type { JSX, ReactNode } from 'react';
+import type { SybilionSDK } from '@sybilion/sdk';
 /** Origin (`scheme://host:port`) for paths like `/api/v1/...`; derived from SDK URL layout. */
 export declare function getSybilionApiOriginFromSdk(sdk: SybilionSDK): string;
 export type SybilionAuthProviderProps = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sybilion/uilib",
-  "version": "1.2.11",
+  "version": "1.2.13",
   "description": "Sybilion Design System — React UI components (Webpack + Stylus)",
   "publishConfig": {
     "access": "public",
@@ -29,6 +29,11 @@
       "import": "./src/index.ts",
       "default": "./src/index.ts"
     },
+    "./hooks": {
+      "types": "./dist/esm/types/src/hooks/index.d.ts",
+      "import": "./dist/esm/hooks/index.js",
+      "default": "./dist/esm/hooks/index.js"
+    },
     "./src/*": "./src/*",
     "./vite-standalone-dev": {
       "types": "./dist/standalone/vite-sybilion-standalone-dev.d.ts",

package/src/components/widgets/SignInPage/SignInPage.tsx

@@ -45,7 +45,8 @@ export function SignInPage({
   logoSize,
   containerClassName,
 }: SignInPageProps) {
-  const { error, loginWithRedirect, isLoading } = useSybilionAuth();
+  const { error, loginWithRedirect, isLoading, isAuthenticated } =
+    useSybilionAuth();
 
   const handleSignIn = () =>
     loginWithRedirect({
@@ -69,7 +70,7 @@ export function SignInPage({
     >
       <SybilionSignInPanel
         onSignIn={handleSignIn}
-        isSigningIn={isLoading}
+        isSigningIn={isLoading && !isAuthenticated}
         error={error}
         forgotPasswordTo={forgotPasswordTo}
         releasesTo={releasesTo}

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export { useIsMobile } from './useIsMobile';

package/src/index.ts

@@ -1,3 +1,4 @@
+export { useIsMobile } from './hooks/useIsMobile';
 export * from './contexts/theme-context';
 export { DEFAULT_THEME_ACTIVE_COLOR } from './docs/lib/theme';
 export * from './sybilion-auth';

package/src/sybilion-auth/SybilionAuthProvider.tsx

@@ -3,7 +3,6 @@ import {
   type RedirectLoginOptions,
   useAuth0,
 } from '@auth0/auth0-react';
-import type { LoginTokenResponse, SybilionSDK } from '@sybilion/sdk';
 import type { JSX, ReactNode } from 'react';
 import {
   createContext,
@@ -16,6 +15,7 @@ import {
 } from 'react';
 
 import { normalizeApiBaseUrl } from '#uilib/sybilion-auth/authPaths';
+import type { LoginTokenResponse, SybilionSDK } from '@sybilion/sdk';
 
 const DEFAULT_TOKEN_KEY = 'sybilion.standalone.jwt';
 
@@ -138,6 +138,15 @@ export function useSybilionApiFetch(): (
   );
 }
 
+function readTokenFromLs(key: string): string | null {
+  if (typeof localStorage === 'undefined') return null;
+  try {
+    return localStorage.getItem(key);
+  } catch {
+    return null;
+  }
+}
+
 function writeLs(key: string, value: string | null): void {
   if (typeof localStorage === 'undefined') return;
   try {
@@ -165,7 +174,9 @@ function InnerSybilionSession({
   const auth0Ref = useRef(auth0);
   auth0Ref.current = auth0;
 
-  const [sybilionToken, setSybilionToken] = useState<string | null>(null);
+  const [sybilionToken, setSybilionToken] = useState<string | null>(() =>
+    typeof window === 'undefined' ? null : readTokenFromLs(storageKey),
+  );
   const [exchangeLoading, setExchangeLoading] = useState(false);
   const [exchangeError, setExchangeError] = useState<string | null>(null);
   const [isLoggingOut, setIsLoggingOut] = useState(false);
@@ -203,10 +214,15 @@ function InnerSybilionSession({
   const apiBaseUrl = useMemo(() => getSybilionApiOriginFromSdk(sdk), [sdk]);
 
   useEffect(() => {
+    // While Auth0 restores from localStorage, `isAuthenticated` is false — do not
+    // wipe the Sybilion JWT (would break reload: sign-in flash / lost session).
+    if (auth0.isLoading) {
+      return;
+    }
     if (!auth0.isAuthenticated || !auth0.user?.sub) {
       persistToken(null);
     }
-  }, [auth0.isAuthenticated, auth0.user?.sub, persistToken]);
+  }, [auth0.isLoading, auth0.isAuthenticated, auth0.user?.sub, persistToken]);
 
   useEffect(() => {
     if (!auth0.isAuthenticated || !auth0.user?.sub) {
@@ -242,13 +258,7 @@ function InnerSybilionSession({
     return () => {
       cancelled = true;
     };
-  }, [
-    sdk,
-    auth0.isAuthenticated,
-    auth0.user?.sub,
-    persistToken,
-    doLogout,
-  ]);
+  }, [sdk, auth0.isAuthenticated, auth0.user?.sub, persistToken, doLogout]);
 
   const getAuth0AccessToken = useCallback(async () => {
     if (!auth0.isAuthenticated) return undefined;
@@ -269,17 +279,29 @@ function InnerSybilionSession({
     doLogout();
   }, [doLogout]);
 
+  const hasAuth0User = Boolean(auth0.isAuthenticated && auth0.user?.sub);
+
+  /** Auth0 session is enough for app routes; Sybilion JWT is filled by exchange. */
   const isAuthenticated = Boolean(
-    auth0.isAuthenticated && sybilionToken && !exchangeError,
+    !exchangeError &&
+    !isLoggingOut &&
+    (hasAuth0User ||
+      (Boolean(sybilionToken) && (auth0.isAuthenticated || auth0.isLoading))),
+  );
+
+  const needsFirstSybilionToken = Boolean(
+    auth0.isAuthenticated &&
+    auth0.user &&
+    sybilionToken === null &&
+    exchangeError === null &&
+    !isLoggingOut,
   );
 
+  /** Omit Auth0/exchange "busy" once we already have a Sybilion JWT — avoids header skeleton flicker on refresh. */
   const isLoading =
-    auth0.isLoading ||
-    exchangeLoading ||
-    (Boolean(auth0.isAuthenticated && auth0.user) &&
-      sybilionToken === null &&
-      exchangeError === null &&
-      !isLoggingOut);
+    (auth0.isLoading && sybilionToken === null) ||
+    (exchangeLoading && sybilionToken === null) ||
+    needsFirstSybilionToken;
 
   const value = useMemo(
     (): SybilionAuthContextValue => ({