@every-app/sdk 0.0.5 → 0.0.7

package/dist/client/EmbeddedAppProvider.d.ts

@@ -0,0 +1,30 @@
+import React from "react";
+import { SessionManagerConfig } from "./session-manager";
+interface EmbeddedProviderConfig extends SessionManagerConfig {
+    children: React.ReactNode;
+}
+export declare function EmbeddedAppProvider({ children, ...config }: EmbeddedProviderConfig): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Hook to get the current authenticated user.
+ * Returns the user's ID and email extracted from the JWT token,
+ * or null if not authenticated.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const user = useCurrentUser();
+ *
+ *   if (!user) {
+ *     return <div>Not authenticated</div>;
+ *   }
+ *
+ *   return <div>Welcome, {user.email}</div>;
+ * }
+ * ```
+ */
+export declare function useCurrentUser(): {
+    userId: string;
+    email: string;
+} | null;
+export {};
+//# sourceMappingURL=EmbeddedAppProvider.d.ts.map

package/dist/client/EmbeddedAppProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmbeddedAppProvider.d.ts","sourceRoot":"","sources":["../../src/client/EmbeddedAppProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAClE,OAAO,EAAkB,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAKzE,UAAU,sBAAuB,SAAQ,oBAAoB;IAC3D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAUD,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,GAAG,MAAM,EACV,EAAE,sBAAsB,kDA6BxB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,cAAc,IAAI;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAmBzE"}

package/dist/client/EmbeddedAppProvider.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from "react";
+import { useEveryAppSession } from "./_internal/useEveryAppSession";
+import { useEveryAppRouter } from "./_internal/useEveryAppRouter";
+import { GatewayRequiredError } from "./GatewayRequiredError";
+const EmbeddedAppContext = createContext(null);
+export function EmbeddedAppProvider({ children, ...config }) {
+    const { sessionManager, sessionTokenState } = useEveryAppSession({
+        sessionManagerConfig: config,
+    });
+    useEveryAppRouter({ sessionManager });
+    if (!sessionManager)
+        return null;
+    // Check if the app is running outside of the Gateway iframe
+    if (!sessionManager.isInIframe) {
+        return (_jsx(GatewayRequiredError, { gatewayOrigin: sessionManager.parentOrigin, appId: config.appId }));
+    }
+    const value = {
+        sessionManager,
+        isAuthenticated: sessionTokenState.status === "VALID",
+        sessionTokenState,
+    };
+    return (_jsx(EmbeddedAppContext.Provider, { value: value, children: children }));
+}
+/**
+ * Hook to get the current authenticated user.
+ * Returns the user's ID and email extracted from the JWT token,
+ * or null if not authenticated.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const user = useCurrentUser();
+ *
+ *   if (!user) {
+ *     return <div>Not authenticated</div>;
+ *   }
+ *
+ *   return <div>Welcome, {user.email}</div>;
+ * }
+ * ```
+ */
+export function useCurrentUser() {
+    const context = useContext(EmbeddedAppContext);
+    if (!context) {
+        throw new Error("useCurrentUser must be used within an EmbeddedAppProvider");
+    }
+    const { sessionManager, sessionTokenState } = context;
+    return useMemo(() => {
+        // Only return user if we have a valid token
+        if (sessionTokenState.status !== "VALID") {
+            return null;
+        }
+        return sessionManager.getUser();
+    }, [sessionManager, sessionTokenState]);
+}

package/dist/client/GatewayRequiredError.d.ts

