@nsxbet/admin-sdk 0.7.0 → 0.8.0

package/dist/auth/client/in-memory.js

@@ -5,6 +5,7 @@
  * Users can be selected from a predefined list or created custom.
  */
 import { fetchGatewayToken } from './gateway-token';
+import { env } from '../../env';
 export { GatewayTimeoutError, GatewayFetchError } from './gateway-token';
 /**
  * Create mock users from a role configuration
@@ -71,10 +72,9 @@ const DEFAULT_STORAGE_KEY = '@nsxbet/auth';
 export function createInMemoryAuthClient(options) {
     const { users, storageKey = DEFAULT_STORAGE_KEY, tokenTimeout = 5000 } = options;
     const predefinedUsers = users;
-    // Resolve gatewayUrl: explicit option → env var → null (disabled)
     const resolvedGatewayUrl = options.gatewayUrl !== undefined
         ? options.gatewayUrl ?? null
-        : (typeof import.meta !== 'undefined' && import.meta.env?.VITE_ADMIN_GATEWAY_URL) || null;
+        : (env.adminGatewayUrl ?? null);
     // State
     let selectedUser = null;
     let tokenCache = null;

package/dist/auth/client/index.d.ts

@@ -3,4 +3,4 @@
  */
 export type { AuthClient, InMemoryAuthClient, MockUser, AuthState, AuthStateCallback, } from './interface';
 export { createInMemoryAuthClient, clearInMemoryAuth, createMockUsersFromRoles, type InMemoryAuthClientOptions, type MockUserRoles, } from './in-memory';
-export { createKeycloakAuthClient, type KeycloakAuthClientOptions, } from './keycloak';
+export { createBffAuthClient, clearLoggedOutFlag, isLoggedOutFlag, setLoggedOutFlag, type BffAuthClient, type BffAuthClientOptions, type BffMeResponse, } from './bff';

package/dist/auth/client/index.js

@@ -3,5 +3,5 @@
  */
 // In-memory client
 export { createInMemoryAuthClient, clearInMemoryAuth, createMockUsersFromRoles, } from './in-memory';
-// Keycloak client
-export { createKeycloakAuthClient, } from './keycloak';
+// BFF / Okta cookie auth
+export { createBffAuthClient, clearLoggedOutFlag, isLoggedOutFlag, setLoggedOutFlag, } from './bff';

package/dist/auth/client/interface.d.ts

@@ -2,7 +2,7 @@
  * Auth Client Interface
  *
  * Defines the interface for authentication operations.
- * Can be implemented by in-memory (mock) or Keycloak clients.
+ * Can be implemented by in-memory (mock) or BFF cookie auth.
  */
 import type { User } from '../../types/platform';
 /**
@@ -54,7 +54,7 @@ export interface AuthClient {
     /**
      * Client type identifier
      */
-    readonly type: 'in-memory' | 'keycloak';
+    readonly type: 'in-memory' | 'bff';
     /**
      * Initialize the auth client
      * @returns true if user is authenticated, false if login/selection is needed
@@ -69,9 +69,9 @@ export interface AuthClient {
      */
     getUser(): User | null;
     /**
-     * Get access token for API calls
+     * Get access token for API calls. BFF cookie auth returns `null` (HttpOnly cookie — use credentialed fetch).
      */
-    getAccessToken(): Promise<string>;
+    getAccessToken(): Promise<string | null>;
     /**
      * Check if user has a specific permission/role
      */

package/dist/auth/client/interface.js

@@ -2,6 +2,6 @@
  * Auth Client Interface
  *
  * Defines the interface for authentication operations.
- * Can be implemented by in-memory (mock) or Keycloak clients.
+ * Can be implemented by in-memory (mock) or BFF cookie auth.
  */
 export {};

package/dist/auth/client/private-network-guidance.d.ts

@@ -0,0 +1,2 @@
+export declare function isLovableContext(): boolean;
+export declare function logPrivateNetworkGuidance(previewUrl: string): void;

package/dist/auth/client/private-network-guidance.js

@@ -0,0 +1,38 @@
+const LOVABLE_DOMAINS = [".lovableproject.com", ".lovable.app"];
+export function isLovableContext() {
+    try {
+        const { hostname } = window.location;
+        return LOVABLE_DOMAINS.some((domain) => hostname.endsWith(domain));
+    }
+    catch {
+        return false;
+    }
+}
+export function logPrivateNetworkGuidance(previewUrl) {
+    try {
+        const flagsUrl = "chrome://flags/#block-insecure-private-network-requests";
+        console.groupCollapsed("%c⚠️ Private Network Access — Lovable Preview", "color: #f59e0b; font-weight: bold; font-size: 14px");
+        console.warn([
+            "Chrome is blocking requests from this Lovable iframe to your local/private network API.",
+            "The gateway token fetch failed because the browser's Private Network Access policy",
+            "prevents public origins from reaching private IPs without explicit permission.",
+            "",
+            "━━━ Option 1 (Recommended) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━",
+            `Open this preview URL directly in a new tab:`,
+            `  👉 ${previewUrl}`,
+            "",
+            "This takes the page out of the iframe so Chrome can show the local network",
+            "access permission prompt.",
+            "",
+            "━━━ Option 2 (Alternative) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━",
+            "Disable the Chrome flag (less secure, but works globally):",
+            `  🔧 ${flagsUrl}`,
+            "",
+            'Set "Block insecure private network requests" to Disabled, then relaunch Chrome.',
+        ].join("\n"));
+        console.groupEnd();
+    }
+    catch {
+        // best-effort — never throw from guidance logging
+    }
+}

