@multiplatform.one/keycloak 6.0.3 → 6.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/keycloak",
-  "version": "6.0.3",
+  "version": "6.1.0",
   "description": "keycloak client for multiplatform.one ecosystem",
   "keywords": [
     "auth",
@@ -30,7 +30,10 @@
   "exports": {
     "./package.json": "./package.json",
     ".": {
-      "react-native": "./src/index.native.ts",
+      "react-native": {
+        "import": "./dist/esm/index.native.js",
+        "require": "./dist/cjs/index.native.cjs"
+      },
       "types": "./src/index.ts",
       "import": "./src/index.ts",
       "require": "./src/index.ts",
@@ -49,8 +52,8 @@
     "@better-auth/expo": "^1.6.9",
     "better-auth": "^1.6.9",
     "jwt-decode": "^4.0.0",
-    "@multiplatform.one/keycloak-js": "6.0.3",
-    "@multiplatform.one/store": "6.0.3"
+    "@multiplatform.one/keycloak-js": "6.1.0",
+    "@multiplatform.one/store": "6.1.0"
   },
   "devDependencies": {
     "@tamagui/build": "2.0.0-rc.41",
@@ -65,17 +68,18 @@
     "react": "19.2.5",
     "typescript": "~5.9.3",
     "vitest": "^4.1.5",
-    "@multiplatform.one/config": "6.0.3",
-    "@multiplatform.one/logger": "6.0.3",
-    "@multiplatform.one/platform": "6.0.3",
-    "@multiplatform.one/test-utils": "6.0.3"
+    "@multiplatform.one/config": "6.1.0",
+    "@multiplatform.one/test-utils": "6.1.0",
+    "@multiplatform.one/platform": "6.1.0",
+    "@multiplatform.one/logger": "6.1.0"
   },
   "peerDependencies": {
     "react": "^19.1.0",
-    "@multiplatform.one/logger": "6.0.3",
-    "@multiplatform.one/platform": "6.0.3"
+    "@multiplatform.one/logger": "^6.1.0",
+    "@multiplatform.one/platform": "^6.1.0"
   },
   "optionalDependencies": {
+    "expo-linking": "^55.0.15",
     "expo-secure-store": "^55.0.13",
     "expo-web-browser": "^55.0.14"
   },

package/src/Authenticated.tsx

@@ -1,6 +1,8 @@
 import { isIframe, isServer } from "@multiplatform.one/platform";
 import { type ComponentType, type PropsWithChildren, useEffect } from "react";
-import { Text } from "tamagui";
+// react-native Text, not tamagui -- this can render above the app's
+// TamaguiProvider (see Loading.tsx).
+import { Text } from "react-native";
 import { useAuthConfig, useTokensFromQuery } from "./hooks";
 import { useKeycloak } from "./keycloak/index";
 

package/src/Loading.tsx

@@ -1,5 +1,8 @@
 import type { ComponentType } from "react";
-import { Text } from "tamagui";
+// react-native primitives, NOT tamagui: the Keycloak provider mounts ABOVE the
+// app's ThemeProvider/TamaguiProvider in createApp's composition, so tamagui
+// components here throw "Can't find Tamagui configuration" on native.
+import { ActivityIndicator, Text, View } from "react-native";
 import { useAuthConfig } from "./hooks";
 
 export interface LoadingProps {
@@ -10,7 +13,12 @@ export function Loading({ loadingComponent }: LoadingProps) {
   const { debug } = useAuthConfig();
   const LoadingComponent = loadingComponent;
   if (typeof LoadingComponent === "undefined") {
-    return <Text>{debug ? "loading" : null}</Text>;
+    return (
+      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
+        <ActivityIndicator />
+        {debug ? <Text>loading</Text> : null}
+      </View>
+    );
   }
   return <LoadingComponent />;
 }

package/src/betterAuth/expoAuthFlow.native.ts

@@ -0,0 +1,187 @@
+/**
+ * Hand-rolled Better Auth flow for native (Expo) — fetch + expo-web-browser +
+ * SecureStore, NO better-auth client packages.
+ *
+ * Why not @better-auth/expo/client: its import graph drags better-auth's
+ * cookies module -> @better-auth/core db schema -> zod into the Hermes bundle,
+ * and zod's module init dies under the vxrn/rolldown dev transform
+ * ("fn is not a function"). The wire protocol underneath is tiny (mirrors
+ * @better-auth/expo/dist/client.js): a cookie jar in SecureStore, an
+ * expo-origin header, the server's /expo-authorization-proxy to hand the
+ * session cookie back through the auth-session return URL.
+ */
+
+import * as Linking from "expo-linking";
+import * as SecureStore from "expo-secure-store";
+import * as WebBrowser from "expo-web-browser";
+
+const COOKIE_KEY = "better-auth_cookie";
+const SECURE_COOKIE_PREFIX = "__Secure-";
+
+type CookieJar = Record<string, { value: string; expires: string | null }>;
+
+function readJar(): CookieJar {
+  try {
+    return JSON.parse(SecureStore.getItem(COOKIE_KEY) || "{}");
+  } catch {
+    return {};
+  }
+}
+
+function writeJar(jar: CookieJar) {
+  SecureStore.setItem(COOKIE_KEY, JSON.stringify(jar));
+}
+
+/** Serialize the jar to a Cookie header, dropping expired entries. */
+function cookieHeader(): string {
+  return Object.entries(readJar()).reduce((acc, [key, v]) => {
+    if (v.expires && new Date(v.expires) < new Date()) return acc;
+    return acc ? `${acc}; ${key}=${v.value}` : `${key}=${v.value}`;
+  }, "");
+}
+
+/** Merge a Set-Cookie header (possibly comma-joined) into the jar. */
+function absorbSetCookie(header: string | null) {
+  if (!header) return;
+  const jar = readJar();
+  // Split on commas that start a new cookie (name=), not expires dates.
+  for (const part of header.split(/,(?=[^;,]+?=)/)) {
+    const [pair, ...attrs] = part.split(";");
+    const eq = pair.indexOf("=");
+    if (eq === -1) continue;
+    const name = pair.slice(0, eq).trim();
+    const value = pair.slice(eq + 1).trim();
+    let expires: string | null = null;
+    let dead = false;
+    for (const attr of attrs) {
+      const [k, v] = attr.split("=").map((s) => s?.trim());
+      const lk = (k || "").toLowerCase();
+      if (lk === "max-age") {
+        const n = Number(v);
+        if (n <= 0) dead = true;
+        else expires = new Date(Date.now() + n * 1000).toISOString();
+      } else if (lk === "expires" && !expires && v) {
+        const d = new Date(part.slice(part.toLowerCase().indexOf("expires=") + 8).split(";")[0]);
+        if (!Number.isNaN(d.getTime())) {
+          if (d.getTime() <= Date.now()) dead = true;
+          else expires = d.toISOString();
+        }
+      }
+    }
+    if (dead) delete jar[name];
+    else jar[name] = { value, expires };
+  }
+  writeJar(jar);
+}
+
+function getOAuthState(): string | null {
+  const jar = readJar();
+  for (const name of [
+    `${SECURE_COOKIE_PREFIX}better-auth.oauth_state`,
+    "better-auth.oauth_state",
+  ]) {
+    if (jar[name]?.value) return jar[name].value;
+  }
+  return null;
+}
+
+export interface ExpoAuthFlow {
+  signIn(provider: string, callbackURL?: string): Promise<void>;
+  signOut(): Promise<void>;
+  getSession(): Promise<{ user?: { id: string; email?: string; name?: string } } | null>;
+  /** Valid provider access token (server refreshes when expired). */
+  getAccessToken(
+    providerId: string,
+  ): Promise<{ accessToken?: string; accessTokenExpiresAt?: string } | null>;
+}
+
+// The app mounts ONE AuthProvider, which creates one flow. Expose it so
+// non-React consumers (the Frappe Bearer-token getter) can reach the same
+// cookie jar + base URL.
+let activeFlow: ExpoAuthFlow | null = null;
+
+export function getActiveExpoAuthFlow(): ExpoAuthFlow | null {
+  return activeFlow;
+}
+
+export function createExpoAuthFlow(baseURL: string, scheme?: string): ExpoAuthFlow {
+  const base = baseURL.replace(/\/$/, "");
+  const origin = () => Linking.createURL("/", scheme ? { scheme } : undefined);
+
+  async function authFetch(path: string, init?: RequestInit) {
+    const cookie = cookieHeader();
+    const res = await fetch(`${base}/api/auth${path}`, {
+      ...init,
+      credentials: "omit",
+      headers: {
+        "Content-Type": "application/json",
+        ...(cookie ? { cookie } : {}),
+        "expo-origin": origin(),
+        "x-skip-oauth-proxy": "true",
+        ...(init?.headers || {}),
+      },
+    });
+    absorbSetCookie(res.headers.get("set-cookie"));
+    return res;
+  }
+
+  const flow: ExpoAuthFlow = {
+    async signIn(provider: string, callbackURL?: string) {
+      const to = callbackURL || Linking.createURL("/");
+      const res = await authFetch("/sign-in/social", {
+        method: "POST",
+        body: JSON.stringify({ provider, callbackURL: to }),
+      });
+      if (!res.ok) {
+        const body = await res.text().catch(() => "");
+        throw new Error(`sign-in failed (${res.status}): ${body.slice(0, 200)}`);
+      }
+      const data = (await res.json()) as { url?: string; redirect?: boolean };
+      if (!data?.url) throw new Error("sign-in response had no authorization url");
+
+      // The server's expo plugin proxies the IdP redirect and forwards the
+      // session cookie back via the return URL (?cookie=...), because the
+      // OAuth callback's Set-Cookie lands in the auth-session browser, not us.
+      const params = new URLSearchParams({ authorizationURL: data.url });
+      const oauthState = getOAuthState();
+      if (oauthState) params.append("oauthState", oauthState);
+      const proxyURL = `${base}/api/auth/expo-authorization-proxy?${params.toString()}`;
+
+      const result = await WebBrowser.openAuthSessionAsync(proxyURL, to);
+      if (result.type !== "success") {
+        throw new Error(`sign-in ${result.type}`);
+      }
+      const cookie = new URL(result.url).searchParams.get("cookie");
+      if (cookie) absorbSetCookie(cookie);
+    },
+
+    async signOut() {
+      try {
+        await authFetch("/sign-out", { method: "POST", body: "{}" });
+      } finally {
+        writeJar({});
+      }
+    },
+
+    async getSession() {
+      const res = await authFetch("/get-session");
+      if (!res.ok) return null;
+      const data = await res.json().catch(() => null);
+      return data && Object.keys(data).length ? data : null;
+    },
+
+    async getAccessToken(providerId: string) {
+      const res = await authFetch("/get-access-token", {
+        method: "POST",
+        body: JSON.stringify({ providerId }),
+      });
+      if (!res.ok) return null;
+      return (await res.json().catch(() => null)) as {
+        accessToken?: string;
+        accessTokenExpiresAt?: string;
+      } | null;
+    },
+  };
+  activeFlow = flow;
+  return flow;
+}

package/src/frappeToken.native.ts

@@ -0,0 +1,45 @@
+/**
+ * Keycloak access token for Frappe API requests — native variant.
+ *
+ * Native Frappe requests can't ride the better-auth cookies (they live in the
+ * SecureStore jar, not the OS cookie store), so the Frappe HttpClient sends
+ * `Authorization: Bearer <keycloak access token>` instead — the bench's
+ * frappe_keycloak auth hook checks the Bearer header first. The token comes
+ * from better-auth's /get-access-token endpoint (which refreshes server-side
+ * when expired), authenticated with the SecureStore cookie jar.
+ */
+
+import { getActiveExpoAuthFlow } from "./betterAuth/expoAuthFlow.native";
+
+let cached: { token: string; expiresAt: number } | undefined;
+
+/** Returns a valid Keycloak access token, or undefined when signed out. */
+export async function getKeycloakBearerToken(): Promise<string | undefined> {
+  // 60s slack so we never hand out a token that expires mid-request.
+  if (cached && cached.expiresAt - 60_000 > Date.now()) return cached.token;
+  const flow = getActiveExpoAuthFlow();
+  if (!flow) return undefined;
+  try {
+    const res = await flow.getAccessToken("keycloak");
+    if (!res?.accessToken) {
+      cached = undefined;
+      return undefined;
+    }
+    cached = {
+      token: res.accessToken,
+      expiresAt: res.accessTokenExpiresAt
+        ? new Date(res.accessTokenExpiresAt).getTime()
+        : Date.now() + 60_000,
+    };
+    return cached.token;
+  } catch {
+    // Signed out / server unreachable -> guest requests.
+    cached = undefined;
+    return undefined;
+  }
+}
+
+/** Drop the cached token (sign-out). */
+export function clearKeycloakBearerToken() {
+  cached = undefined;
+}

package/src/frappeToken.ts

@@ -0,0 +1,10 @@
+/**
+ * Keycloak access token for Frappe API requests — web variant.
+ *
+ * On web the app is same-origin with the bench (the :8000 proxy), so the
+ * better-auth account cookie rides along automatically and the bench's
+ * frappe_keycloak auth hook authenticates from it. No client-side token.
+ */
+export async function getKeycloakBearerToken(): Promise<string | undefined> {
+  return undefined;
+}

package/src/index.ts

@@ -6,3 +6,4 @@ export * from "./provider/index";
 export * from "./session/index";
 export * from "./token";
 export * from "./types";
+export { getKeycloakBearerToken } from "./frappeToken";

package/src/provider/KeycloakProvider.tsx

@@ -9,12 +9,21 @@ export interface KeycloakProviderProps extends PropsWithChildren, AuthConfig {
   clientId?: string;
   publicClientId?: string;
   realm?: string;
+  /** Better Auth server base URL (drives the native sign-in flow). Without it
+   * the native provider falls back to a hardcoded localhost:5000 -- on macOS
+   * that's ControlCenter (AirPlay) answering 403 to everything, which makes
+   * the Login button a perfectly silent no-op. */
+  betterAuthBaseUrl?: string;
+  /** App scheme for the Expo auth-session redirect (native). */
+  expoScheme?: string;
 }
 
 export function KeycloakProvider({
   baseUrl,
+  betterAuthBaseUrl,
   children,
   clientId,
+  expoScheme,
   loginRedirectUri,
   debug,
   disabled,
@@ -35,6 +44,8 @@ export function KeycloakProvider({
           publicClientId,
           realm: realm || "main",
           url: baseUrl ?? "",
+          betterAuthBaseUrl,
+          expoScheme,
         }}
       >
         {children}

package/src/provider/authProvider/index.native.tsx

@@ -2,19 +2,24 @@
  * File: /src/provider/auth_provider/index.native.tsx
  * Project: @multiplatform.one/keycloak
  *
- * Native (Expo) AuthProvider using Better Auth Expo client.
- * Replaces the previous expo-auth-session PKCE flow.
- * Auth is handled by the Better Auth server; the Expo client manages
- * the browser redirect flow and stores the session cookie in SecureStore.
+ * Native (Expo) AuthProvider using the hand-rolled Better Auth flow
+ * (betterAuth/expoAuthFlow.native.ts): fetch + expo-web-browser + SecureStore.
+ * Deliberately NOT @better-auth/expo/client — its import graph drags
+ * better-auth's cookies module -> @better-auth/core db schema -> zod into the
+ * Hermes bundle, and zod's module init dies under the vxrn/rolldown dev
+ * transform. The server side stays better-auth (the expo() plugin provides
+ * /expo-authorization-proxy and the cookie hand-back).
  */
 
 import { useEffect, useMemo, useState } from "react";
+import * as Linking from "expo-linking";
 import { Loading } from "../../Loading";
-import { getExpoAuthClient } from "../../betterAuth/expoClient";
+import { createExpoAuthFlow } from "../../betterAuth/expoAuthFlow.native";
 import { KeycloakConfigContext } from "../../keycloak/config";
 import { Keycloak } from "../../keycloak/index";
 import type { KeycloakLoginOptions, KeycloakLogoutOptions } from "../../keycloak/base";
 import { KeycloakContext } from "../../keycloak/context";
+import { setNativeSession } from "../../session/index.native";
 import { AfterAuth } from "../AfterAuth";
 import type { AuthProviderProps } from "./shared";
 
@@ -29,78 +34,81 @@ export function AuthProvider({
 
   // Resolve the Better Auth server base URL from keycloak config.
   // On native, the keycloakConfig.url is the Keycloak server — the Better Auth
-  // server is the app backend. We derive it from env or fall back to a sensible default.
+  // server is the app backend (CreateApp wires BETTER_AUTH_BASE_URL/BASE_URL).
   const serverBaseUrl = useMemo(() => {
-    // The Better Auth server URL should come from config or env.
-    // For now, derive from keycloakConfig — the app server is typically on the same origin.
-    // In production, set BETTER_AUTH_BASE_URL in the app config / env.
-    return keycloakConfig.betterAuthBaseUrl || "http://localhost:5000";
+    return keycloakConfig.betterAuthBaseUrl || "http://localhost:8000";
   }, [keycloakConfig]);
 
-  const scheme = useMemo(() => keycloakConfig.expoScheme || "multiplatform-one", [keycloakConfig]);
+  const scheme = useMemo(() => keycloakConfig.expoScheme, [keycloakConfig]);
 
-  const client = useMemo(
-    () => (disabled ? null : getExpoAuthClient(serverBaseUrl, scheme)),
+  const flow = useMemo(
+    () => (disabled ? null : createExpoAuthFlow(serverBaseUrl, scheme)),
     [disabled, serverBaseUrl, scheme],
   );
 
-  // Check session on mount
   useEffect(() => {
-    if (disabled || !client) {
+    if (disabled || !flow) {
       setIsLoading(false);
       return;
     }
-    (async () => {
+    let alive = true;
+
+    // Probe the session, build a Keycloak instance reflecting it, and push the
+    // result into the native session store (useSession's backing).
+    const refresh = async () => {
+      let session: Awaited<ReturnType<typeof flow.getSession>> = null;
       try {
-        const session = await client.getSession();
-        if (session.data?.user) {
-          const _keycloak = new Keycloak(
-            keycloakConfig,
-            undefined, // no raw token
-            undefined,
-            undefined,
-            async (options: KeycloakLoginOptions) => {
-              await client.signIn.social({
-                provider: "keycloak" as any,
-                callbackURL: options.redirectUri,
-              });
-            },
-            async (_options: KeycloakLogoutOptions) => {
-              await client.signOut();
-            },
-          );
-          // Set minimal user info from session
-          _keycloak.authenticated = true;
-          _keycloak.email = session.data.user.email || undefined;
-          _keycloak.username = session.data.user.name || undefined;
-          _keycloak.subject = session.data.user.id;
-          setKeycloak(_keycloak);
-        } else {
-          setKeycloak(
-            new Keycloak(
-              keycloakConfig,
-              undefined,
-              undefined,
-              undefined,
-              async (options: KeycloakLoginOptions) => {
-                await client.signIn.social({
-                  provider: "keycloak" as any,
-                  callbackURL: options.redirectUri,
-                });
-              },
-              async (_options: KeycloakLogoutOptions) => {
-                await client.signOut();
-              },
-            ),
-          );
-        }
-      } catch {
-        setKeycloak(new Keycloak(keycloakConfig));
-      } finally {
-        setIsLoading(false);
+        session = await flow.getSession();
+      } catch (err) {
+        console.error("[keycloak] native session check failed:", err);
       }
-    })();
-  }, [disabled, client, keycloakConfig]);
+      const _keycloak = new Keycloak(
+        keycloakConfig,
+        undefined,
+        undefined,
+        undefined,
+        async (options: KeycloakLoginOptions) => {
+          // Default the OAuth return URL to the app's own runtime URL: Expo Go
+          // can only receive exp:// redirects (Linking.createURL derives
+          // exp://<host>/--/ there; the bare app scheme in dev builds).
+          await flow.signIn("keycloak", options.redirectUri || Linking.createURL("/"));
+          await refresh();
+          return undefined;
+        },
+        async (_options: KeycloakLogoutOptions) => {
+          await flow.signOut();
+          await refresh();
+          return undefined;
+        },
+      );
+      if (session?.user) {
+        _keycloak.authenticated = true;
+        _keycloak.email = session.user.email || undefined;
+        _keycloak.username = session.user.name || undefined;
+        _keycloak.subject = session.user.id;
+      }
+      if (!alive) return;
+      setNativeSession(
+        session?.user
+          ? {
+              user: {
+                id: session.user.id,
+                name: session.user.name ?? null,
+                email: session.user.email ?? null,
+              },
+            }
+          : null,
+      );
+      setKeycloak(_keycloak);
+    };
+
+    refresh().finally(() => {
+      if (alive) setIsLoading(false);
+    });
+    return () => {
+      alive = false;
+    };
+  }, [disabled, flow, keycloakConfig]);
 
   if (disabled) return <>{children}</>;
   if (isLoading || !keycloak) {

package/src/session/index.native.ts

@@ -2,20 +2,45 @@
  * File: /src/session/index.native.ts
  * Project: @multiplatform.one/keycloak
  *
- * Better Auth session hook for React Native / Expo.
- * Uses the Expo auth client when available, otherwise returns empty session.
+ * Native session hook backed by a tiny external store the AuthProvider feeds
+ * (no better-auth client on native -- see betterAuth/expoAuthFlow.native.ts).
  */
 
-import type { SessionContextValue } from "./index";
+import { useSyncExternalStore } from "react";
+import type { Session, SessionContextValue, SessionStatus } from "./index";
+
+interface NativeSessionState {
+  session: Session | null;
+  status: SessionStatus;
+}
+
+let state: NativeSessionState = { session: null, status: "loading" };
+const listeners = new Set<() => void>();
+
+/** Fed by the native AuthProvider on mount / sign-in / sign-out. */
+export function setNativeSession(session: Session | null, status?: SessionStatus) {
+  state = {
+    session,
+    status: status ?? (session?.user ? "authenticated" : "unauthenticated"),
+  };
+  for (const l of listeners) l();
+}
+
+function subscribe(listener: () => void) {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
 
 export async function getSession() {
-  return null;
+  return state.session;
 }
 
 export function useSession<R extends boolean = false>(
   _options?: Record<string, unknown>,
 ): SessionContextValue<R> {
-  // On native, session is managed by AuthProvider (Expo auth client).
-  // Components consuming useSession outside AuthProvider get empty state.
-  return { session: null, status: "unauthenticated" };
+  return useSyncExternalStore(
+    subscribe,
+    () => state,
+    () => state,
+  );
 }