@@ -0,0 +1,20 @@
+interface GatewayRequiredErrorProps {
+    /**
+     * The origin of the Gateway (e.g., "https://gateway.example.com").
+     */
+    gatewayOrigin: string;
+    /**
+     * The app ID used in the Gateway URL path.
+     */
+    appId: string;
+}
+/**
+ * Error component displayed when an embedded app is accessed directly
+ * instead of through the Every App Gateway.
+ *
+ * This component informs users that authentication requires accessing
+ * the app through the Gateway and provides a link to do so.
+ */
+export declare function GatewayRequiredError({ gatewayOrigin, appId, }: GatewayRequiredErrorProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=GatewayRequiredError.d.ts.map

package/dist/client/GatewayRequiredError.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GatewayRequiredError.d.ts","sourceRoot":"","sources":["../../src/client/GatewayRequiredError.tsx"],"names":[],"mappings":"AAEA,UAAU,yBAAyB;IACjC;;OAEG;IACH,aAAa,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAwFD;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,aAAa,EACb,KAAK,GACN,EAAE,yBAAyB,2CAmD3B"}

package/dist/client/GatewayRequiredError.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Button gradient styles
+const BUTTON_GRADIENT = "linear-gradient(180deg, #424242 0%, #353535 50%, #2a2a2a 100%)";
+const BUTTON_GRADIENT_HOVER = "linear-gradient(180deg, #4d4d4d 0%, #404040 50%, #353535 100%)";
+// CSS custom properties for theming
+const CSS_VARIABLES = `
+  @media (prefers-color-scheme: light) {
+    :root {
+      --gateway-bg: oklch(100% 0 0);
+      --gateway-text: oklch(0% 0 0);
+      --gateway-text-muted: oklch(40% 0 0);
+      --gateway-icon-bg: oklch(94% 0 0);
+      --gateway-icon-stroke: oklch(55% 0.22 25);
+      --gateway-border: oklch(94% 0 0);
+    }
+  }
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --gateway-bg: #0a0f0d;
+      --gateway-text: oklch(92% 0 0);
+      --gateway-text-muted: oklch(60% 0 0);
+      --gateway-icon-bg: oklch(22% 0 0);
+      --gateway-icon-stroke: oklch(65% 0.2 25);
+      --gateway-border: oklch(30% 0 0);
+    }
+  }
+`;
+const styles = {
+    container: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        minHeight: "100vh",
+        padding: "24px",
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
+        backgroundColor: "var(--gateway-bg, oklch(100% 0 0))",
+        color: "var(--gateway-text, oklch(0% 0 0))",
+        colorScheme: "light dark",
+    },
+    content: {
+        maxWidth: "380px",
+        width: "100%",
+        textAlign: "left",
+    },
+    iconContainer: {
+        width: "44px",
+        height: "44px",
+        marginBottom: "16px",
+        borderRadius: "0.25rem",
+        backgroundColor: "var(--gateway-icon-bg, oklch(94% 0 0))",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        border: "1px solid var(--gateway-border, oklch(94% 0 0))",
+    },
+    title: {
+        fontSize: "18px",
+        fontWeight: 600,
+        marginBottom: "8px",
+        color: "var(--gateway-text, oklch(0% 0 0))",
+        letterSpacing: "-0.01em",
+    },
+    description: {
+        fontSize: "14px",
+        lineHeight: 1.5,
+        color: "var(--gateway-text-muted, oklch(40% 0 0))",
+        marginBottom: "20px",
+    },
+    button: {
+        display: "inline-block",
+        padding: "10px 20px",
+        fontSize: "14px",
+        fontWeight: 500,
+        color: "#ffffff",
+        background: BUTTON_GRADIENT,
+        borderRadius: "0.25rem",
+        textDecoration: "none",
+        border: "none",
+    },
+};
+/**
+ * Error component displayed when an embedded app is accessed directly
+ * instead of through the Every App Gateway.
+ *
+ * This component informs users that authentication requires accessing
+ * the app through the Gateway and provides a link to do so.
+ */
+export function GatewayRequiredError({ gatewayOrigin, appId, }) {
+    const displayName = appId || "This app";
+    const gatewayUrl = `${gatewayOrigin}/apps/${appId}${window.location.pathname}`;
+    return (_jsxs("div", { style: styles.container, children: [_jsx("style", { children: CSS_VARIABLES }), _jsxs("div", { style: styles.content, children: [_jsx("div", { style: styles.iconContainer, children: _jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "var(--gateway-icon-stroke, oklch(55% 0.22 25))", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }), _jsx("line", { x1: "12", y1: "9", x2: "12", y2: "13" }), _jsx("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })] }) }), _jsx("h1", { style: styles.title, children: "Gateway Required" }), _jsxs("p", { style: styles.description, children: [displayName, " needs to be accessed through the Gateway for authentication to work properly."] }), _jsx("a", { href: gatewayUrl, style: styles.button, onMouseOver: (e) => {
+                            e.currentTarget.style.background = BUTTON_GRADIENT_HOVER;
+                        }, onMouseOut: (e) => {
+                            e.currentTarget.style.background = BUTTON_GRADIENT;
+                        }, children: "Open in Gateway" })] })] }));
+}

package/dist/client/_internal/useEveryAppRouter.d.ts

@@ -0,0 +1,7 @@
+import { SessionManager } from "../session-manager";
+interface UseEveryAppRouterParams {
+    sessionManager: SessionManager | null;
+}
+export declare function useEveryAppRouter({ sessionManager }: UseEveryAppRouterParams): void;
+export {};
+//# sourceMappingURL=useEveryAppRouter.d.ts.map

package/dist/client/_internal/useEveryAppRouter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEveryAppRouter.d.ts","sourceRoot":"","sources":["../../../src/client/_internal/useEveryAppRouter.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAGpD,UAAU,uBAAuB;IAC/B,cAAc,EAAE,cAAc,GAAG,IAAI,CAAC;CACvC;AACD,wBAAgB,iBAAiB,CAAC,EAAE,cAAc,EAAE,EAAE,uBAAuB,QAmE5E"}

package/dist/client/_internal/useEveryAppRouter.js

@@ -0,0 +1,57 @@
+import { useEffect } from "react";
+import { useRouter } from "@tanstack/react-router";
+export function useEveryAppRouter({ sessionManager }) {
+    const router = useRouter();
+    // Route synchronization effect
+    useEffect(() => {
+        if (!sessionManager)
+            return;
+        // Listen for route sync messages from parent
+        const handleMessage = (event) => {
+            if (event.origin !== sessionManager.parentOrigin)
+                return;
+            if (event.data.type === "ROUTE_CHANGE" &&
+                event.data.direction === "parent-to-child") {
+                const targetRoute = event.data.route;
+                const currentRoute = window.location.pathname;
+                // Only navigate if the route is different from current location
+                if (targetRoute && targetRoute !== currentRoute) {
+                    router.navigate({ to: targetRoute });
+                }
+            }
+        };
+        window.addEventListener("message", handleMessage);
+        // Simplified route change detection with 2 reliable methods
+        let lastReportedPath = window.location.pathname;
+        const handleRouteChange = () => {
+            const currentPath = window.location.pathname;
+            // Only report if the path actually changed
+            if (currentPath === lastReportedPath) {
+                return;
+            }
+            lastReportedPath = currentPath;
+            if (window.parent !== window) {
+                window.parent.postMessage({
+                    type: "ROUTE_CHANGE",
+                    route: currentPath,
+                    appId: sessionManager.appId,
+                    direction: "child-to-parent",
+                }, sessionManager.parentOrigin);
+            }
+        };
+        // Listen to popstate for browser back/forward
+        window.addEventListener("popstate", handleRouteChange);
+        // Polling to detect route changes (catches router navigation)
+        const pollInterval = setInterval(() => {
+            const currentPath = window.location.pathname;
+            if (currentPath !== lastReportedPath) {
+                handleRouteChange();
+            }
+        }, 100);
+        return () => {
+            window.removeEventListener("message", handleMessage);
+            window.removeEventListener("popstate", handleRouteChange);
+            clearInterval(pollInterval);
+        };
+    }, [sessionManager]);
+}