package/dist/auth/components/LoginPage.d.ts

@@ -0,0 +1,8 @@
+/**
+ * BFF login landing — explicit user action starts OAuth (avoids IdP silent re-login after logout).
+ */
+export interface LoginPageProps {
+    /** Base URL of admin-bff (no trailing slash). */
+    bffBaseUrl: string;
+}
+export declare function LoginPage({ bffBaseUrl }: LoginPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/auth/components/LoginPage.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * BFF login landing — explicit user action starts OAuth (avoids IdP silent re-login after logout).
+ */
+import { useState, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ShieldCheck, LogIn, Check, Globe } from 'lucide-react';
+import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from '@nsxbet/admin-ui';
+import { clearLoggedOutFlag } from '../client/bff';
+import { SUPPORTED_LOCALES, DEFAULT_LOCALE, LOCALE_FLAGS, LOCALE_NAMES, saveLocale, } from '../../i18n/config';
+function normalizeBaseUrl(url) {
+    return url.replace(/\/+$/, '');
+}
+function NsxLogo() {
+    return (_jsx("div", { className: "inline-flex items-center justify-center w-[72px] h-[72px] rounded-2xl bg-primary text-primary-foreground shadow-lg shadow-primary/25", children: _jsx("span", { className: "text-2xl font-bold tracking-tighter select-none", "aria-hidden": true, children: "NSX" }) }));
+}
+export function LoginPage({ bffBaseUrl }) {
+    const base = normalizeBaseUrl(bffBaseUrl);
+    const { t, i18n } = useTranslation('shell');
+    const [locale, setLocale] = useState(i18n.language || DEFAULT_LOCALE);
+    const handleLocaleChange = useCallback((newLocale) => {
+        setLocale(newLocale);
+        i18n.changeLanguage(newLocale);
+        saveLocale(newLocale);
+    }, [i18n]);
+    const handleLogin = () => {
+        clearLoggedOutFlag();
+        const redirect = encodeURIComponent(window.location.origin);
+        window.location.assign(`${base}/auth/login?redirect_url=${redirect}`);
+    };
+    return (_jsxs("div", { className: "min-h-screen bg-muted/40 text-foreground flex flex-col", children: [_jsx("div", { className: "flex items-center justify-end px-4 py-3", children: _jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { className: "flex items-center gap-1.5 rounded-md border border-border bg-background px-2.5 py-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground focus:outline-none", "data-testid": "login-language-selector", children: [_jsx(Globe, { className: "h-4 w-4" }), _jsx("span", { children: LOCALE_FLAGS[locale] })] }), _jsx(DropdownMenuContent, { align: "end", className: "z-[101] min-w-[180px]", children: SUPPORTED_LOCALES.map((opt) => (_jsxs(DropdownMenuItem, { onClick: () => handleLocaleChange(opt), className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center", children: [_jsx("span", { className: "mr-2 text-lg", children: LOCALE_FLAGS[opt] }), _jsx("span", { children: LOCALE_NAMES[opt] })] }), locale === opt && _jsx(Check, { className: "h-4 w-4 text-primary" })] }, opt))) })] }) }), _jsx("div", { className: "flex flex-1 items-center justify-center px-4 pb-14", children: _jsxs("div", { className: "w-full max-w-[420px] flex flex-col items-center text-center gap-8", children: [_jsx(NsxLogo, {}), _jsxs("div", { className: "space-y-1.5", children: [_jsxs("h1", { className: "text-2xl font-semibold tracking-tight", children: [t('loginPage.welcomeTo'), ' ', _jsx("span", { className: "text-primary", children: t('loginPage.brandName') })] }), _jsx("p", { className: "text-muted-foreground text-[15px]", children: t('loginPage.subtitle') })] }), _jsxs("div", { className: "w-full flex flex-col gap-3", children: [_jsxs(Button, { type: "button", size: "lg", className: "w-full h-12 text-[15px] gap-2.5 font-medium", onClick: handleLogin, children: [_jsx(LogIn, { className: "h-[18px] w-[18px]", "aria-hidden": true }), t('loginPage.loginButton')] }), _jsxs("div", { className: "w-full flex items-center justify-center gap-2 rounded-lg border border-border bg-background py-2.5 px-4 text-sm text-muted-foreground", children: [_jsx(ShieldCheck, { className: "h-4 w-4 text-muted-foreground/70 shrink-0", "aria-hidden": true }), t('loginPage.secureAuth')] })] })] }) })] }));
+}

package/dist/auth/components/UserSelector.d.ts

@@ -11,6 +11,35 @@ interface UserSelectorProps {
     /** Callback when user is selected */
     onUserSelected?: () => void;
 }
+/**
+ * Loading screen shown while fetching a BFF token.
+ */
+export declare function LoginLoadingScreen({ userName }: {
+    userName: string;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Error screen shown when the gateway returns an error or is unreachable.
+ */
+export declare function LoginErrorScreen({ errorMessage, gatewayUrl, isLovable, onRetry, onFallback, onBack, retrying, }: {
+    errorMessage: string;
+    gatewayUrl: string | null;
+    isLovable: boolean;
+    onRetry: () => void;
+    onFallback: () => void;
+    onBack: () => void;
+    retrying: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Timeout screen shown when the gateway doesn't respond in time.
+ */
+export declare function LoginTimeoutScreen({ gatewayUrl, isLovable, onRetry, onFallback, onBack, retrying, }: {
+    gatewayUrl: string | null;
+    isLovable: boolean;
+    onRetry: () => void;
+    onFallback: () => void;
+    onBack: () => void;
+    retrying: boolean;
+}): import("react/jsx-runtime").JSX.Element;
 /**
  * Main User Selector Component
  */

package/dist/auth/components/UserSelector.js

@@ -6,8 +6,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Uses Brasa Design System tokens for consistent styling.
  */
 import { useState } from 'react';
-import { Crown, Ban, Eye, User, Users, Sparkles, Wrench, Trash2, Plus, ChevronRight, Loader2, AlertCircle, Clock, ArrowLeft, RefreshCw, ShieldAlert, } from '@nsxbet/admin-ui';
+import { Crown, Ban, Eye, User, Users, Sparkles, Wrench, Trash2, Plus, ChevronRight, Loader2, AlertCircle, Clock, ArrowLeft, RefreshCw, ShieldAlert, Info, Copy, Check, ChevronDown, } from '@nsxbet/admin-ui';
+import { ExternalLink } from 'lucide-react';
 import { GatewayTimeoutError } from '../client/in-memory';
+import { isLovableContext, logPrivateNetworkGuidance } from '../client/private-network-guidance';
 /**
  * Get user icon based on roles
  */
@@ -65,7 +67,7 @@ function UserCard({ user, isCustom, onClick, onDelete, }) {
             onDelete();
         }
     };
-    return (_jsxs("div", { className: "relative group", children: [_jsx("button", { onClick: onClick, className: "w-full p-4 rounded-xl border border-border bg-card hover:bg-muted/50 hover:border-muted-foreground/30 transition-all duration-200 text-left", children: _jsxs("div", { className: "flex items-start gap-4", children: [_jsx("div", { className: "flex-shrink-0", children: icon }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("h3", { className: "font-semibold text-foreground group-hover:text-foreground transition-colors", children: user.displayName }), isCustom && (_jsx("span", { className: "text-xs px-1.5 py-0.5 rounded bg-primary/20 text-primary border border-primary/30", children: "custom" }))] }), _jsx("p", { className: "text-sm text-muted-foreground truncate", children: user.email }), _jsxs("div", { className: "flex flex-wrap gap-1.5 mt-2", children: [user.roles.length === 0 ? (_jsx("span", { className: "text-xs px-2 py-0.5 rounded-full border bg-destructive/20 text-destructive border-destructive/30", children: "no roles" })) : (user.roles.slice(0, 4).map((role) => (_jsx("span", { className: `text-xs px-2 py-0.5 rounded-full border ${getRoleBadgeColor(role)}`, children: role }, role)))), user.roles.length > 4 && (_jsxs("span", { className: "text-xs px-2 py-0.5 rounded-full border bg-muted text-muted-foreground border-border", children: ["+", user.roles.length - 4, " more"] }))] })] }), _jsx("div", { className: "text-muted-foreground group-hover:text-foreground transition-colors", children: _jsx(ChevronRight, { className: "h-5 w-5" }) })] }) }), isCustom && onDelete && (_jsx("button", { onClick: handleDelete, className: "absolute top-2 right-2 p-1.5 rounded-lg bg-destructive/10 text-destructive opacity-0 group-hover:opacity-100 hover:bg-destructive/20 transition-all", title: "Delete user", children: _jsx(Trash2, { className: "h-4 w-4" }) }))] }));
+    return (_jsxs("div", { className: "relative group", children: [_jsx("button", { type: "button", "data-testid": `user-${user.id}`, onClick: onClick, className: "w-full p-4 rounded-xl border border-border bg-card hover:bg-muted/50 hover:border-muted-foreground/30 transition-all duration-200 text-left", children: _jsxs("div", { className: "flex items-start gap-4", children: [_jsx("div", { className: "flex-shrink-0", children: icon }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("h3", { className: "font-semibold text-foreground group-hover:text-foreground transition-colors", children: user.displayName }), isCustom && (_jsx("span", { className: "text-xs px-1.5 py-0.5 rounded bg-primary/20 text-primary border border-primary/30", children: "custom" }))] }), _jsx("p", { className: "text-sm text-muted-foreground truncate", children: user.email }), _jsxs("div", { className: "flex flex-wrap gap-1.5 mt-2", children: [user.roles.length === 0 ? (_jsx("span", { className: "text-xs px-2 py-0.5 rounded-full border bg-destructive/20 text-destructive border-destructive/30", children: "no roles" })) : (user.roles.slice(0, 4).map((role) => (_jsx("span", { className: `text-xs px-2 py-0.5 rounded-full border ${getRoleBadgeColor(role)}`, children: role }, role)))), user.roles.length > 4 && (_jsxs("span", { className: "text-xs px-2 py-0.5 rounded-full border bg-muted text-muted-foreground border-border", children: ["+", user.roles.length - 4, " more"] }))] })] }), _jsx("div", { className: "text-muted-foreground group-hover:text-foreground transition-colors", children: _jsx(ChevronRight, { className: "h-5 w-5" }) })] }) }), isCustom && onDelete && (_jsx("button", { onClick: handleDelete, className: "absolute top-2 right-2 p-1.5 rounded-lg bg-destructive/10 text-destructive opacity-0 group-hover:opacity-100 hover:bg-destructive/20 transition-all", title: "Delete user", children: _jsx(Trash2, { className: "h-4 w-4" }) }))] }));
 }
 /**
  * Custom User Form Component
@@ -88,9 +90,31 @@ function CustomUserForm({ onSubmit, onCancel, }) {
 /**
  * Loading screen shown while fetching a BFF token.
  */
-function LoginLoadingScreen({ userName }) {
+export function LoginLoadingScreen({ userName }) {
     return (_jsx("div", { className: "min-h-screen bg-background flex items-center justify-center p-4", children: _jsxs("div", { className: "w-full max-w-md text-center", children: [_jsx("div", { className: "inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-primary/10 mb-6", children: _jsx(Loader2, { className: "h-8 w-8 text-primary animate-spin" }) }), _jsx("h2", { className: "text-xl font-semibold text-foreground mb-2", children: "Authenticating\u2026" }), _jsxs("p", { className: "text-muted-foreground", children: ["Fetching token for ", _jsx("span", { className: "font-medium text-foreground", children: userName })] })] }) }));
 }
+/**
+ * Guidance shown on error/timeout screens when running inside a Lovable preview iframe.
+ * Explains why Chrome's Private Network Access policy blocks the gateway request
+ * and offers two resolution paths.
+ */
+function LovableNetworkGuidance() {
+    const [showAlternative, setShowAlternative] = useState(false);
+    const [copied, setCopied] = useState(false);
+    const previewUrl = typeof window !== "undefined" ? window.location.href : "";
+    const flagsUrl = "chrome://flags/#block-insecure-private-network-requests";
+    const handleCopy = async () => {
+        try {
+            await navigator.clipboard.writeText(flagsUrl);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        }
+        catch {
+            // clipboard API may not be available in all contexts
+        }
+    };
+    return (_jsx("div", { "data-testid": "lovable-network-guidance", className: "w-full mt-4 rounded-xl border border-info/30 bg-info/5 p-4 text-left", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx(Info, { className: "h-5 w-5 text-info flex-shrink-0 mt-0.5" }), _jsxs("div", { className: "flex-1 space-y-3", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold text-foreground", children: "Lovable Preview \u2014 Private Network Access" }), _jsx("p", { className: "text-sm text-muted-foreground mt-1", children: "Chrome blocks requests from Lovable's iframe to local/private network APIs. Open this preview directly in a new tab to grant permission." })] }), _jsxs("a", { href: previewUrl, target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-info text-info-foreground font-medium text-sm hover:bg-info/90 transition-colors", children: [_jsx(ExternalLink, { className: "h-4 w-4" }), "Open preview directly"] }), _jsxs("div", { children: [_jsxs("button", { onClick: () => setShowAlternative(!showAlternative), className: "flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors", children: [_jsx(ChevronDown, { className: `h-3.5 w-3.5 transition-transform ${showAlternative ? "rotate-180" : ""}` }), "Alternative: disable Chrome flag"] }), showAlternative && (_jsxs("div", { className: "mt-2 space-y-2", children: [_jsx("p", { className: "text-xs text-muted-foreground", children: "Disable the Private Network Access check in Chrome flags (less secure, but works globally):" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("code", { className: "flex-1 text-xs px-3 py-1.5 rounded-md bg-muted text-foreground font-mono break-all", children: flagsUrl }), _jsx("button", { onClick: handleCopy, className: "flex-shrink-0 p-1.5 rounded-md hover:bg-muted transition-colors", title: "Copy to clipboard", children: copied ? (_jsx(Check, { className: "h-3.5 w-3.5 text-success" })) : (_jsx(Copy, { className: "h-3.5 w-3.5 text-muted-foreground" })) })] }), _jsxs("p", { className: "text-xs text-muted-foreground/70", children: ["Set \u201CBlock insecure private network requests\u201D to ", _jsx("strong", { children: "Disabled" }), ", then relaunch Chrome."] })] }))] })] })] }) }));
+}
 /**
  * Shared action bar for error / timeout screens.
  */
@@ -100,14 +124,14 @@ function LoginRecoveryActions({ onRetry, onFallback, onBack, retrying, }) {
 /**
  * Error screen shown when the gateway returns an error or is unreachable.
  */
-function LoginErrorScreen({ errorMessage, gatewayUrl, onRetry, onFallback, onBack, retrying, }) {
-    return (_jsx("div", { className: "min-h-screen bg-background flex items-center justify-center p-4", children: _jsxs("div", { className: "w-full max-w-md flex flex-col items-center text-center", children: [_jsx("div", { className: "inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-destructive/10 mb-6", children: _jsx(AlertCircle, { className: "h-8 w-8 text-destructive" }) }), _jsx("h2", { className: "text-xl font-semibold text-foreground mb-2", children: "Authentication Failed" }), _jsx("p", { className: "text-muted-foreground mb-1", children: errorMessage }), gatewayUrl && (_jsx("p", { className: "text-xs text-muted-foreground/70 font-mono break-all", children: gatewayUrl })), _jsx(LoginRecoveryActions, { onRetry: onRetry, onFallback: onFallback, onBack: onBack, retrying: retrying })] }) }));
+export function LoginErrorScreen({ errorMessage, gatewayUrl, isLovable, onRetry, onFallback, onBack, retrying, }) {
+    return (_jsx("div", { className: "min-h-screen bg-background flex items-center justify-center p-4", children: _jsxs("div", { className: "w-full max-w-md flex flex-col items-center text-center", children: [_jsx("div", { className: "inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-destructive/10 mb-6", children: _jsx(AlertCircle, { className: "h-8 w-8 text-destructive" }) }), _jsx("h2", { className: "text-xl font-semibold text-foreground mb-2", children: "Authentication Failed" }), _jsx("p", { className: "text-muted-foreground mb-1", children: errorMessage }), gatewayUrl && (_jsx("p", { className: "text-xs text-muted-foreground/70 font-mono break-all", children: gatewayUrl })), isLovable && _jsx(LovableNetworkGuidance, {}), _jsx(LoginRecoveryActions, { onRetry: onRetry, onFallback: onFallback, onBack: onBack, retrying: retrying })] }) }));
 }
 /**
  * Timeout screen shown when the gateway doesn't respond in time.
  */
-function LoginTimeoutScreen({ gatewayUrl, onRetry, onFallback, onBack, retrying, }) {
-    return (_jsx("div", { className: "min-h-screen bg-background flex items-center justify-center p-4", children: _jsxs("div", { className: "w-full max-w-md flex flex-col items-center text-center", children: [_jsx("div", { className: "inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-amber-500/10 mb-6", children: _jsx(Clock, { className: "h-8 w-8 text-amber-500" }) }), _jsx("h2", { className: "text-xl font-semibold text-foreground mb-2", children: "Gateway Timeout" }), _jsx("p", { className: "text-muted-foreground mb-1", children: "The gateway did not respond in time." }), gatewayUrl && (_jsx("p", { className: "text-xs text-muted-foreground/70 font-mono break-all", children: gatewayUrl })), _jsx(LoginRecoveryActions, { onRetry: onRetry, onFallback: onFallback, onBack: onBack, retrying: retrying })] }) }));
+export function LoginTimeoutScreen({ gatewayUrl, isLovable, onRetry, onFallback, onBack, retrying, }) {
+    return (_jsx("div", { className: "min-h-screen bg-background flex items-center justify-center p-4", children: _jsxs("div", { className: "w-full max-w-md flex flex-col items-center text-center", children: [_jsx("div", { className: "inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-amber-500/10 mb-6", children: _jsx(Clock, { className: "h-8 w-8 text-amber-500" }) }), _jsx("h2", { className: "text-xl font-semibold text-foreground mb-2", children: "Gateway Timeout" }), _jsx("p", { className: "text-muted-foreground mb-1", children: "The gateway did not respond in time." }), gatewayUrl && (_jsx("p", { className: "text-xs text-muted-foreground/70 font-mono break-all", children: gatewayUrl })), isLovable && _jsx(LovableNetworkGuidance, {}), _jsx(LoginRecoveryActions, { onRetry: onRetry, onFallback: onFallback, onBack: onBack, retrying: retrying })] }) }));
 }
 /**
  * Main User Selector Component
@@ -117,6 +141,7 @@ export function UserSelector({ authClient, onUserSelected }) {
     const [loginState, setLoginState] = useState({ status: 'idle' });
     const [, forceUpdate] = useState(0);
     const users = authClient.getAvailableUsers();
+    const isLovable = isLovableContext();
     const findUserName = (userId) => users.find((u) => u.id === userId)?.displayName ?? userId;
     const handleSelectUser = async (userId) => {
         if (!authClient.gatewayUrl) {
@@ -130,6 +155,9 @@ export function UserSelector({ authClient, onUserSelected }) {
             onUserSelected?.();
         }
         catch (error) {
+            if (isLovable) {
+                logPrivateNetworkGuidance(window.location.href);
+            }
             if (error instanceof GatewayTimeoutError) {
                 setLoginState({ status: 'timeout', userId });
             }
@@ -181,12 +209,12 @@ export function UserSelector({ authClient, onUserSelected }) {
         return _jsx(LoginLoadingScreen, { userName: findUserName(loginState.userId) });
     }
     if (loginState.status === 'error') {
-        return (_jsx(LoginErrorScreen, { errorMessage: loginState.error, gatewayUrl: authClient.gatewayUrl, onRetry: handleRetry, onFallback: handleFallbackToMock, onBack: handleBack, retrying: false }));
+        return (_jsx(LoginErrorScreen, { errorMessage: loginState.error, gatewayUrl: authClient.gatewayUrl, isLovable: isLovable, onRetry: handleRetry, onFallback: handleFallbackToMock, onBack: handleBack, retrying: false }));
     }
     if (loginState.status === 'timeout') {
-        return (_jsx(LoginTimeoutScreen, { gatewayUrl: authClient.gatewayUrl, onRetry: handleRetry, onFallback: handleFallbackToMock, onBack: handleBack, retrying: false }));
+        return (_jsx(LoginTimeoutScreen, { gatewayUrl: authClient.gatewayUrl, isLovable: isLovable, onRetry: handleRetry, onFallback: handleFallbackToMock, onBack: handleBack, retrying: false }));
     }
-    return (_jsx("div", { className: "min-h-screen bg-background flex items-center justify-center p-4", children: _jsxs("div", { className: "w-full max-w-md", children: [_jsxs("div", { className: "text-center mb-8", children: [_jsx("div", { className: "inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-primary mb-4 shadow-lg shadow-primary/25", children: _jsx(Users, { className: "h-8 w-8 text-primary-foreground" }) }), _jsx("h1", { className: "text-2xl font-bold text-foreground mb-2", children: "Select User" }), _jsx("p", { className: "text-muted-foreground", children: "Choose a mock user to continue in development mode" })] }), _jsx("div", { className: "space-y-3 mb-6", children: users.map((user) => {
+    return (_jsx("div", { className: "min-h-screen bg-background flex items-center justify-center p-4", "data-testid": "user-selector", children: _jsxs("div", { className: "w-full max-w-md", children: [_jsxs("div", { className: "text-center mb-8", children: [_jsx("div", { className: "inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-primary mb-4 shadow-lg shadow-primary/25", children: _jsx(Users, { className: "h-8 w-8 text-primary-foreground" }) }), _jsx("h1", { className: "text-2xl font-bold text-foreground mb-2", children: "Select User" }), _jsx("p", { className: "text-muted-foreground", children: "Choose a mock user to continue in development mode" })] }), _jsx("div", { className: "space-y-3 mb-6", children: users.map((user) => {
                         const isCustom = authClient.isCustomUser(user.id);
                         return (_jsx(UserCard, { user: user, isCustom: isCustom, onClick: () => handleSelectUser(user.id), onDelete: isCustom ? () => handleDeleteUser(user.id) : undefined }, user.id));
                     }) }), _jsxs("div", { className: "relative my-6", children: [_jsx("div", { className: "absolute inset-0 flex items-center", children: _jsx("div", { className: "w-full border-t border-border" }) }), _jsx("div", { className: "relative flex justify-center text-sm", children: _jsx("span", { className: "px-3 bg-background text-muted-foreground", children: "or" }) })] }), showCustomForm ? (_jsx(CustomUserForm, { onSubmit: handleCreateCustomUser, onCancel: () => setShowCustomForm(false) })) : (_jsxs("button", { onClick: () => setShowCustomForm(true), className: "w-full p-4 rounded-xl border border-dashed border-border text-muted-foreground hover:text-foreground hover:border-muted-foreground transition-colors flex items-center justify-center gap-2", children: [_jsx(Plus, { className: "h-5 w-5" }), "Create Custom User"] })), _jsxs("p", { className: "text-center text-xs text-muted-foreground mt-8 flex items-center justify-center gap-1", children: [_jsx(Wrench, { className: "h-3 w-3" }), "Development Mode \u2022 Data stored in localStorage"] })] }) }));

package/dist/auth/components/UserSelector.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+declare const meta: Meta;
+export default meta;
+export declare const LoginErrorDefault: StoryObj;
+export declare const LoginErrorLovable: StoryObj;
+export declare const LoginTimeoutDefault: StoryObj;
+export declare const LoginTimeoutLovable: StoryObj;
+export declare const Loading: StoryObj;
+export declare const Idle: StoryObj;

package/dist/auth/components/UserSelector.stories.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LoginErrorScreen, LoginTimeoutScreen, LoginLoadingScreen, UserSelector } from "./UserSelector";
+const noop = () => { };
+const meta = {
+    title: "Auth/UserSelector",
+    parameters: {
+        layout: "fullscreen",
+    },
+};
+export default meta;
+// ---------------------------------------------------------------------------
+// LoginErrorScreen
+// ---------------------------------------------------------------------------
+export const LoginErrorDefault = {
+    name: "LoginError — Default",
+    render: () => (_jsx(LoginErrorScreen, { errorMessage: "Failed to fetch: NetworkError when attempting to fetch resource.", gatewayUrl: "https://admin-bff-stg.nsx.dev", isLovable: false, onRetry: noop, onFallback: noop, onBack: noop, retrying: false })),
+};
+export const LoginErrorLovable = {
+    name: "LoginError — Lovable Context",
+    render: () => (_jsx(LoginErrorScreen, { errorMessage: "Failed to fetch: NetworkError when attempting to fetch resource.", gatewayUrl: "https://admin-bff-stg.nsx.dev", isLovable: true, onRetry: noop, onFallback: noop, onBack: noop, retrying: false })),
+};
+// ---------------------------------------------------------------------------
+// LoginTimeoutScreen
+// ---------------------------------------------------------------------------
+export const LoginTimeoutDefault = {
+    name: "LoginTimeout — Default",
+    render: () => (_jsx(LoginTimeoutScreen, { gatewayUrl: "https://admin-bff-stg.nsx.dev", isLovable: false, onRetry: noop, onFallback: noop, onBack: noop, retrying: false })),
+};
+export const LoginTimeoutLovable = {
+    name: "LoginTimeout — Lovable Context",
+    render: () => (_jsx(LoginTimeoutScreen, { gatewayUrl: "https://admin-bff-stg.nsx.dev", isLovable: true, onRetry: noop, onFallback: noop, onBack: noop, retrying: false })),
+};
+// ---------------------------------------------------------------------------
+// LoginLoadingScreen
+// ---------------------------------------------------------------------------
+export const Loading = {
+    name: "UserSelector — Loading",
+    render: () => _jsx(LoginLoadingScreen, { userName: "Admin User" }),
+};
+// ---------------------------------------------------------------------------
+// UserSelector — Idle (full component)
+// ---------------------------------------------------------------------------
+const mockUsers = [
+    { id: "admin", displayName: "Admin User", email: "admin@nsx.bet", roles: ["admin"] },
+    { id: "editor", displayName: "Editor User", email: "editor@nsx.bet", roles: ["admin.tasks.edit", "admin.users.view"] },
+    { id: "viewer", displayName: "Viewer User", email: "viewer@nsx.bet", roles: ["admin.tasks.view", "admin.users.view"] },
+    { id: "no-access", displayName: "No Access", email: "noaccess@nsx.bet", roles: [] },
+];
+function createStoryClient() {
+    return {
+        type: "in-memory",
+        gatewayUrl: null,
+        getAvailableUsers: () => mockUsers,
+        isCustomUser: () => false,
+        login: async () => { },
+        logout: async () => { },
+        initialize: async () => false,
+        isAuthenticated: () => false,
+        hasPermission: () => false,
+        getUser: () => null,
+        getAccessToken: async () => "mock-token",
+        subscribe: () => () => { },
+        createCustomUser: async (user) => ({ id: "custom", ...user }),
+        deleteCustomUser: () => false,
+    };
+}
+export const Idle = {
+    name: "UserSelector — Idle",
+    render: () => _jsx(UserSelector, { authClient: createStoryClient() }),
+};

package/dist/auth/components/index.d.ts

@@ -2,3 +2,5 @@
  * Auth components exports
  */
 export { UserSelector } from './UserSelector';
+export { LoginPage } from './LoginPage';
+export type { LoginPageProps } from './LoginPage';

package/dist/auth/components/index.js

@@ -2,3 +2,4 @@
  * Auth components exports
  */
 export { UserSelector } from './UserSelector';
+export { LoginPage } from './LoginPage';

package/dist/auth/index.d.ts

@@ -2,5 +2,6 @@
  * Authentication module exports
  */
 export type { AuthClient, InMemoryAuthClient, MockUser, AuthState, AuthStateCallback, } from './client';
-export { createInMemoryAuthClient, clearInMemoryAuth, createMockUsersFromRoles, createKeycloakAuthClient, type InMemoryAuthClientOptions, type MockUserRoles, type KeycloakAuthClientOptions, } from './client';
-export { UserSelector } from './components';
+export { createInMemoryAuthClient, clearInMemoryAuth, createMockUsersFromRoles, createBffAuthClient, clearLoggedOutFlag, isLoggedOutFlag, setLoggedOutFlag, type InMemoryAuthClientOptions, type MockUserRoles, type BffAuthClient, type BffAuthClientOptions, type BffMeResponse, } from './client';
+export { UserSelector, LoginPage } from './components';
+export type { LoginPageProps } from './components';

package/dist/auth/index.js

@@ -2,6 +2,6 @@
  * Authentication module exports
  */
 // Auth client factories
-export { createInMemoryAuthClient, clearInMemoryAuth, createMockUsersFromRoles, createKeycloakAuthClient, } from './client';
+export { createInMemoryAuthClient, clearInMemoryAuth, createMockUsersFromRoles, createBffAuthClient, clearLoggedOutFlag, isLoggedOutFlag, setLoggedOutFlag, } from './client';
 // Auth components
-export { UserSelector } from './components';
+export { UserSelector, LoginPage } from './components';

package/dist/components/AuthProvider.d.ts

@@ -1,7 +1,7 @@
 /**
  * AuthProvider - Manages authentication state using AuthClient
  *
- * Works with both in-memory (mock) and Keycloak auth clients.
+ * Works with both in-memory (mock) and BFF cookie auth clients.
  * Shows user selection screen when in-memory client has no selected user.
  */
 import React from 'react';
@@ -15,8 +15,8 @@ interface AuthContextValue {
     isAuthenticated: boolean;
     /** Current user (null if not authenticated) */
     user: User | null;
-    /** Get access token for API calls */
-    getAccessToken: () => Promise<string>;
+    /** Get access token for API calls (null for BFF HttpOnly cookie auth) */
+    getAccessToken: () => Promise<string | null>;
     /** Check if user has a permission */
     hasPermission: (permission: string) => boolean;
     /** Log out current user */

package/dist/components/AuthProvider.js

@@ -1,12 +1,15 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * AuthProvider - Manages authentication state using AuthClient
  *
- * Works with both in-memory (mock) and Keycloak auth clients.
+ * Works with both in-memory (mock) and BFF cookie auth clients.
  * Shows user selection screen when in-memory client has no selected user.
  */
-import { createContext, useContext, useEffect, useState, useCallback } from 'react';
+import { createContext, useContext, useEffect, useState, useCallback, useMemo } from 'react';
+import { useCallbackRef } from '../hooks/useCallbackRef';
+import { isLoggedOutFlag } from '../auth/client/bff';
 import { UserSelector } from '../auth/components/UserSelector';
+import { LoginPage } from '../auth/components/LoginPage';
 const AuthContext = createContext(null);
 /**
  * Loading screen component - uses Brasa Design System tokens
@@ -22,8 +25,10 @@ export function AuthProvider({ children, authClient }) {
         isAuthenticated: false,
         user: null,
     });
-    const [isInitializing, setIsInitializing] = useState(true);
+    const bffLoggedOut = authClient.type === 'bff' && isLoggedOutFlag();
+    const [isInitializing, setIsInitializing] = useState(!bffLoggedOut);
     const [needsUserSelection, setNeedsUserSelection] = useState(false);
+    const [needsLogin, setNeedsLogin] = useState(bffLoggedOut);
     // Initialize auth client
     useEffect(() => {
         let mounted = true;
@@ -38,15 +43,22 @@ export function AuthProvider({ children, authClient }) {
                         user: authClient.getUser(),
                     });
                     setNeedsUserSelection(false);
+                    setNeedsLogin(false);
                 }
                 else if (authClient.type === 'in-memory') {
-                    // In-memory client needs user selection
                     setNeedsUserSelection(true);
+                    setNeedsLogin(false);
+                }
+                else if (authClient.type === 'bff') {
+                    setNeedsLogin(true);
+                    setNeedsUserSelection(false);
                 }
-                // Keycloak will redirect to login page, so we don't need to handle it here
             }
             catch (error) {
                 console.error('[AuthProvider] Initialization failed:', error);
+                if (authClient.type === 'bff') {
+                    setNeedsLogin(true);
+                }
             }
             finally {
                 if (mounted) {
@@ -61,9 +73,15 @@ export function AuthProvider({ children, authClient }) {
                 setAuthState(state);
                 if (!state.isAuthenticated && authClient.type === 'in-memory') {
                     setNeedsUserSelection(true);
+                    setNeedsLogin(false);
+                }
+                else if (!state.isAuthenticated && authClient.type === 'bff') {
+                    setNeedsLogin(true);
+                    setNeedsUserSelection(false);
                 }
                 else {
                     setNeedsUserSelection(false);
+                    setNeedsLogin(false);
                 }
             }
         });
@@ -80,24 +98,24 @@ export function AuthProvider({ children, authClient }) {
         });
         setNeedsUserSelection(false);
     }, [authClient]);
-    // Context value
-    const contextValue = {
+    const getAccessToken = useCallbackRef(() => authClient.getAccessToken());
+    const hasPermission = useCallbackRef((permission) => authClient.hasPermission(permission));
+    const logout = useCallbackRef(() => authClient.logout());
+    const contextValue = useMemo(() => ({
         isAuthenticated: authState.isAuthenticated,
         user: authState.user,
-        getAccessToken: () => authClient.getAccessToken(),
-        hasPermission: (permission) => authClient.hasPermission(permission),
-        logout: () => authClient.logout(),
+        getAccessToken,
+        hasPermission,
+        logout,
         authClient,
-    };
+    }), [authState.isAuthenticated, authState.user, authClient, getAccessToken, hasPermission, logout]);
     // Show loading during initialization
     if (isInitializing) {
         return _jsx(LoadingScreen, {});
     }
-    // Show user selector for in-memory auth when no user selected
-    if (needsUserSelection && authClient.type === 'in-memory') {
-        return (_jsx(UserSelector, { authClient: authClient, onUserSelected: handleUserSelected }));
-    }
-    return (_jsx(AuthContext.Provider, { value: contextValue, children: children }));
+    const bffLoginOverlay = needsLogin && authClient.type === 'bff' ? (_jsx("div", { className: "fixed inset-0 z-[100] bg-background", "data-testid": "bff-login-overlay", children: _jsx(LoginPage, { bffBaseUrl: authClient.bffBaseUrl }) })) : null;
+    const content = needsUserSelection && authClient.type === 'in-memory' ? (_jsx(UserSelector, { authClient: authClient, onUserSelected: handleUserSelected })) : (_jsxs(_Fragment, { children: [bffLoginOverlay, children] }));
+    return _jsx(AuthContext.Provider, { value: contextValue, children: content });
 }
 /**
  * Hook to access auth context

package/dist/env.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Runtime environment from `window.__ENV__` (set by `/env.js` from the shell or adminModule() dev server).
+ */
+declare global {
+    interface Window {
+        __ENV__?: Record<string, string | undefined>;
+    }
+}
+export interface EnvConfig {
+    /** Validated absolute URL, or `undefined` if missing/invalid */
+    adminGatewayUrl: string | undefined;
+    mockAuth: boolean;
+    environment: string;
+    /** Parsed from `REGISTRY_POLL_INTERVAL` in `window.__ENV__`, or `undefined` if missing/invalid */
+    registryPollInterval: number | undefined;
+}
+export declare const env: EnvConfig;