@onjunctiondev/auth 0.1.3 → 0.2.1

package/dist/index.cjs

@@ -61,29 +61,80 @@ function localStorageStorage(key) {
     }
   };
 }
+function cookieStorage(key) {
+  const canUse = typeof globalThis !== "undefined" && typeof globalThis.document !== "undefined";
+  return {
+    get() {
+      if (!canUse) return null;
+      try {
+        const jar = globalThis.document.cookie;
+        if (!jar) return null;
+        const prefix = `${key}=`;
+        for (const part of jar.split("; ")) {
+          if (part.startsWith(prefix)) {
+            const value = part.slice(prefix.length);
+            if (!value) return null;
+            return JSON.parse(decodeURIComponent(value));
+          }
+        }
+        return null;
+      } catch {
+        return null;
+      }
+    },
+    set(session) {
+      if (!canUse) return;
+      try {
+        const doc = globalThis.document;
+        const loc = globalThis.location;
+        const isHttps = loc?.protocol === "https:";
+        const secure = isHttps ? "; Secure" : "";
+        if (session) {
+          const now = Math.floor(Date.now() / 1e3);
+          const maxAge = Math.max(0, session.expires_at - now);
+          const value = encodeURIComponent(JSON.stringify(session));
+          doc.cookie = `${key}=${value}; Path=/; Max-Age=${maxAge}; SameSite=Lax${secure}`;
+        } else {
+          doc.cookie = `${key}=; Path=/; Max-Age=0; SameSite=Lax${secure}`;
+        }
+      } catch {
+      }
+    }
+  };
+}
 
 // src/client.ts
-var DEFAULT_STORAGE_KEY = "junction.auth.session";
-function pickStorage(opts) {
-  const key = opts.storageKey ?? DEFAULT_STORAGE_KEY;
+var DEFAULT_STORAGE_KEY = "__junction_session";
+function pickStorage(opts, key) {
   if (opts.storage === "memory") return memoryStorage();
-  if (typeof globalThis !== "undefined" && "localStorage" in globalThis) {
-    return localStorageStorage(key);
-  }
+  if (opts.storage === "localStorage") return localStorageStorage(key);
+  const hasDocument = typeof globalThis !== "undefined" && typeof globalThis.document !== "undefined";
+  if (hasDocument) return cookieStorage(key);
   return memoryStorage();
 }
 var AuthClient = class {
   #deps;
   #listeners = /* @__PURE__ */ new Set();
+  #channel;
+  #selfId;
   // Refresh in-flight — concurrent 401s share one refresh so we don't
   // race-rotate the single-use token on the server.
   #inflightRefresh = null;
   constructor(opts) {
+    const key = opts.storageKey ?? DEFAULT_STORAGE_KEY;
     this.#deps = {
       url: opts.url.replace(/\/+$/, ""),
       fetchFn: opts.fetch ?? ((...args) => fetch(...args)),
-      storage: pickStorage(opts)
+      storage: pickStorage(opts, key)
     };
+    this.#selfId = randomId();
+    this.#channel = openChannel(`junction.auth.${key}`);
+    this.#channel?.addEventListener("message", (e) => {
+      const payload = e.data;
+      if (!payload || payload.from === this.#selfId) return;
+      this.#deps.storage.set(payload.session);
+      this.#emitLocal(payload.event, payload.session);
+    });
   }
   // --- public API --------------------------------------------------------
   async signUp(credentials) {
@@ -202,7 +253,22 @@ var AuthClient = class {
   async #rawFetch(path, init) {
     return this.#deps.fetchFn(`${this.#deps.url}${path}`, init);
   }
+  // Emits locally AND broadcasts to peer tabs.
   #emit(event, session) {
+    this.#emitLocal(event, session);
+    try {
+      this.#channel?.postMessage({
+        from: this.#selfId,
+        event,
+        session
+      });
+    } catch {
+    }
+  }
+  // Emits to in-process subscribers only — used both by local actions
+  // (via #emit, which also broadcasts) and by inbound broadcast messages
+  // (direct, so we don't re-broadcast and loop).
+  #emitLocal(event, session) {
     for (const l of this.#listeners) {
       try {
         l(event, session);
@@ -211,6 +277,20 @@ var AuthClient = class {
     }
   }
 };