package/dist/client/_internal/useEveryAppSession.d.ts

@@ -0,0 +1,13 @@
+import { SessionManager, SessionManagerConfig } from "../session-manager";
+interface UseEveryAppSessionParams {
+    sessionManagerConfig: SessionManagerConfig;
+}
+export declare function useEveryAppSession({ sessionManagerConfig, }: UseEveryAppSessionParams): {
+    sessionManager: SessionManager | null;
+    sessionTokenState: {
+        status: "NO_TOKEN" | "VALID" | "EXPIRED" | "REFRESHING";
+        token: string | null;
+    };
+};
+export {};
+//# sourceMappingURL=useEveryAppSession.d.ts.map

package/dist/client/_internal/useEveryAppSession.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEveryAppSession.d.ts","sourceRoot":"","sources":["../../../src/client/_internal/useEveryAppSession.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAE1E,UAAU,wBAAwB;IAChC,oBAAoB,EAAE,oBAAoB,CAAC;CAC5C;AAED,wBAAgB,kBAAkB,CAAC,EACjC,oBAAoB,GACrB,EAAE,wBAAwB;;;;;;EAyC1B"}

package/dist/client/_internal/useEveryAppSession.js

@@ -0,0 +1,36 @@
+import { useEffect, useRef, useState } from "react";
+import { SessionManager } from "../session-manager";
+export function useEveryAppSession({ sessionManagerConfig, }) {
+    const sessionManagerRef = useRef(null);
+    const [sessionTokenState, setSessionTokenState] = useState({
+        status: "NO_TOKEN",
+        token: null,
+    });
+    if (!sessionManagerRef.current && typeof document !== "undefined") {
+        sessionManagerRef.current = new SessionManager(sessionManagerConfig);
+    }
+    const sessionManager = sessionManagerRef.current;
+    useEffect(() => {
+        if (!sessionManager)
+            return;
+        // Skip token requests when not in iframe - the app will show GatewayRequiredError instead
+        if (!sessionManager.isInIframe)
+            return;
+        const interval = setInterval(() => {
+            setSessionTokenState(sessionManager.getTokenState());
+        }, 5000);
+        sessionManager.getToken().catch((err) => {
+            console.error("[EmbeddedProvider] Initial token request failed:", err);
+        });
+        return () => {
+            clearInterval(interval);
+        };
+    }, [sessionManager]);
+    useEffect(() => {
+        if (!sessionManager)
+            return;
+        // Make sessionManager globally accessible for middleware
+        window.__embeddedSessionManager = sessionManager;
+    }, [sessionManager]);
+    return { sessionManager, sessionTokenState };
+}

package/dist/client/authenticatedFetch.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Gets the current session token from the embedded session manager
+ */
+export declare function getSessionToken(): Promise<string>;
+/**
+ * Performs a fetch request with the authorization header automatically added
+ */
+export declare function authenticatedFetch(input: RequestInfo | URL, init?: RequestInit): Promise<Response>;
+//# sourceMappingURL=authenticatedFetch.d.ts.map

package/dist/client/authenticatedFetch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"authenticatedFetch.d.ts","sourceRoot":"","sources":["../../src/client/authenticatedFetch.ts"],"names":[],"mappings":"AAQA;;GAEG;AACH,wBAAsB,eAAe,IAAI,OAAO,CAAC,MAAM,CAAC,CAevD;AAED;;GAEG;AACH,wBAAsB,kBAAkB,CACtC,KAAK,EAAE,WAAW,GAAG,GAAG,EACxB,IAAI,CAAC,EAAE,WAAW,GACjB,OAAO,CAAC,QAAQ,CAAC,CAUnB"}

package/dist/client/authenticatedFetch.js

@@ -0,0 +1,27 @@
+/**
+ * Gets the current session token from the embedded session manager
+ */
+export async function getSessionToken() {
+    const windowWithSession = window;
+    const sessionManager = windowWithSession.__embeddedSessionManager;
+    if (!sessionManager) {
+        throw new Error("Session manager not available");
+    }
+    const token = await sessionManager.getToken();
+    if (!token) {
+        throw new Error("No token available");
+    }
+    return token;
+}
+/**
+ * Performs a fetch request with the authorization header automatically added
+ */
+export async function authenticatedFetch(input, init) {
+    const token = await getSessionToken();
+    const headers = new Headers(init?.headers);
+    headers.set("Authorization", `Bearer ${token}`);
+    return fetch(input, {
+        ...init,
+        headers,
+    });
+}

package/dist/client/index.d.ts

@@ -0,0 +1,8 @@
+export { SessionManager, isRunningInIframe } from "./session-manager";
+export type { SessionManagerConfig } from "./session-manager";
+export { useSessionTokenClientMiddleware } from "./useSessionTokenClientMiddleware";
+export { EmbeddedAppProvider, useCurrentUser } from "./EmbeddedAppProvider";
+export { GatewayRequiredError } from "./GatewayRequiredError";
+export { lazyInitForWorkers } from "./lazyInitForWorkers";
+export { authenticatedFetch, getSessionToken } from "./authenticatedFetch";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/client/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtE,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,+BAA+B,EAAE,MAAM,mCAAmC,CAAC;AAEpF,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAC5E,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAE9D,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE1D,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/client/index.js

@@ -0,0 +1,6 @@
+export { SessionManager, isRunningInIframe } from "./session-manager";
+export { useSessionTokenClientMiddleware } from "./useSessionTokenClientMiddleware";
+export { EmbeddedAppProvider, useCurrentUser } from "./EmbeddedAppProvider";
+export { GatewayRequiredError } from "./GatewayRequiredError";
+export { lazyInitForWorkers } from "./lazyInitForWorkers";
+export { authenticatedFetch, getSessionToken } from "./authenticatedFetch";

