@multiplatform.one/keycloak 7.34.4 → 7.36.0

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

@@ -14,143 +14,205 @@
 import { useEffect, useMemo, useState } from "react";
 import { AppState, type AppStateStatus } from "react-native";
 import * as Linking from "expo-linking";
-import { Loading } from "../../Loading";
 import {
   createExpoAuthFlow,
   rewriteLoopbackHostForNative,
 } from "../../betterAuth/expoAuthFlow.native";
 import { clearKeycloakBearerToken } from "../../frappeToken.native";
-import { KeycloakConfigContext } from "../../keycloak/config";
-import { Keycloak } from "../../keycloak/index";
+import { KeycloakConfigContext, type KeycloakConfig } from "../../keycloak/config";
+import { Keycloak } from "../../keycloak/index.native";
 import type { KeycloakLoginOptions, KeycloakLogoutOptions } from "../../keycloak/base";
 import { KeycloakContext } from "../../keycloak/context";
 import { setNativeSession } from "../../session/index.native";
+import { setAuthError } from "../../session/authError";
+import type { Session } from "../../session/index";
 import { AfterAuth } from "../AfterAuth";
 import type { AuthProviderProps } from "./shared";
 
-export function AuthProvider({
-  children,
-  disabled,
-  keycloakConfig,
-  loadingComponent,
-}: AuthProviderProps) {
-  const [keycloak, setKeycloak] = useState<Keycloak>();
-  const [isLoading, setIsLoading] = useState(true);
+function createController(
+  config: KeycloakConfig,
+  disabled: boolean | undefined,
+  notify: () => void,
+) {
+  const flow = disabled
+    ? null
+    : createExpoAuthFlow(
+        rewriteLoopbackHostForNative(config.betterAuthBaseUrl || "http://localhost:8000"),
+        config.expoScheme,
+      );
+  let active = true;
+  let sequence = 0;
+  let interactive = false;
+  let session: Session | null = null;
+  const current = (request: number) => active && request === sequence;
+  const controller = {
+    keycloak: makeKeycloak(null),
+    loading: !disabled,
+    start() {
+      active = true;
+      if (!flow) {
+        publish(null);
+      } else if (!interactive) {
+        void refresh().catch(() => undefined);
+      }
+    },
+    stop() {
+      active = false;
+      sequence++;
+      interactive = false;
+    },
+    refresh,
+  };
+
+  function makeKeycloak(next: Session | null) {
+    const keycloak = new Keycloak(config, undefined, undefined, undefined, login, logout);
+    if (next?.user) {
+      keycloak.authenticated = true;
+      keycloak.subject = next.user.id;
+      keycloak.email = next.user.email ?? undefined;
+      keycloak.username = next.user.name ?? undefined;
+    }
+    return keycloak;
+  }
+
+  function publish(next: Session | null, error?: Error) {
+    session = next;
+    controller.keycloak = makeKeycloak(next);
+    controller.loading = false;
+    setAuthError(error);
+    setNativeSession(next);
+    notify();
+  }
+
+  function begin() {
+    const request = ++sequence;
+    controller.loading = true;
+    setAuthError();
+    setNativeSession(session, "loading");
+    notify();
+    return request;
+  }
 
-  // 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 (CreateApp wires BETTER_AUTH_BASE_URL/BASE_URL).
-  // Loopback hosts are rewritten for the device (127.0.0.1 / 10.0.2.2): see
-  // rewriteLoopbackHostForNative.
-  const serverBaseUrl = useMemo(() => {
-    return rewriteLoopbackHostForNative(
-      keycloakConfig.betterAuthBaseUrl || "http://localhost:8000",
+  async function probe(request: number) {
+    const next = await flow!.getSession();
+    if (!current(request)) return;
+    publish(
+      next?.user
+        ? {
+            user: {
+              id: next.user.id,
+              name: next.user.name ?? null,
+              email: next.user.email ?? null,
+            },
+          }
+        : null,
     );
-  }, [keycloakConfig]);
+  }
 
-  const scheme = useMemo(() => keycloakConfig.expoScheme, [keycloakConfig]);
+  function fail(request: number, cause: unknown): never {
+    const error = cause instanceof Error ? cause : new Error(String(cause));
+    if (current(request)) publish(null, error);
+    throw error;
+  }
 
-  const flow = useMemo(
-    () => (disabled ? null : createExpoAuthFlow(serverBaseUrl, scheme)),
-    [disabled, serverBaseUrl, scheme],
-  );
+  async function refresh() {
+    if (!active || !flow || interactive) return;
+    const request = begin();
+    try {
+      await probe(request);
+    } catch (error) {
+      fail(request, error);
+    }
+  }
 
-  useEffect(() => {
-    if (disabled || !flow) {
-      setIsLoading(false);
-      return;
+  async function login(options: KeycloakLoginOptions) {
+    if (!active || !flow) return undefined;
+    interactive = true;
+    const request = begin();
+    try {
+      await flow.signIn("keycloak", options.redirectUri || Linking.createURL("/"));
+      if (!current(request)) return undefined;
+      clearKeycloakBearerToken();
+      await probe(request);
+    } catch (error) {
+      fail(request, error);
+    } finally {
+      if (current(request)) interactive = false;
     }
-    let alive = true;
+    return undefined;
+  }
 
-    // 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 {
-        session = await flow.getSession();
-      } catch (err) {
-        console.error("[keycloak] native session check failed:", err);
+  async function logout(options: KeycloakLogoutOptions) {
+    if (!active || !flow) return undefined;
+    interactive = true;
+    const request = ++sequence;
+    clearKeycloakBearerToken();
+    publish(null);
+    try {
+      const redirectUri = options.redirectUri?.includes("://")
+        ? options.redirectUri
+        : Linking.createURL("/");
+      await flow.signOut(redirectUri);
+    } catch (error) {
+      fail(request, error);
+    } finally {
+      if (current(request)) {
+        clearKeycloakBearerToken();
+        interactive = false;
       }
-      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("/"));
-          // Drop any signed-out cooldown/stale token so the first Frappe
-          // request after sign-in fetches a fresh Bearer token.
-          clearKeycloakBearerToken();
-          await refresh();
-          return undefined;
-        },
-        async (options: KeycloakLogoutOptions) => {
-          // Single sign-out: ends the Better Auth session AND rides the
-          // Keycloak end-session endpoint through the system browser (see
-          // expoAuthFlow.signOut). Only custom-scheme URLs make sense as the
-          // post-logout return on native; web-style paths fall back to the
-          // app's own runtime URL.
-          const redirectUri =
-            options.redirectUri && options.redirectUri.includes("://")
-              ? options.redirectUri
-              : Linking.createURL("/");
-          await flow.signOut(redirectUri);
-          clearKeycloakBearerToken();
-          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);
-    };
+    }
+    return undefined;
+  }
 
-    refresh().finally(() => {
-      if (alive) setIsLoading(false);
-    });
+  return controller;
+}
 
-    // Re-probe when the app returns to the foreground: covers a completed
-    // ASWebAuthenticationSession whose Linking event arrived after dismiss,
-    // and a user who abandoned the end-session page (local jar already
-    // empty; this just refreshes the header).
-    const onAppState = (next: AppStateStatus) => {
-      if (next === "active") refresh().catch(() => undefined);
-    };
-    const appSub = AppState.addEventListener("change", onAppState);
+export function AuthProvider({
+  children,
+  disabled,
+  keycloakConfig,
+  loadingComponent: LoadingComponent,
+}: AuthProviderProps) {
+  const [, setRevision] = useState(0);
+  const { url, realm, clientId, publicClientId, betterAuthBaseUrl, expoScheme } = keycloakConfig;
+  const scopes = JSON.stringify(keycloakConfig.scopes);
+  const controller = useMemo(
+    () =>
+      createController(
+        {
+          url,
+          realm,
+          clientId,
+          publicClientId,
+          betterAuthBaseUrl,
+          expoScheme,
+          scopes: scopes ? JSON.parse(scopes) : undefined,
+        },
+        disabled,
+        () => setRevision((revision) => revision + 1),
+      ),
+    [url, realm, clientId, publicClientId, betterAuthBaseUrl, expoScheme, scopes, disabled],
+  );
 
+  useEffect(() => {
+    if (disabled) return;
+    controller.start();
+    const appSub = AppState.addEventListener("change", (next: AppStateStatus) => {
+      if (next === "active") void controller.refresh().catch(() => undefined);
+    });
     return () => {
-      alive = false;
+      controller.stop();
       appSub.remove();
     };
-  }, [disabled, flow, keycloakConfig]);
+  }, [controller, disabled]);
 
   if (disabled) return <>{children}</>;
-  if (isLoading || !keycloak) {
-    return <Loading loadingComponent={loadingComponent} />;
-  }
+
   return (
-    <KeycloakConfigContext.Provider value={keycloakConfig}>
-      <KeycloakContext.Provider value={keycloak}>
+    <KeycloakConfigContext.Provider value={controller.keycloak.config}>
+      <KeycloakContext.Provider value={controller.keycloak}>
         <AfterAuth>{children}</AfterAuth>
+        {controller.loading && LoadingComponent ? <LoadingComponent /> : null}
       </KeycloakContext.Provider>
     </KeycloakConfigContext.Provider>
   );

package/src/provider/authProvider/nonblocking.native.spec.tsx

@@ -0,0 +1,303 @@
+// @vitest-environment happy-dom
+import { act, cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { useContext, useEffect, useState, type PropsWithChildren } from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { AppState } from "react-native";
+import { setAuthError } from "../../session/authError";
+import { AuthProvider } from "./index.native";
+import { KeycloakContext } from "../../keycloak/context";
+import { setNativeSession, useSession } from "../../session/index.native";
+import type { KeycloakConfig } from "../../keycloak/config";
+
+const { appState, clearBearer, jar, afterAuth } = vi.hoisted(() => ({
+  appState: { current: undefined as undefined | ((state: string) => void), remove: vi.fn() },
+  clearBearer: vi.fn(),
+  jar: new Map<string, string>(),
+  afterAuth: vi.fn(),
+}));
+vi.mock("@multiplatform.one/platform", () => ({
+  isBrowser: false,
+  isServer: false,
+  isStorybook: false,
+}));
+vi.mock("expo-linking", () => ({
+  createURL: () => "test://home",
+  addEventListener: () => ({ remove() {} }),
+}));
+vi.mock("expo-secure-store", () => ({
+  getItem: (key: string) => jar.get(key),
+  setItem: (key: string, value: string) => jar.set(key, value),
+}));
+vi.mock("expo-web-browser", () => ({
+  openAuthSessionAsync: async () => ({ type: "success", url: "test://home?cookie=session=new" }),
+  dismissAuthSession: vi.fn(),
+}));
+vi.mock("../../frappeToken.native", () => ({ clearKeycloakBearerToken: clearBearer }));
+vi.mock("../../hooks/index", () => ({ useAuthConfig: () => ({}) }));
+vi.mock("../../betterAuth/client", () => ({ getAuthClient: vi.fn() }));
+vi.mock("../../Loading", () => ({
+  Loading: ({ loadingComponent: Slot }: { loadingComponent?: import("react").ComponentType }) =>
+    Slot ? <Slot /> : null,
+}));
+vi.mock("../AfterAuth", () => ({
+  AfterAuth: ({ children }: PropsWithChildren) => {
+    afterAuth();
+    return children;
+  },
+}));
+
+const config: KeycloakConfig = {
+  url: "https://idp.test/auth",
+  realm: "test",
+  clientId: "app",
+  betterAuthBaseUrl: "https://app.test",
+};
+const mounted = vi.fn();
+let currentKeycloak: import("../../keycloak/base").BaseKeycloak | undefined | null;
+let sessionState: ReturnType<typeof useSession>;
+function Child() {
+  currentKeycloak = useContext(KeycloakContext);
+  sessionState = useSession();
+  const [count, setCount] = useState(0);
+  useEffect(() => {
+    mounted();
+  }, []);
+  return (
+    <>
+      <button onClick={() => setCount(count + 1)}>child {count}</button>
+      <output>{sessionState.status}</output>
+      <span>{sessionState.error?.message}</span>
+    </>
+  );
+}
+function Slot() {
+  return <div>auth slot</div>;
+}
+const json = (data: unknown) => new Response(JSON.stringify(data));
+const user = { user: { id: "fresh", name: "New User" } };
+function deferred<T>() {
+  let resolve!: (value: T) => void;
+  const promise = new Promise<T>((done) => {
+    resolve = done;
+  });
+  return { promise, resolve };
+}
+function mount(cfg = config) {
+  return render(
+    <AuthProvider keycloakConfig={cfg} loadingComponent={Slot}>
+      <Child />
+    </AuthProvider>,
+  );
+}
+
+beforeEach(() => {
+  vi.useFakeTimers();
+  vi.spyOn(AppState, "addEventListener").mockImplementation((_event, callback) => {
+    appState.current = callback as (state: string) => void;
+    return { remove: appState.remove };
+  });
+  setAuthError();
+  currentKeycloak = undefined;
+  mounted.mockClear();
+  afterAuth.mockClear();
+  clearBearer.mockClear();
+  appState.remove.mockClear();
+  jar.clear();
+  setNativeSession(null, "loading");
+});
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+  vi.useRealTimers();
+  vi.unstubAllGlobals();
+});
+
+describe("nonblocking native auth", () => {
+  it("bypasses auth effects and context when disabled", () => {
+    const fetchMock = vi.fn();
+    vi.stubGlobal("fetch", fetchMock);
+    render(
+      <AuthProvider disabled keycloakConfig={config} loadingComponent={Slot}>
+        <Child />
+      </AuthProvider>,
+    );
+    expect(screen.queryByText("child 0")).not.toBeNull();
+    expect(screen.queryByText("auth slot")).toBeNull();
+    expect(currentKeycloak).toBeUndefined();
+    expect(afterAuth).not.toHaveBeenCalled();
+    expect(AppState.addEventListener).not.toHaveBeenCalled();
+    expect(fetchMock).not.toHaveBeenCalled();
+  });
+
+  it("renders a usable login and preserves child state through timeout and a successful retry", async () => {
+    const fetchMock = vi
+      .fn()
+      .mockImplementationOnce(() => new Promise(() => {}))
+      .mockResolvedValue(json(user));
+    vi.stubGlobal("fetch", fetchMock);
+    mount();
+    expect(screen.queryByText("child 0")).not.toBeNull();
+    expect(screen.queryByText("auth slot")).not.toBeNull();
+    expect(currentKeycloak?.login).toBeTypeOf("function");
+    expect(currentKeycloak?.authenticated).toBe(false);
+    fireEvent.click(screen.getByText("child 0"));
+    await act(() => vi.advanceTimersByTimeAsync(10_000));
+    expect(sessionState.status).toBe("unauthenticated");
+    expect(sessionState.error?.name).toBe("AuthTimeoutError");
+    expect(screen.queryByText("auth slot")).toBeNull();
+    expect(screen.queryByText("child 1")).not.toBeNull();
+    expect(appState.current).toBeTypeOf("function");
+    await act(async () => {
+      appState.current?.("active");
+      await vi.advanceTimersByTimeAsync(0);
+    });
+    expect(sessionState.status).toBe("authenticated");
+    expect(sessionState.error).toBeUndefined();
+    expect(currentKeycloak?.subject).toBe("fresh");
+    expect(mounted).toHaveBeenCalledOnce();
+  });
+
+  it("renders children while loading without a loading slot", () => {
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(() => new Promise(() => {})),
+    );
+    render(
+      <AuthProvider keycloakConfig={config}>
+        <Child />
+      </AuthProvider>,
+    );
+    expect(screen.queryByText("child 0")).not.toBeNull();
+    expect(sessionState.status).toBe("loading");
+  });
+
+  it("login during the initial probe wins over its late signed-out response", async () => {
+    const probe = deferred<Response>();
+    vi.stubGlobal(
+      "fetch",
+      vi
+        .fn()
+        .mockReturnValueOnce(probe.promise)
+        .mockResolvedValueOnce(json({ url: "https://idp.test/login" }))
+        .mockResolvedValueOnce(json(user)),
+    );
+    mount();
+    expect(currentKeycloak).toBeDefined();
+    await act(async () => {
+      await currentKeycloak!.login();
+    });
+    expect(sessionState.status).toBe("authenticated");
+    expect(currentKeycloak?.authenticated).toBe(true);
+    await act(async () => {
+      probe.resolve(json(null));
+    });
+    expect(sessionState.status).toBe("authenticated");
+    expect(currentKeycloak?.authenticated).toBe(true);
+    expect(mounted).toHaveBeenCalledOnce();
+  });
+
+  it("rejects native sign-in, publishes the same error, and clears it on retry", async () => {
+    const failure = new Error("login offline");
+    vi.stubGlobal(
+      "fetch",
+      vi
+        .fn()
+        .mockResolvedValueOnce(json(null))
+        .mockRejectedValueOnce(failure)
+        .mockResolvedValueOnce(json({ url: "https://idp.test/login" }))
+        .mockResolvedValueOnce(json(user)),
+    );
+    await act(async () => {
+      mount();
+      await vi.advanceTimersByTimeAsync(0);
+    });
+    await act(async () => {
+      await expect(currentKeycloak!.login()).rejects.toBe(failure);
+    });
+    expect(sessionState.error).toBe(failure);
+    await act(async () => {
+      await currentKeycloak!.login();
+    });
+    expect(sessionState.error).toBeUndefined();
+    expect(currentKeycloak?.authenticated).toBe(true);
+  });
+
+  it("clears session and bearer state when remote logout fails and ignores a stale probe", async () => {
+    const stale = deferred<Response>();
+    const failure = new Error("logout offline");
+    vi.stubGlobal(
+      "fetch",
+      vi
+        .fn()
+        .mockResolvedValueOnce(json(user))
+        .mockReturnValueOnce(stale.promise)
+        .mockRejectedValue(failure),
+    );
+    await act(async () => {
+      mount();
+      await vi.advanceTimersByTimeAsync(0);
+    });
+    expect(appState.current).toBeTypeOf("function");
+    await act(async () => {
+      appState.current?.("active");
+      await vi.advanceTimersByTimeAsync(0);
+    });
+    await act(async () => {
+      await expect(currentKeycloak!.logout()).rejects.toBe(failure);
+    });
+    expect(sessionState.status).toBe("unauthenticated");
+    expect(sessionState.error).toBe(failure);
+    expect(currentKeycloak?.authenticated).toBe(false);
+    expect(clearBearer).toHaveBeenCalled();
+    await act(async () => {
+      stale.resolve(json(user));
+    });
+    expect(sessionState.status).toBe("unauthenticated");
+    expect(sessionState.error).toBe(failure);
+  });
+
+  it("ignores old configuration and unmounted probes without restarting identical config", async () => {
+    const old = deferred<Response>();
+    const last = deferred<Response>();
+    const fetchMock = vi
+      .fn()
+      .mockReturnValueOnce(old.promise)
+      .mockResolvedValueOnce(json(user))
+      .mockReturnValueOnce(last.promise);
+    vi.stubGlobal("fetch", fetchMock);
+    const view = mount();
+    view.rerender(
+      <AuthProvider keycloakConfig={{ ...config }} loadingComponent={Slot}>
+        <Child />
+      </AuthProvider>,
+    );
+    expect(fetchMock).toHaveBeenCalledOnce();
+    await act(async () => {
+      view.rerender(
+        <AuthProvider
+          keycloakConfig={{ ...config, betterAuthBaseUrl: "https://new.test" }}
+          loadingComponent={Slot}
+        >
+          <Child />
+        </AuthProvider>,
+      );
+    });
+    expect(sessionState.session?.user?.id).toBe("fresh");
+    await act(async () => {
+      old.resolve(json({ user: { id: "old" } }));
+    });
+    expect(sessionState.session?.user?.id).toBe("fresh");
+    expect(appState.current).toBeTypeOf("function");
+    await act(async () => {
+      appState.current?.("active");
+      await vi.advanceTimersByTimeAsync(0);
+    });
+    view.unmount();
+    await act(async () => {
+      last.resolve(json({ user: { id: "unmounted" } }));
+    });
+    render(<Child />);
+    expect(sessionState.session?.user?.id).not.toBe("unmounted");
+    expect(appState.remove).toHaveBeenCalled();
+  });
+});