+function openChannel(name) {
+  const Ctor = globalThis.BroadcastChannel;
+  if (!Ctor) return null;
+  try {
+    return new Ctor(name);
+  } catch {
+    return null;
+  }
+}
+function randomId() {
+  const crypto = globalThis.crypto;
+  if (crypto?.randomUUID) return crypto.randomUUID();
+  return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`;
+}
 function errorFrom(code, message, status) {
   return { code, message, status };
 }

package/dist/index.d.cts

@@ -34,7 +34,7 @@ type AuthEvent = "SIGNED_IN" | "SIGNED_OUT" | "TOKEN_REFRESHED" | "USER_UPDATED"
 type AuthStateChangeHandler = (event: AuthEvent, session: AuthSession | null) => void;
 type ClientOptions = {
     url: string;
-    storage?: "localStorage" | "memory";
+    storage?: "cookie" | "localStorage" | "memory";
     storageKey?: string;
     fetch?: typeof fetch;
 };

package/dist/index.d.ts

@@ -34,7 +34,7 @@ type AuthEvent = "SIGNED_IN" | "SIGNED_OUT" | "TOKEN_REFRESHED" | "USER_UPDATED"
 type AuthStateChangeHandler = (event: AuthEvent, session: AuthSession | null) => void;
 type ClientOptions = {
     url: string;
-    storage?: "localStorage" | "memory";
+    storage?: "cookie" | "localStorage" | "memory";
     storageKey?: string;
     fetch?: typeof fetch;
 };

package/dist/index.js

@@ -34,29 +34,80 @@ function localStorageStorage(key) {
     }
   };
 }
+function cookieStorage(key) {
+  const canUse = typeof globalThis !== "undefined" && typeof globalThis.document !== "undefined";
+  return {
+    get() {
+      if (!canUse) return null;
+      try {
+        const jar = globalThis.document.cookie;
+        if (!jar) return null;
+        const prefix = `${key}=`;
+        for (const part of jar.split("; ")) {
+          if (part.startsWith(prefix)) {
+            const value = part.slice(prefix.length);
+            if (!value) return null;
+            return JSON.parse(decodeURIComponent(value));
+          }
+        }
+        return null;
+      } catch {
+        return null;
+      }
+    },
+    set(session) {
+      if (!canUse) return;
+      try {
+        const doc = globalThis.document;
+        const loc = globalThis.location;
+        const isHttps = loc?.protocol === "https:";
+        const secure = isHttps ? "; Secure" : "";
+        if (session) {
+          const now = Math.floor(Date.now() / 1e3);
+          const maxAge = Math.max(0, session.expires_at - now);
+          const value = encodeURIComponent(JSON.stringify(session));
+          doc.cookie = `${key}=${value}; Path=/; Max-Age=${maxAge}; SameSite=Lax${secure}`;
+        } else {
+          doc.cookie = `${key}=; Path=/; Max-Age=0; SameSite=Lax${secure}`;
+        }
+      } catch {
+      }
+    }
+  };
+}
 
 // src/client.ts
-var DEFAULT_STORAGE_KEY = "junction.auth.session";
-function pickStorage(opts) {
-  const key = opts.storageKey ?? DEFAULT_STORAGE_KEY;
+var DEFAULT_STORAGE_KEY = "__junction_session";
+function pickStorage(opts, key) {
   if (opts.storage === "memory") return memoryStorage();
-  if (typeof globalThis !== "undefined" && "localStorage" in globalThis) {
-    return localStorageStorage(key);
-  }
+  if (opts.storage === "localStorage") return localStorageStorage(key);
+  const hasDocument = typeof globalThis !== "undefined" && typeof globalThis.document !== "undefined";
+  if (hasDocument) return cookieStorage(key);
   return memoryStorage();
 }
 var AuthClient = class {
   #deps;
   #listeners = /* @__PURE__ */ new Set();
+  #channel;
+  #selfId;
   // Refresh in-flight — concurrent 401s share one refresh so we don't
   // race-rotate the single-use token on the server.
   #inflightRefresh = null;
   constructor(opts) {
+    const key = opts.storageKey ?? DEFAULT_STORAGE_KEY;
     this.#deps = {
       url: opts.url.replace(/\/+$/, ""),
       fetchFn: opts.fetch ?? ((...args) => fetch(...args)),
-      storage: pickStorage(opts)
+      storage: pickStorage(opts, key)
     };
+    this.#selfId = randomId();
+    this.#channel = openChannel(`junction.auth.${key}`);
+    this.#channel?.addEventListener("message", (e) => {
+      const payload = e.data;
+      if (!payload || payload.from === this.#selfId) return;
+      this.#deps.storage.set(payload.session);
+      this.#emitLocal(payload.event, payload.session);
+    });
   }
   // --- public API --------------------------------------------------------
   async signUp(credentials) {
@@ -175,7 +226,22 @@ var AuthClient = class {
   async #rawFetch(path, init) {
     return this.#deps.fetchFn(`${this.#deps.url}${path}`, init);
   }
+  // Emits locally AND broadcasts to peer tabs.
   #emit(event, session) {
+    this.#emitLocal(event, session);
+    try {
+      this.#channel?.postMessage({
+        from: this.#selfId,
+        event,
+        session
+      });
+    } catch {
+    }
+  }
+  // Emits to in-process subscribers only — used both by local actions
+  // (via #emit, which also broadcasts) and by inbound broadcast messages
+  // (direct, so we don't re-broadcast and loop).
+  #emitLocal(event, session) {
     for (const l of this.#listeners) {
       try {
         l(event, session);
@@ -184,6 +250,20 @@ var AuthClient = class {
     }
   }
 };