package/dist/client/lazyInitForWorkers.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Wraps a factory function in a Proxy to defer initialization until first access.
+ * This prevents async operations (Like creating Tanstack DB Collections) from running in Cloudflare Workers' global scope.
+ *
+ * @param factory - A function that creates and returns the resource.
+ *                  Must be a callback to defer execution; passing the value directly
+ *                  would evaluate it at module load time, triggering the Cloudflare error.
+ * @returns A Proxy that lazily initializes the resource on first property access
+ *
+ * @example
+ * ```ts
+ * export const myCollection = lazyInitForWorkers(() =>
+ *   createCollection(queryCollectionOptions({
+ *     queryKey: ["myData"],
+ *     queryFn: async () => fetchData(),
+ *     // ... other options
+ *   }))
+ * );
+ * ```
+ */
+export declare function lazyInitForWorkers<T extends object>(factory: () => T): T;
+//# sourceMappingURL=lazyInitForWorkers.d.ts.map

package/dist/client/lazyInitForWorkers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lazyInitForWorkers.d.ts","sourceRoot":"","sources":["../../src/client/lazyInitForWorkers.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,GAAG,CAAC,CA8CxE"}

package/dist/client/lazyInitForWorkers.js

@@ -0,0 +1,65 @@
+/**
+ * Wraps a factory function in a Proxy to defer initialization until first access.
+ * This prevents async operations (Like creating Tanstack DB Collections) from running in Cloudflare Workers' global scope.
+ *
+ * @param factory - A function that creates and returns the resource.
+ *                  Must be a callback to defer execution; passing the value directly
+ *                  would evaluate it at module load time, triggering the Cloudflare error.
+ * @returns A Proxy that lazily initializes the resource on first property access
+ *
+ * @example
+ * ```ts
+ * export const myCollection = lazyInitForWorkers(() =>
+ *   createCollection(queryCollectionOptions({
+ *     queryKey: ["myData"],
+ *     queryFn: async () => fetchData(),
+ *     // ... other options
+ *   }))
+ * );
+ * ```
+ */
+export function lazyInitForWorkers(factory) {
+    // Closure: This variable is captured by getInstance() and the Proxy traps below.
+    // It remains in memory as long as the returned Proxy is referenced, enabling singleton behavior.
+    let instance = null;
+    function getInstance() {
+        if (!instance) {
+            instance = factory();
+        }
+        return instance;
+    }
+    return new Proxy({}, {
+        get(_, prop) {
+            const inst = getInstance();
+            const value = inst[prop];
+            // Bind methods to the instance to preserve `this` context
+            return typeof value === "function" ? value.bind(inst) : value;
+        },
+        set(_, prop, value) {
+            const inst = getInstance();
+            inst[prop] = value;
+            return true;
+        },
+        deleteProperty(_, prop) {
+            const inst = getInstance();
+            delete inst[prop];
+            return true;
+        },
+        has(_, prop) {
+            const inst = getInstance();
+            return prop in inst;
+        },
+        ownKeys(_) {
+            const inst = getInstance();
+            return Reflect.ownKeys(inst);
+        },
+        getOwnPropertyDescriptor(_, prop) {
+            const inst = getInstance();
+            return Reflect.getOwnPropertyDescriptor(inst, prop);
+        },
+        getPrototypeOf(_) {
+            const inst = getInstance();
+            return Reflect.getPrototypeOf(inst);
+        },
+    });
+}

package/dist/client/session-manager.d.ts

@@ -0,0 +1,33 @@
+export interface SessionManagerConfig {
+    appId: string;
+}
+/**
+ * Detects whether the current window is running inside an iframe.
+ * Returns true if in an iframe, false if running as top-level window.
+ */
+export declare function isRunningInIframe(): boolean;
+export declare class SessionManager {
+    readonly parentOrigin: string;
+    readonly appId: string;
+    readonly isInIframe: boolean;
+    private token;
+    private refreshPromise;
+    constructor(config: SessionManagerConfig);
+    private isTokenExpiringSoon;
+    private postMessageWithResponse;
+    requestNewToken(): Promise<string>;
+    getToken(): Promise<string>;
+    getTokenState(): {
+        status: "NO_TOKEN" | "VALID" | "EXPIRED" | "REFRESHING";
+        token: string | null;
+    };
+    /**
+     * Extracts user information from the current JWT token.
+     * Returns null if no valid token is available.
+     */
+    getUser(): {
+        userId: string;
+        email: string;
+    } | null;
+}
+//# sourceMappingURL=session-manager.d.ts.map

package/dist/client/session-manager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"session-manager.d.ts","sourceRoot":"","sources":["../../src/client/session-manager.ts"],"names":[],"mappings":"AAWA,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAC;CACf;AAMD;;;GAGG;AACH,wBAAgB,iBAAiB,IAAI,OAAO,CAQ3C;AAED,qBAAa,cAAc;IACzB,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAE7B,OAAO,CAAC,KAAK,CAA6B;IAC1C,OAAO,CAAC,cAAc,CAAgC;gBAE1C,MAAM,EAAE,oBAAoB;IAqBxC,OAAO,CAAC,mBAAmB;IAO3B,OAAO,CAAC,uBAAuB;IAuCzB,eAAe,IAAI,OAAO,CAAC,MAAM,CAAC;IA8ClC,QAAQ,IAAI,OAAO,CAAC,MAAM,CAAC;IAOjC,aAAa,IAAI;QACf,MAAM,EAAE,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,YAAY,CAAC;QACxD,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;KACtB;IAgBD;;;OAGG;IACH,OAAO,IAAI;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI;CAwBpD"}

package/dist/client/session-manager.js

