@every-app/sdk 0.0.6 → 0.0.8

package/dist/server/getLocalD1Url.js

@@ -3,51 +3,38 @@ 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"));
+    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",
-      );
+    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;
     }
-    // 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);
+    let dbFile = findSqliteFile(basePath);
     if (!dbFile) {
-      throw new Error(
-        `Failed to initialize local D1 database. The sqlite file was not created.`,
-      );
+        // 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);
+    return path.resolve(basePath, dbFile);
 }

package/dist/server/index.d.ts

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

package/dist/server/types.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@every-app/sdk",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "type": "module",
   "main": "./dist/client/index.js",
   "types": "./dist/client/index.d.ts",
@@ -27,7 +27,7 @@
     "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,162 @@
+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;
+}
+
+// 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(80% 0.18 90);
+      --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(85% 0.18 90);
+      --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,
+  link: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "8px",
+    fontSize: "14px",
+    fontWeight: 500,
+    lineHeight: "24px",
+    color: "rgb(168, 162, 158)",
+    textDecoration: "underline",
+    textDecorationColor: "rgb(87, 83, 78)",
+    textUnderlineOffset: "4px",
+    cursor: "pointer",
+    transition:
+      "color, background-color, border-color, text-decoration-color, fill, stroke 0.15s cubic-bezier(0.4, 0, 0.2, 1)",
+  } 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 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}>Open in Gateway</h1>
+
+        {/* Description */}
+        <p style={styles.description}>
+          The Gateway handles sign in and user auth. Access your app from there
+          so this works properly.
+        </p>
+
+        {/* Redirect Link */}
+        <a href={gatewayUrl} style={styles.link}>
+          Go to Gateway
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <line x1="5" y1="12" x2="19" y2="12" />
+            <polyline points="12 5 19 12 12 19" />
+          </svg>
+        </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(