+function openChannel(name) {
+  const Ctor = globalThis.BroadcastChannel;
+  if (!Ctor) return null;
+  try {
+    return new Ctor(name);
+  } catch {
+    return null;
+  }
+}
+function randomId() {
+  const crypto = globalThis.crypto;
+  if (crypto?.randomUUID) return crypto.randomUUID();
+  return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`;
+}
 function errorFrom(code, message, status) {
   return { code, message, status };
 }

package/dist/react/index.cjs

@@ -3,6 +3,10 @@ var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
 var __copyProps = (to, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
     for (let key of __getOwnPropNames(from))
@@ -15,7 +19,65 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 
 // src/react/index.ts
 var react_exports = {};
+__export(react_exports, {
+  JunctionProvider: () => JunctionProvider,
+  useJunctionAuth: () => useJunctionAuth,
+  useJunctionSession: () => useJunctionSession,
+  useJunctionUser: () => useJunctionUser
+});
 module.exports = __toCommonJS(react_exports);
-throw new Error(
-  "@onjunctiondev/auth/react is not available in slice 1. React hooks ship with slice 2. Use the core client via '@onjunctiondev/auth' for now."
-);
+var import_react = require("react");
+var JunctionAuthContext = (0, import_react.createContext)(null);
+function JunctionProvider(props) {
+  const { client, children } = props;
+  const [state, setState] = (0, import_react.useState)(() => ({
+    session: client.auth.getSession().data?.session ?? null,
+    isLoading: true
+  }));
+  (0, import_react.useEffect)(() => {
+    const sub = client.auth.onAuthStateChange((_event, session) => {
+      setState({ session, isLoading: false });
+    });
+    return () => sub.unsubscribe();
+  }, [client]);
+  const value = (0, import_react.useMemo)(() => ({ client, state }), [client, state]);
+  return (0, import_react.createElement)(JunctionAuthContext.Provider, { value }, children);
+}
+function useCtx() {
+  const ctx = (0, import_react.useContext)(JunctionAuthContext);
+  if (!ctx) {
+    throw new Error(
+      "Junction auth hook called outside <JunctionProvider>. Wrap your app in <JunctionProvider client={...}>."
+    );
+  }
+  return ctx;
+}
+function useJunctionSession() {
+  const { state } = useCtx();
+  return { session: state.session, isLoading: state.isLoading };
+}
+function useJunctionUser() {
+  const { state } = useCtx();
+  return { user: state.session?.user ?? null, isLoading: state.isLoading };
+}
+function useJunctionAuth() {
+  const { client } = useCtx();
+  const signIn = (0, import_react.useCallback)(
+    (email, password) => client.auth.signIn({ email, password }),
+    [client]
+  );
+  const signUp = (0, import_react.useCallback)(
+    (email, password) => client.auth.signUp({ email, password }),
+    [client]
+  );
+  const signOut = (0, import_react.useCallback)(() => client.auth.signOut(), [client]);
+  const refreshSession = (0, import_react.useCallback)(() => client.auth.refreshSession(), [client]);
+  return { signIn, signUp, signOut, refreshSession };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  JunctionProvider,
+  useJunctionAuth,
+  useJunctionSession,
+  useJunctionUser
+});

package/dist/react/index.d.cts

@@ -1,2 +1,32 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { JunctionClient, AuthSession, Result, AuthUser } from '../index.cjs';
 
-export {  }
+type SessionState = {
+    session: AuthSession | null;
+    isLoading: boolean;
+};
+type ContextValue = {
+    client: JunctionClient;
+    state: SessionState;
+};
+declare function JunctionProvider(props: {
+    client: JunctionClient;
+    children: ReactNode;
+}): react.FunctionComponentElement<react.ProviderProps<ContextValue | null>>;
+declare function useJunctionSession(): {
+    session: AuthSession | null;
+    isLoading: boolean;
+};
+declare function useJunctionUser(): {
+    user: AuthUser | null;
+    isLoading: boolean;
+};
+declare function useJunctionAuth(): {
+    signIn: (email: string, password: string) => Promise<Result<AuthSession>>;
+    signUp: (email: string, password: string) => Promise<Result<AuthSession>>;
+    signOut: () => Promise<Result<null>>;
+    refreshSession: () => Promise<Result<AuthSession>>;
+};
+
+export { JunctionProvider, useJunctionAuth, useJunctionSession, useJunctionUser };

package/dist/react/index.d.ts

@@ -1,2 +1,32 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { JunctionClient, AuthSession, Result, AuthUser } from '../index.js';
 
-export {  }
+type SessionState = {
+    session: AuthSession | null;
+    isLoading: boolean;
+};
+type ContextValue = {
+    client: JunctionClient;
+    state: SessionState;
+};
+declare function JunctionProvider(props: {
+    client: JunctionClient;
+    children: ReactNode;
+}): react.FunctionComponentElement<react.ProviderProps<ContextValue | null>>;
+declare function useJunctionSession(): {
+    session: AuthSession | null;
+    isLoading: boolean;
+};
+declare function useJunctionUser(): {
+    user: AuthUser | null;
+    isLoading: boolean;
+};
+declare function useJunctionAuth(): {
+    signIn: (email: string, password: string) => Promise<Result<AuthSession>>;
+    signUp: (email: string, password: string) => Promise<Result<AuthSession>>;
+    signOut: () => Promise<Result<null>>;
+    refreshSession: () => Promise<Result<AuthSession>>;
+};
+
+export { JunctionProvider, useJunctionAuth, useJunctionSession, useJunctionUser };

package/dist/react/index.js

@@ -1,4 +1,63 @@
 // src/react/index.ts
-throw new Error(
-  "@onjunctiondev/auth/react is not available in slice 1. React hooks ship with slice 2. Use the core client via '@onjunctiondev/auth' for now."
-);
+import {
+  createContext,
+  createElement,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState
+} from "react";
+var JunctionAuthContext = createContext(null);
+function JunctionProvider(props) {
+  const { client, children } = props;
+  const [state, setState] = useState(() => ({
+    session: client.auth.getSession().data?.session ?? null,
+    isLoading: true
+  }));
+  useEffect(() => {
+    const sub = client.auth.onAuthStateChange((_event, session) => {
+      setState({ session, isLoading: false });
+    });
+    return () => sub.unsubscribe();
+  }, [client]);
+  const value = useMemo(() => ({ client, state }), [client, state]);
+  return createElement(JunctionAuthContext.Provider, { value }, children);
+}
+function useCtx() {
+  const ctx = useContext(JunctionAuthContext);
+  if (!ctx) {
+    throw new Error(
+      "Junction auth hook called outside <JunctionProvider>. Wrap your app in <JunctionProvider client={...}>."
+    );
+  }
+  return ctx;
+}
+function useJunctionSession() {
+  const { state } = useCtx();
+  return { session: state.session, isLoading: state.isLoading };
+}
+function useJunctionUser() {
+  const { state } = useCtx();
+  return { user: state.session?.user ?? null, isLoading: state.isLoading };
+}
+function useJunctionAuth() {
+  const { client } = useCtx();
+  const signIn = useCallback(
+    (email, password) => client.auth.signIn({ email, password }),
+    [client]
+  );
+  const signUp = useCallback(
+    (email, password) => client.auth.signUp({ email, password }),
+    [client]
+  );
+  const signOut = useCallback(() => client.auth.signOut(), [client]);
+  const refreshSession = useCallback(() => client.auth.refreshSession(), [client]);
+  return { signIn, signUp, signOut, refreshSession };
+}
+export {
+  JunctionProvider,
+  useJunctionAuth,
+  useJunctionSession,
+  useJunctionUser
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onjunctiondev/auth",
-  "version": "0.1.3",
+  "version": "0.2.1",
   "description": "Headless auth SDK for Junction — email/password sessions with per-project JWTs and RLS claims.",
   "license": "MIT",
   "homepage": "https://onjunction.dev",
@@ -40,9 +40,17 @@
     "check-types": "tsc --noEmit",
     "prepublishOnly": "pnpm build"
   },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": { "optional": true }
+  },
   "devDependencies": {
     "@junction/typescript-config": "workspace:*",
     "@types/node": "26.4.1",
+    "@types/react": "^19.0.0",
+    "react": "^19.0.0",
     "tsup": "^8.3.5",
     "typescript": "~5.7.0"
   }