@@ -0,0 +1,158 @@
+const MESSAGE_TIMEOUT_MS = 5000;
+const TOKEN_EXPIRY_BUFFER_MS = 10000;
+const DEFAULT_TOKEN_LIFETIME_MS = 60000;
+/**
+ * Detects whether the current window is running inside an iframe.
+ * Returns true if in an iframe, false if running as top-level window.
+ */
+export function isRunningInIframe() {
+    try {
+        return window.self !== window.top;
+    }
+    catch {
+        // If we can't access window.top due to cross-origin restrictions,
+        // we're definitely in an iframe
+        return true;
+    }
+}
+export class SessionManager {
+    parentOrigin;
+    appId;
+    isInIframe;
+    token = null;
+    refreshPromise = null;
+    constructor(config) {
+        if (!config.appId) {
+            throw new Error("[SessionManager] appId is required.");
+        }
+        const gatewayUrl = import.meta.env.VITE_GATEWAY_URL;
+        if (!gatewayUrl) {
+            throw new Error("[SessionManager] VITE_GATEWAY_URL env var is required.");
+        }
+        try {
+            new URL(gatewayUrl);
+        }
+        catch {
+            throw new Error(`[SessionManager] Invalid gateway URL: ${gatewayUrl}`);
+        }
+        this.appId = config.appId;
+        this.parentOrigin = gatewayUrl;
+        this.isInIframe = isRunningInIframe();
+    }
+    isTokenExpiringSoon(bufferMs = TOKEN_EXPIRY_BUFFER_MS) {
+        if (!this.token)
+            return true;
+        return Date.now() >= this.token.expiresAt - bufferMs;
+    }
+    postMessageWithResponse(request, responseType, requestId) {
+        return new Promise((resolve, reject) => {
+            const cleanup = () => {
+                clearTimeout(timeout);
+                window.removeEventListener("message", handler);
+            };
+            const handler = (event) => {
+                // Security: reject messages from wrong origin (including null from sandboxed iframes)
+                if (event.origin !== this.parentOrigin)
+                    return;
+                // Safety: ignore malformed messages that could crash the handler
+                if (!event.data || typeof event.data !== "object")
+                    return;
+                if (event.data.type === responseType &&
+                    event.data.requestId === requestId) {
+                    cleanup();
+                    if (event.data.error) {
+                        reject(new Error(event.data.error));
+                    }
+                    else {
+                        resolve(event.data);
+                    }
+                }
+            };
+            const timeout = setTimeout(() => {
+                cleanup();
+                reject(new Error("Token request timeout - parent did not respond"));
+            }, MESSAGE_TIMEOUT_MS);
+            window.addEventListener("message", handler);
+            window.parent.postMessage(request, this.parentOrigin);
+        });
+    }
+    async requestNewToken() {
+        if (this.refreshPromise) {
+            return this.refreshPromise;
+        }
+        this.refreshPromise = (async () => {
+            const requestId = crypto.randomUUID();
+            const response = await this.postMessageWithResponse({
+                type: "SESSION_TOKEN_REQUEST",
+                requestId,
+                appId: this.appId,
+            }, "SESSION_TOKEN_RESPONSE", requestId);
+            if (!response.token) {
+                throw new Error("No token in response");
+            }
+            // Parse expiresAt, falling back to default lifetime if invalid
+            let expiresAt = Date.now() + DEFAULT_TOKEN_LIFETIME_MS;
+            if (response.expiresAt) {
+                const parsed = new Date(response.expiresAt).getTime();
+                if (!Number.isNaN(parsed)) {
+                    expiresAt = parsed;
+                }
+            }
+            this.token = {
+                token: response.token,
+                expiresAt,
+            };
+            return this.token.token;
+        })();
+        try {
+            return await this.refreshPromise;
+        }
+        finally {
+            this.refreshPromise = null;
+        }
+    }
+    async getToken() {
+        if (this.isTokenExpiringSoon()) {
+            return this.requestNewToken();
+        }
+        return this.token.token;
+    }
+    getTokenState() {
+        if (this.refreshPromise) {
+            return { status: "REFRESHING", token: null };
+        }
+        if (!this.token) {
+            return { status: "NO_TOKEN", token: null };
+        }
+        if (this.isTokenExpiringSoon(0)) {
+            return { status: "EXPIRED", token: this.token.token };
+        }
+        return { status: "VALID", token: this.token.token };
+    }
+    /**
+     * Extracts user information from the current JWT token.
+     * Returns null if no valid token is available.
+     */
+    getUser() {
+        if (!this.token) {
+            return null;
+        }
+        try {
+            const parts = this.token.token.split(".");
+            if (parts.length !== 3) {
+                return null;
+            }
+            const payload = JSON.parse(atob(parts[1]));
+            if (!payload.sub) {
+                return null;
+            }
+            return {
+                userId: payload.sub,
+                email: payload.email ?? "",
+            };
+        }
+        catch {
+            return null;
+        }
+    }
+}

package/dist/client/useSessionTokenClientMiddleware.d.ts

@@ -0,0 +1,2 @@
+export declare const useSessionTokenClientMiddleware: import("@tanstack/react-start").FunctionMiddlewareAfterClient<{}, unknown, undefined, undefined, undefined>;
+//# sourceMappingURL=useSessionTokenClientMiddleware.d.ts.map

package/dist/client/useSessionTokenClientMiddleware.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSessionTokenClientMiddleware.d.ts","sourceRoot":"","sources":["../../src/client/useSessionTokenClientMiddleware.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,+BAA+B,6GA2B1C,CAAC"}

package/dist/client/useSessionTokenClientMiddleware.js

@@ -0,0 +1,21 @@
+import { createMiddleware } from "@tanstack/react-start";
+export const useSessionTokenClientMiddleware = createMiddleware({
+    type: "function",
+}).client(async ({ next }) => {
+    // Get the global sessionManager - this MUST be available for embedded apps
+    const sessionManager = window
+        .__embeddedSessionManager;
+    if (!sessionManager) {
+        throw new Error("[AuthMiddleware] SessionManager not available - embedded provider not initialized");
+    }
+    // INVARIANT: This is just an extra check and should never be the case if the sessionManager exists.
+    if (typeof sessionManager.getToken !== "function") {
+        throw new Error("[AuthMiddleware] SessionManager.getToken is not a function");
+    }
+    const token = await sessionManager.getToken();
+    return next({
+        headers: {
+            Authorization: `Bearer ${token}`,
+        },
+    });
+});