package/src/session/authError.ts

@@ -0,0 +1,30 @@
+import { useSyncExternalStore } from "react";
+
+let error: Error | undefined;
+const listeners = new Set<() => void>();
+
+export class AuthTimeoutError extends Error {
+  constructor(timeoutMs = 10_000) {
+    super(`Authentication request timed out after ${timeoutMs}ms`);
+    this.name = "AuthTimeoutError";
+  }
+}
+
+export function setAuthError(next?: Error) {
+  if (error === next) return;
+  error = next;
+  for (const listener of listeners) listener();
+}
+
+export function getAuthError() {
+  return error;
+}
+
+function subscribe(listener: () => void) {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+
+export function useAuthError() {
+  return useSyncExternalStore(subscribe, getAuthError, getAuthError);
+}

package/src/session/index.native.ts

@@ -7,6 +7,9 @@
  */
 
 import { useSyncExternalStore } from "react";
+import { useAuthError } from "./authError";
+
+export * from "./authError";
 import type { Session, SessionContextValue, SessionStatus } from "./index";
 
 interface NativeSessionState {
@@ -38,9 +41,11 @@ export async function getSession() {
 export function useSession<R extends boolean = false>(
   _options?: Record<string, unknown>,
 ): SessionContextValue<R> {
-  return useSyncExternalStore(
+  const session = useSyncExternalStore(
     subscribe,
     () => state,
     () => state,
   );
+  const error = useAuthError();
+  return { ...session, error };
 }