package/dist/server/auth-config.d.ts

@@ -0,0 +1,3 @@
+import type { AuthConfig } from "./types";
+export declare function getAuthConfig(): AuthConfig;
+//# sourceMappingURL=auth-config.d.ts.map

package/dist/server/auth-config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"auth-config.d.ts","sourceRoot":"","sources":["../../src/server/auth-config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAG1C,wBAAgB,aAAa,IAAI,UAAU,CAK1C"}

package/dist/server/auth-config.js

@@ -0,0 +1,7 @@
+import { env } from "cloudflare:workers";
+export function getAuthConfig() {
+    return {
+        issuer: env.GATEWAY_URL,
+        audience: import.meta.env.VITE_APP_ID,
+    };
+}

package/dist/server/authenticateRequest.d.ts

@@ -0,0 +1,21 @@
+import type { AuthConfig } from "./types";
+interface SessionTokenPayload {
+    sub: string;
+    iss: string;
+    aud: string;
+    exp: number;
+    iat: number;
+    appId?: string;
+    permissions?: string[];
+    email?: string;
+}
+export declare function authenticateRequest(authConfig: AuthConfig, providedRequest?: Request): Promise<SessionTokenPayload | null>;
+/**
+ * Extracts the bearer token from an Authorization header.
+ *
+ * @param authHeader - The Authorization header value (e.g., "Bearer eyJ...")
+ * @returns The token string if valid, null otherwise
+ */
+export declare function extractBearerToken(authHeader: string | null): string | null;
+export {};
+//# sourceMappingURL=authenticateRequest.d.ts.map

package/dist/server/authenticateRequest.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"authenticateRequest.d.ts","sourceRoot":"","sources":["../../src/server/authenticateRequest.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAG1C,UAAU,mBAAmB;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAsB,mBAAmB,CACvC,UAAU,EAAE,UAAU,EACtB,eAAe,CAAC,EAAE,OAAO,GACxB,OAAO,CAAC,mBAAmB,GAAG,IAAI,CAAC,CA+BrC;AAyCD;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,CAK3E"}

package/dist/server/authenticateRequest.js

@@ -0,0 +1,67 @@
+import { getRequest } from "@tanstack/react-start/server";
+import { createLocalJWKSet, jwtVerify, } from "jose";
+import { env } from "cloudflare:workers";
+export async function authenticateRequest(authConfig, providedRequest) {
+    const request = providedRequest || getRequest();
+    const authHeader = request.headers.get("authorization");
+    if (!authHeader) {
+        console.log("No auth header found");
+        return null;
+    }
+    const token = extractBearerToken(authHeader);
+    if (!token) {
+        return null;
+    }
+    try {
+        const session = await verifySessionToken(token, authConfig);
+        return session;
+    }
+    catch (error) {
+        console.error(JSON.stringify({
+            message: "Error verifying session token",
+            error: error instanceof Error ? error.message : String(error),
+            stack: error instanceof Error ? error.stack : undefined,
+            errorType: error instanceof Error ? error.constructor.name : "Unknown",
+            issuer: authConfig.issuer,
+            audience: authConfig.audience,
+        }));
+        return null;
+    }
+}
+async function verifySessionToken(token, config) {
+    const { issuer, audience } = config;
+    if (!issuer) {
+        throw new Error("Issuer must be provided for token verification");
+    }
+    if (!audience) {
+        throw new Error("Audience must be provided for token verification");
+    }
+    // Fetch JWKS - use service binding in production, direct fetch in development
+    const jwksResponse = import.meta.env.PROD && env.EVERY_APP_GATEWAY
+        ? await env.EVERY_APP_GATEWAY.fetch("http://localhost/api/embedded/jwks")
+        : await fetch(`${env.GATEWAY_URL}/api/embedded/jwks`);
+    if (!jwksResponse.ok) {
+        throw new Error(`Failed to fetch JWKS: ${jwksResponse.status} ${jwksResponse.statusText}`);
+    }
+    const jwks = (await jwksResponse.json());
+    const localJWKS = createLocalJWKSet(jwks);
+    const options = {
+        issuer,
+        audience,
+        algorithms: ["RS256"],
+    };
+    const { payload } = await jwtVerify(token, localJWKS, options);
+    return payload;
+}
+/**
+ * Extracts the bearer token from an Authorization header.
+ *
+ * @param authHeader - The Authorization header value (e.g., "Bearer eyJ...")
+ * @returns The token string if valid, null otherwise
+ */
+export function extractBearerToken(authHeader) {
+    if (!authHeader || !authHeader.startsWith("Bearer ")) {
+        return null;
+    }
+    return authHeader.substring(7);
+}

package/dist/server/getLocalD1Url.d.ts

@@ -0,0 +1,2 @@
+export declare function getLocalD1Url(): string | null;
+//# sourceMappingURL=getLocalD1Url.d.ts.map

package/dist/server/getLocalD1Url.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getLocalD1Url.d.ts","sourceRoot":"","sources":["../../src/server/getLocalD1Url.ts"],"names":[],"mappings":"AAWA,wBAAgB,aAAa,kBAoD5B"}

package/dist/server/getLocalD1Url.js

@@ -0,0 +1,40 @@
+import fs from "fs";
+import path from "path";
+import { execSync } from "child_process";
+import { parse } from "jsonc-parser";
+function findSqliteFile(basePath) {
+    return fs
+        .readdirSync(basePath, { encoding: "utf-8", recursive: true })
+        .find((f) => f.endsWith(".sqlite"));
+}
+export function getLocalD1Url() {
+    const basePath = path.resolve(".wrangler");
+    // Check if .wrangler directory exists
+    if (!fs.existsSync(basePath)) {
+        console.error("================================================================================");
+        console.error("WARNING: .wrangler directory not found");
+        console.error("This is expected in CI/non-development environments.");
+        console.error("The local D1 database is only available after running 'wrangler dev' which you can trigger by running 'npm run dev'.");
+        console.error("================================================================================");
+        return null;
+    }
+    let dbFile = findSqliteFile(basePath);
+    if (!dbFile) {
+        // Read wrangler.jsonc to get the database name
+        const wranglerConfigPath = path.resolve("wrangler.jsonc");
+        const wranglerConfig = parse(fs.readFileSync(wranglerConfigPath, "utf-8"));
+        const databaseName = wranglerConfig.d1_databases?.[0]?.database_name;
+        if (!databaseName) {
+            throw new Error("Could not find database_name in wrangler.jsonc d1_databases configuration");
+        }
+        // Execute the command to initialize the local database
+        console.log(`Initializing local D1 database: ${databaseName}...`);
+        execSync(`npx wrangler d1 execute ${databaseName} --local --command "SELECT 1;"`, { stdio: "pipe" });
+        // Try to find the db file again after initialization
+        dbFile = findSqliteFile(basePath);
+        if (!dbFile) {
+            throw new Error(`Failed to initialize local D1 database. The sqlite file was not created.`);
+        }
+    }
+    return path.resolve(basePath, dbFile);
+}

package/dist/server/index.d.ts

@@ -0,0 +1,4 @@
+export { authenticateRequest } from "./authenticateRequest";
+export type { AuthConfig } from "./types";
+export { getAuthConfig } from "./auth-config";
+//# sourceMappingURL=index.d.ts.map

package/dist/server/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/server/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC"}

package/dist/server/index.js

@@ -0,0 +1,2 @@
+export { authenticateRequest } from "./authenticateRequest";
+export { getAuthConfig } from "./auth-config";

package/dist/server/types.d.ts

@@ -0,0 +1,5 @@
+export interface AuthConfig {
+    issuer: string;
+    audience: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/server/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/server/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;CAClB"}

package/dist/server/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,21 +1,33 @@
 {
   "name": "@every-app/sdk",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "type": "module",
-  "main": "./src/client/index.ts",
+  "main": "./dist/client/index.js",
+  "types": "./dist/client/index.d.ts",
   "exports": {
-    "./client": "./src/client/index.ts",
-    "./server": "./src/server/index.ts",
-    "./server/getLocalD1Url": "./src/server/getLocalD1Url.ts"
+    "./client": {
+      "types": "./dist/client/index.d.ts",
+      "default": "./dist/client/index.js"
+    },
+    "./server": {
+      "types": "./dist/server/index.d.ts",
+      "default": "./dist/server/index.js"
+    },
+    "./server/getLocalD1Url": {
+      "types": "./dist/server/getLocalD1Url.d.ts",
+      "default": "./dist/server/getLocalD1Url.js"
+    }
   },
   "files": [
+    "dist",
     "src"
   ],
   "scripts": {
+    "build": "tsc -p tsconfig.build.json",
     "types:check": "tsc --noEmit",
     "format:check": "prettier --check .",
     "format:write": "prettier . --write",
-    "test": "vitest run",
+    "test": "vitest run --silent",
     "test:watch": "vitest"
   },
   "dependencies": {

package/src/client/EmbeddedAppProvider.tsx

@@ -2,6 +2,7 @@ import React, { createContext, useContext, useMemo } from "react";
 import { SessionManager, SessionManagerConfig } from "./session-manager";
 import { useEveryAppSession } from "./_internal/useEveryAppSession";
 import { useEveryAppRouter } from "./_internal/useEveryAppRouter";
+import { GatewayRequiredError } from "./GatewayRequiredError";
 
 interface EmbeddedProviderConfig extends SessionManagerConfig {
   children: React.ReactNode;
@@ -26,6 +27,16 @@ export function EmbeddedAppProvider({
 
   if (!sessionManager) return null;
 
+  // Check if the app is running outside of the Gateway iframe
+  if (!sessionManager.isInIframe) {
+    return (
+      <GatewayRequiredError
+        gatewayOrigin={sessionManager.parentOrigin}
+        appId={config.appId}
+      />
+    );
+  }
+
   const value: EmbeddedAppContextValue = {
     sessionManager,
     isAuthenticated: sessionTokenState.status === "VALID",

package/src/client/GatewayRequiredError.tsx

@@ -0,0 +1,161 @@
+import { CSSProperties } from "react";
+
+interface GatewayRequiredErrorProps {
+  /**
+   * The origin of the Gateway (e.g., "https://gateway.example.com").
+   */
+  gatewayOrigin: string;
+  /**
+   * The app ID used in the Gateway URL path.
+   */
+  appId: string;
+}
+
+// Button gradient styles
+const BUTTON_GRADIENT =
+  "linear-gradient(180deg, #424242 0%, #353535 50%, #2a2a2a 100%)";
+const BUTTON_GRADIENT_HOVER =
+  "linear-gradient(180deg, #4d4d4d 0%, #404040 50%, #353535 100%)";
+
+// CSS custom properties for theming
+const CSS_VARIABLES = `
+  @media (prefers-color-scheme: light) {
+    :root {
+      --gateway-bg: oklch(100% 0 0);
+      --gateway-text: oklch(0% 0 0);
+      --gateway-text-muted: oklch(40% 0 0);
+      --gateway-icon-bg: oklch(94% 0 0);
+      --gateway-icon-stroke: oklch(55% 0.22 25);
+      --gateway-border: oklch(94% 0 0);
+    }
+  }
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --gateway-bg: #0a0f0d;
+      --gateway-text: oklch(92% 0 0);
+      --gateway-text-muted: oklch(60% 0 0);
+      --gateway-icon-bg: oklch(22% 0 0);
+      --gateway-icon-stroke: oklch(65% 0.2 25);
+      --gateway-border: oklch(30% 0 0);
+    }
+  }
+`;
+
+const styles = {
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    minHeight: "100vh",
+    padding: "24px",
+    fontFamily:
+      '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
+    backgroundColor: "var(--gateway-bg, oklch(100% 0 0))",
+    color: "var(--gateway-text, oklch(0% 0 0))",
+    colorScheme: "light dark",
+  } satisfies CSSProperties,
+  content: {
+    maxWidth: "380px",
+    width: "100%",
+    textAlign: "left",
+  } satisfies CSSProperties,
+  iconContainer: {
+    width: "44px",
+    height: "44px",
+    marginBottom: "16px",
+    borderRadius: "0.25rem",
+    backgroundColor: "var(--gateway-icon-bg, oklch(94% 0 0))",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    border: "1px solid var(--gateway-border, oklch(94% 0 0))",
+  } satisfies CSSProperties,
+  title: {
+    fontSize: "18px",
+    fontWeight: 600,
+    marginBottom: "8px",
+    color: "var(--gateway-text, oklch(0% 0 0))",
+    letterSpacing: "-0.01em",
+  } satisfies CSSProperties,
+  description: {
+    fontSize: "14px",
+    lineHeight: 1.5,
+    color: "var(--gateway-text-muted, oklch(40% 0 0))",
+    marginBottom: "20px",
+  } satisfies CSSProperties,
+  button: {
+    display: "inline-block",
+    padding: "10px 20px",
+    fontSize: "14px",
+    fontWeight: 500,
+    color: "#ffffff",
+    background: BUTTON_GRADIENT,
+    borderRadius: "0.25rem",
+    textDecoration: "none",
+    border: "none",
+  } satisfies CSSProperties,
+};
+
+/**
+ * Error component displayed when an embedded app is accessed directly
+ * instead of through the Every App Gateway.
+ *
+ * This component informs users that authentication requires accessing
+ * the app through the Gateway and provides a link to do so.
+ */
+export function GatewayRequiredError({
+  gatewayOrigin,
+  appId,
+}: GatewayRequiredErrorProps) {
+  const displayName = appId || "This app";
+  const gatewayUrl = `${gatewayOrigin}/apps/${appId}${window.location.pathname}`;
+
+  return (
+    <div style={styles.container}>
+      <style>{CSS_VARIABLES}</style>
+      <div style={styles.content}>
+        {/* Warning Icon */}
+        <div style={styles.iconContainer}>
+          <svg
+            width="22"
+            height="22"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="var(--gateway-icon-stroke, oklch(55% 0.22 25))"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
+            <line x1="12" y1="9" x2="12" y2="13" />
+            <line x1="12" y1="17" x2="12.01" y2="17" />
+          </svg>
+        </div>
+
+        {/* Title */}
+        <h1 style={styles.title}>Gateway Required</h1>
+
+        {/* Description */}
+        <p style={styles.description}>
+          {displayName} needs to be accessed through the Gateway for
+          authentication to work properly.
+        </p>
+
+        {/* Redirect Link/Button - Metallic style */}
+        <a
+          href={gatewayUrl}
+          style={styles.button}
+          onMouseOver={(e) => {
+            e.currentTarget.style.background = BUTTON_GRADIENT_HOVER;
+          }}
+          onMouseOut={(e) => {
+            e.currentTarget.style.background = BUTTON_GRADIENT;
+          }}
+        >
+          Open in Gateway
+        </a>
+      </div>
+    </div>
+  );
+}

package/src/client/_internal/useEveryAppSession.tsx

@@ -24,6 +24,9 @@ export function useEveryAppSession({
 
   useEffect(() => {
     if (!sessionManager) return;
+    // Skip token requests when not in iframe - the app will show GatewayRequiredError instead
+    if (!sessionManager.isInIframe) return;
+
     const interval = setInterval(() => {
       setSessionTokenState(sessionManager.getTokenState());
     }, 5000);

package/src/client/index.ts

@@ -1,8 +1,9 @@
-export { SessionManager } from "./session-manager";
+export { SessionManager, isRunningInIframe } from "./session-manager";
 export type { SessionManagerConfig } from "./session-manager";
 export { useSessionTokenClientMiddleware } from "./useSessionTokenClientMiddleware";
 
 export { EmbeddedAppProvider, useCurrentUser } from "./EmbeddedAppProvider";
+export { GatewayRequiredError } from "./GatewayRequiredError";
 
 export { lazyInitForWorkers } from "./lazyInitForWorkers";
 

package/src/client/session-manager.ts

@@ -17,9 +17,24 @@ const MESSAGE_TIMEOUT_MS = 5000;
 const TOKEN_EXPIRY_BUFFER_MS = 10000;
 const DEFAULT_TOKEN_LIFETIME_MS = 60000;
 
+/**
+ * Detects whether the current window is running inside an iframe.
+ * Returns true if in an iframe, false if running as top-level window.
+ */
+export function isRunningInIframe(): boolean {
+  try {
+    return window.self !== window.top;
+  } catch {
+    // If we can't access window.top due to cross-origin restrictions,
+    // we're definitely in an iframe
+    return true;
+  }
+}
+
 export class SessionManager {
   readonly parentOrigin: string;
   readonly appId: string;
+  readonly isInIframe: boolean;
 
   private token: SessionToken | null = null;
   private refreshPromise: Promise<string> | null = null;
@@ -42,6 +57,7 @@ export class SessionManager {
 
     this.appId = config.appId;
     this.parentOrigin = gatewayUrl;
+    this.isInIframe = isRunningInIframe();
   }
 
   private isTokenExpiringSoon(