@multiplatform.one/web3 7.26.0 → 7.28.0

package/src/keycloak/KeycloakWalletLogin.spec.tsx

@@ -3,7 +3,11 @@ import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/re
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { createConfig, createStorage, http } from "wagmi";
 import { mainnet } from "wagmi/chains";
+import { connect } from "wagmi/actions";
 import { mock } from "wagmi/connectors";
+import { verifyMessage } from "viem";
+import { resetConnectIntentPage, setConnectIntent } from "../connectkit/siwe/connectIntent";
+import { createMockConnector } from "../providers/mockConnector";
 import { KeycloakWalletLogin, type KeycloakWalletLoginProps } from "./KeycloakWalletLogin";
 
 const ANDROID_UA =
@@ -26,15 +30,25 @@ function memoryStorage() {
     getItem: (key: string) => map.get(key) ?? null,
     setItem: (key: string, value: string) => void map.set(key, value),
     removeItem: (key: string) => void map.delete(key),
+    clear: () => map.clear(),
+    entries: () => [...map],
   };
 }
 
-function makeConfig() {
+/** `defaultConnected` stands for a wallet whose earlier connect this page reloads into. */
+function makeConfig(storage = memoryStorage(), defaultConnected = false) {
   return createConfig({
     chains: [mainnet],
-    connectors: [mock({ accounts: [ACCOUNT], features: {} })],
+    connectors: [mock({ accounts: [ACCOUNT], features: { reconnect: true, defaultConnected } })],
     transports: { [mainnet.id]: http() },
-    storage: createStorage({ storage: memoryStorage() }),
+    storage: createStorage({ storage }),
+  });
+}
+
+function setUserActivation(isActive: boolean | undefined) {
+  Object.defineProperty(window.navigator, "userActivation", {
+    value: isActive === undefined ? undefined : { isActive },
+    configurable: true,
   });
 }
 
@@ -55,17 +69,24 @@ function renderLogin(props: KeycloakWalletLoginProps = {}) {
 }
 
 const nonceRequests: string[] = [];
+const rpcBodies: string[] = [];
 
 beforeEach(() => {
   nonceRequests.length = 0;
+  rpcBodies.length = 0;
+  // Node 25 ships a localStorage global without methods; the page has a real one.
+  vi.stubGlobal("localStorage", memoryStorage());
   vi.stubGlobal(
     "fetch",
-    vi.fn(async (input: RequestInfo | URL) => {
+    vi.fn(async (input: RequestInfo | URL, init?: RequestInit) => {
       const url = String(input);
       if (url.endsWith("/nonce")) {
         nonceRequests.push(url);
         return new Response("nonce123abc");
       }
+      // The mock connector sends what it does not answer itself, a signature among them.
+      const body = init?.body ?? (input instanceof Request ? await input.clone().text() : "");
+      if (body) rpcBodies.push(String(body));
       return new Response("not found", { status: 404 });
     }),
   );
@@ -76,8 +97,10 @@ afterEach(() => {
   vi.unstubAllGlobals();
   vi.restoreAllMocks();
   window.sessionStorage.clear();
+  resetConnectIntentPage();
   document.querySelectorAll("form").forEach((form) => form.remove());
   setUserAgent(DESKTOP_UA);
+  setUserActivation(undefined);
 });
 
 describe("KeycloakWalletLogin mobile.preferredConnector", () => {
@@ -142,6 +165,46 @@ describe("KeycloakWalletLogin gpg", () => {
   });
 });
 
+describe("KeycloakWalletLogin wallet sign-in", () => {
+  it("a picked wallet signs and the credential posts to the login action", async () => {
+    setUserAgent(DESKTOP_UA);
+    const submit = vi
+      .spyOn(HTMLFormElement.prototype, "submit")
+      .mockImplementation(function (this: HTMLFormElement) {});
+    const config = createConfig({
+      chains: [mainnet],
+      connectors: [createMockConnector()],
+      transports: { [mainnet.id]: http() },
+      storage: createStorage({ storage: memoryStorage() }),
+    });
+    renderLogin({
+      wagmiConfig: config,
+      target: { action: LOGIN_ACTION },
+      domain: "kc.example.com",
+    });
+
+    fireEvent.click(document.getElementById("mpo-wallet-login") as HTMLButtonElement);
+    fireEvent.click(await screen.findByText("Mock Wallet (E2E)"));
+
+    await waitFor(() => expect(submit).toHaveBeenCalledTimes(1));
+    const form = submit.mock.contexts[0] as HTMLFormElement;
+    expect(form.action).toBe(LOGIN_ACTION);
+    const field = (name: string) =>
+      (form.querySelector(`input[name="${name}"]`) as HTMLInputElement | null)?.value ?? "";
+    const message = atob(field("password"));
+    const address = config.state.connections.get(config.state.current!)!.accounts[0];
+    expect(message.split("\n").slice(0, 2)).toEqual([
+      "kc.example.com wants you to sign in with your Ethereum account:",
+      address,
+    ]);
+    expect(message).toContain("Nonce: nonce123abc");
+    expect(
+      await verifyMessage({ address, message, signature: field("username") as `0x${string}` }),
+    ).toBe(true);
+    expect(nonceRequests).toEqual(["https://kc.example.com/realms/main/wallet/nonce"]);
+  });
+});
+
 describe("KeycloakWalletLogin target", () => {
   it("{ action } posts the credential to a keycloakify page's login action", async () => {
     const submit = vi
@@ -166,3 +229,147 @@ describe("KeycloakWalletLogin target", () => {
     expect(nonceRequests).toEqual(["https://kc.example.com/realms/main/wallet/nonce"]);
   });
 });
+
+describe("KeycloakWalletLogin after the page reloads during the wallet trip", () => {
+  const signInStep = () => screen.queryByText("Sign In With Wallet");
+  const signRequests = () =>
+    rpcBodies.filter((body) => /"method":"(eth_sign|personal_sign)"/.test(body)).length;
+
+  /**
+   * The next document in the tab: Android Chrome restores a tab it killed as
+   * back_forward. A killed tab runs no unmount, so localStorage stays as it was.
+   */
+  function nextPage(type: "back_forward" | "navigate") {
+    const local = localStorage as unknown as ReturnType<typeof memoryStorage>;
+    const kept = local.entries();
+    cleanup();
+    local.clear();
+    for (const [key, value] of kept) local.setItem(key, value);
+    window.sessionStorage.clear();
+    resetConnectIntentPage();
+    vi.spyOn(performance, "getEntriesByType").mockReturnValue([{ type }] as never);
+  }
+
+  async function connectOnPhoneThenLoseThePage() {
+    setUserAgent(ANDROID_UA);
+    setUserActivation(false);
+    const wagmiStorage = memoryStorage();
+    const first = renderLogin({
+      mobile: { preferredConnector: "mock" },
+      wagmiConfig: makeConfig(wagmiStorage),
+    });
+    fireEvent.click(first.walletButton);
+    await waitFor(() => expect(first.config.state.status).toBe("connected"));
+    await waitFor(() => expect(signInStep()).not.toBeNull());
+    // Chrome kills the tab (or the whole browser) while MetaMask is in front.
+    nextPage("back_forward");
+    return wagmiStorage;
+  }
+
+  async function comeBackConnected() {
+    const wagmiStorage = await connectOnPhoneThenLoseThePage();
+    const again = renderLogin({
+      mobile: { preferredConnector: "mock" },
+      wagmiConfig: makeConfig(wagmiStorage, true),
+    });
+    await waitFor(() => expect(again.config.state.status).toBe("connected"));
+    await waitFor(() => expect(signInStep()).not.toBeNull());
+  }
+
+  it("on the same page, the sign-in step's tap sends one signature request", async () => {
+    setUserAgent(ANDROID_UA);
+    setUserActivation(false);
+    const { walletButton } = renderLogin({ mobile: { preferredConnector: "mock" } });
+    fireEvent.click(walletButton);
+    await waitFor(() => expect(signInStep()).not.toBeNull());
+    setUserActivation(true);
+
+    fireEvent.click(screen.getByText("Sign In"));
+
+    await waitFor(() => expect(signRequests()).toBe(1));
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    expect(signRequests()).toBe(1);
+    expect(signInStep()).not.toBeNull();
+  });
+
+  it("a phone that comes back connected lands on the sign-in step, not the bare page", async () => {
+    await comeBackConnected();
+
+    expect(screen.getByText("Sign In")).not.toBeNull();
+    expect(signRequests()).toBe(0);
+  });
+
+  it("the sign-in step's tap sends one signature request and keeps the step open", async () => {
+    await comeBackConnected();
+    setUserActivation(true);
+
+    fireEvent.click(screen.getByText("Sign In"));
+
+    await waitFor(() => expect(signRequests()).toBe(1));
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    expect(signRequests()).toBe(1);
+    expect(signInStep()).not.toBeNull();
+  });
+
+  it("closing the sign-in step sends no signature and ends the intent", async () => {
+    await comeBackConnected();
+    setUserActivation(true);
+
+    fireEvent.click(screen.getByLabelText("Close"));
+
+    await waitFor(() => expect(localStorage.getItem("wallet:connect-intent")).toBeNull());
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    expect(signRequests()).toBe(0);
+  });
+
+  it("a phone that comes back without the connect's answer gets the wallet list", async () => {
+    const wagmiStorage = await connectOnPhoneThenLoseThePage();
+
+    // The stored connection reconnects and fails: reconnecting, then disconnected.
+    const again = makeConfig(wagmiStorage);
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    renderLogin({ mobile: { preferredConnector: "mock" }, wagmiConfig: again });
+
+    await screen.findByText("Mock Connector", undefined, { timeout: 3000 });
+    expect(signInStep()).toBeNull();
+  });
+
+  it("a phone whose tab died before the connect answered gets the wallet list", async () => {
+    setUserAgent(ANDROID_UA);
+    // The tap set the intent; Chrome killed the tab before wagmi stored a connection.
+    setConnectIntent();
+    nextPage("back_forward");
+
+    renderLogin({ mobile: { preferredConnector: "mock" } });
+
+    await screen.findByText("Mock Connector", undefined, { timeout: 3000 });
+    expect(signInStep()).toBeNull();
+  });
+
+  it("a new page, not a restored one, leaves an unfinished connect alone", async () => {
+    setUserAgent(ANDROID_UA);
+    setConnectIntent();
+    nextPage("navigate");
+
+    renderLogin({ mobile: { preferredConnector: "mock" } });
+
+    await new Promise((resolve) => setTimeout(resolve, 1_200));
+    expect(screen.queryByText("Mock Connector")).toBeNull();
+    expect(signInStep()).toBeNull();
+  });
+
+  it("a cold visit with a wallet still connected and no login started shows no modal", async () => {
+    setUserAgent(ANDROID_UA);
+    setUserActivation(false);
+    const wagmiStorage = memoryStorage();
+    const first = renderLogin({ wagmiConfig: makeConfig(wagmiStorage) });
+    await connect(first.config, { connector: first.config.connectors[0] });
+    nextPage("back_forward");
+
+    const again = renderLogin({ wagmiConfig: makeConfig(wagmiStorage, true) });
+    await waitFor(() => expect(again.config.state.status).toBe("connected"));
+    await new Promise((resolve) => setTimeout(resolve, 1_200));
+    expect(signInStep()).toBeNull();
+    expect(screen.queryByText("Mock Connector")).toBeNull();
+  });
+});

package/src/keycloak/keycloakWallet.spec.ts

@@ -1,5 +1,15 @@
-import { describe, expect, it } from "vitest";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  BITCOIN_CHAIN_ID,
+  SOLANA_CHAIN_ID,
+  SUI_CHAIN_ID,
+} from "../connectkit/connectors/syntheticChains";
+import type { ClientFamily } from "../clients/types";
+import { signInWithConnection } from "../core/signIn";
+import { createConnectionStore } from "../core/store";
+import { btc, eth, gpg, sol, sui } from "../families";
 import { buildWalletMessage } from "../message";
+import { testDriver } from "../../tests/core/testDriver";
 import {
   deriveKeycloakFromLocation,
   keycloakWallet,
@@ -192,6 +202,76 @@ describe("keycloakWallet", () => {
   });
 });
 
+describe("keycloakWallet signInConfig", () => {
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  const cases: [string, ClientFamily, string, number | string, number][] = [
+    ["eth", "evm", "0xd8da6bf26964af9d7eed9e03e53415d37aa96045", 137, 137],
+    [
+      "sol",
+      "solana",
+      "7EcDhSYGxXyscszYEp35KHN8vvw3svAuLKTzXwCFLtV",
+      "solana:mainnet",
+      SOLANA_CHAIN_ID,
+    ],
+    ["sui", "sui", `0x${"ab".repeat(32)}`, "sui:mainnet", SUI_CHAIN_ID],
+    ["btc", "bitcoin", "bc1qar0srrr7xfkvy5l643lydnw9re59gtzzwf5mdq", "bitcoin", BITCOIN_CHAIN_ID],
+  ];
+
+  it.each(cases)(
+    "%s: the store's sign-in signs the bytes the SIWE path signed",
+    async (id, clientFamily, address, chainId, syntheticChainId) => {
+      vi.useFakeTimers({ toFake: ["Date"] });
+      vi.setSystemTime(new Date("2026-09-28T12:00:00.000Z"));
+      const server = nonceServer();
+      const kc = keycloakWallet({
+        baseUrl: "https://kc",
+        realm: "main",
+        domain: "app.example.com",
+        uri: "https://app.example.com",
+        fetch: server.fetch,
+      });
+      const driver = testDriver(clientFamily, [{ id: "w", name: "Wallet" }], {
+        w: { address, chainId },
+      });
+      const family = { eth, sol, sui, btc }[id as "eth" | "sol" | "sui" | "btc"]();
+      const store = createConnectionStore({
+        storage: null,
+        families: [{ ...family, driver: () => driver }, gpg()],
+      });
+      await store.connect(id, "w");
+      const onSign = vi.fn(async () => true);
+
+      const credential = await signInWithConnection(store, kc.signInConfig(onSign));
+
+      const siwe = await kc.siweConfig(onSign).createMessage({
+        nonce: "nonce-1",
+        address: address as `0x${string}`,
+        chainId: syntheticChainId,
+      });
+      expect(credential.message).toBe(siwe);
+      expect(credential).toEqual(
+        toCredentials({ signature: `${clientFamily}:${siwe}`, message: siwe }),
+      );
+      expect(onSign).toHaveBeenCalledExactlyOnceWith(credential);
+    },
+  );
+
+  it("hands the provider the shared nonce and the given onSign, and no domain it was not given", async () => {
+    const server = nonceServer();
+    const kc = keycloakWallet({ baseUrl: "https://kc", realm: "main", fetch: server.fetch });
+    const onSign = async () => true;
+    const config = kc.signInConfig(onSign);
+    expect(config.onSign).toBe(onSign);
+    expect(config.subscribeNonceReset).toBe(kc.subscribeNonceReset);
+    expect(await config.getNonce()).toBe(await kc.gpgConfig(onSign).getNonce());
+    expect(server.requests).toHaveLength(1);
+    expect("domain" in config || "uri" in config).toBe(false);
+  });
+});
+
 describe("toCredentials", () => {
   it("base64s the UTF-8 message without btoa", () => {
     const message = "héllo ✓";

package/src/keycloak/keycloakWallet.ts

@@ -2,6 +2,7 @@ import { sha256, type Address } from "viem";
 import { bytesToBase64 } from "../bridge/base64";
 import { createWalletMessage } from "../connectkit/connectors/createWalletMessage";
 import type { SIWEConfig } from "../connectkit/siwe/SIWEContext";
+import type { SignInConfig } from "../core/signIn";
 import { buildWalletMessage } from "../message";
 import { browserFlow, type BrowserFlowOptions } from "./browserFlow";
 import { createDirectGrant, type DirectGrant, type DirectGrantOptions } from "./directGrant";
@@ -71,11 +72,23 @@ export interface KeycloakWallet {
    * second sign-in never signs a nonce the server has already dropped.
    */
   subscribeNonceReset(listener: () => void): () => void;
-  /** `SIWEConfig.createMessage`, with this wallet's domain and uri. */
+  /**
+   * `SIWEConfig.createMessage`, with this wallet's domain and uri.
+   * @deprecated Goes in 8.0.0 with SIWEProvider; `signInConfig` builds the connected family's message.
+   */
   createMessage(args: { nonce: string; address: string; chainId: number }): string;
   /** `GpgConfig.buildMessage`, with this wallet's domain and uri. */
   gpgMessage(args: { nonce: string }): string;
-  /** Props for `<SIWEProvider>` that sign through `onSign` (a browser flow, direct grant or registration). */
+  /**
+   * Props for `<SignInProvider>` that sign through `onSign` (a browser flow,
+   * direct grant or registration): the connected family's own message, with
+   * this wallet's domain and uri, signed by the connection store's client.
+   */
+  signInConfig(onSign: OnSign): SignInConfig;
+  /**
+   * Props for `<SIWEProvider>` that sign through `onSign`.
+   * @deprecated SIWEProvider goes in 8.0.0; mount `<SignInProvider {...kc.signInConfig(onSign)}>`.
+   */
   siweConfig(onSign: OnSign): SIWEConfig;
   /** Props for `<GpgProvider>` that sign through `onSign`. */
   gpgConfig(onSign: OnSign): {
@@ -206,6 +219,15 @@ export function keycloakWallet(options: KeycloakWalletOptions): KeycloakWallet {
     gpgMessage({ nonce: value }) {
       return buildWalletMessage("gpg", { nonce: value, domain: options.domain, uri: options.uri });
     },
+    signInConfig(onSign) {
+      return {
+        getNonce: () => kc.getNonce(),
+        onSign,
+        subscribeNonceReset: kc.subscribeNonceReset,
+        ...(options.domain === undefined ? {} : { domain: options.domain }),
+        ...(options.uri === undefined ? {} : { uri: options.uri }),
+      };
+    },
     siweConfig(onSign) {
       return {
         getNonce: () => kc.getNonce(),

package/src/keycloak/useDirectLogin.spec.tsx

@@ -1,9 +1,14 @@
 // @vitest-environment jsdom
 import { act, renderHook } from "@testing-library/react";
 import type { ReactNode } from "react";
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi } from "vitest";
+import { testDriver } from "../../tests/core/testDriver";
 import { fakeKeycloak, json } from "../../tests/fakeKeycloak";
 import { SIWEContext, StatusState, type SIWEContextValue } from "../connectkit/siwe/SIWEContext";
+import { ConnectionProvider } from "../core/react";
+import { SignInProvider } from "../core/signIn";
+import { createConnectionStore } from "../core/store";
+import { eth } from "../families";
 import { keycloakWallet } from "./keycloakWallet";
 import { ProfileIncompleteError, type OnSign } from "./types";
 import { useDirectLogin } from "./useDirectLogin";
@@ -18,7 +23,12 @@ function setup(tokenStatus = 200) {
           ? json({ error: "invalid_grant", error_description: "Account is not fully set up" }, 400)
           : json({ error: "invalid_grant", error_description: "Invalid user credentials" }, 401),
   });
-  const kc = keycloakWallet({ baseUrl: "https://kc", realm: "main", fetch: server.fetch });
+  const kc = keycloakWallet({
+    baseUrl: "https://kc",
+    realm: "main",
+    domain: "app.example.com",
+    fetch: server.fetch,
+  });
   const grant = kc.directGrant({ clientId: "app" });
   const siwe = (onSign: OnSign, signIn?: () => Promise<unknown>) =>
     ({
@@ -40,7 +50,24 @@ function setup(tokenStatus = 200) {
     ({ children }: { children: ReactNode }) => (
       <SIWEContext.Provider value={value}>{children}</SIWEContext.Provider>
     );
-  return { kc, grant, siwe, wrapper };
+  const driver = testDriver("evm", [{ id: "mm", name: "MetaMask" }], {
+    mm: { address: "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045", chainId: 1 },
+  });
+  const store = createConnectionStore({
+    storage: null,
+    families: [{ ...eth(), driver: () => driver }],
+  });
+  const onStore =
+    (onSign: OnSign, legacy?: SIWEContextValue) =>
+    ({ children }: { children: ReactNode }) => {
+      const tree = (
+        <ConnectionProvider store={store}>
+          <SignInProvider {...kc.signInConfig(onSign)}>{children}</SignInProvider>
+        </ConnectionProvider>
+      );
+      return legacy ? <SIWEContext.Provider value={legacy}>{tree}</SIWEContext.Provider> : tree;
+    };
+  return { server, kc, grant, siwe, wrapper, store, onStore };
 }
 
 describe("useDirectLogin", () => {
@@ -104,9 +131,55 @@ describe("useDirectLogin", () => {
     await expect(result.current.signIn()).rejects.toThrow(/not this grant's/);
   });
 
+  it("signs on the connection store under a SignInProvider, ahead of a SIWEProvider", async () => {
+    const { server, grant, siwe, store, onStore } = setup();
+    await store.connect("eth", "mm");
+    const legacy = vi.fn(async () => false);
+    const { result } = renderHook(() => useDirectLogin(grant), {
+      wrapper: onStore(grant.onSign, siwe(grant.onSign, legacy)),
+    });
+    let tokens: unknown;
+    await act(async () => {
+      tokens = await result.current.signIn();
+    });
+    expect(legacy).not.toHaveBeenCalled();
+    expect(tokens).toMatchObject({ accessToken: "at" });
+    expect(result.current.status).toBe("signed-in");
+    const body = new URLSearchParams(server.requests.find((r) => r.url.endsWith("/token"))?.body);
+    const message = Buffer.from(body.get("password") ?? "", "base64").toString("utf8");
+    expect(message.split("\n")[0]).toBe(
+      "app.example.com wants you to sign in with your Ethereum account:",
+    );
+    expect(body.get("username")).toBe(`evm:${message}`);
+  });
+
+  it("signs through the SIWEProvider wired to the grant under a SignInProvider wired to another flow", async () => {
+    const { grant, siwe, onStore } = setup();
+    const legacy = vi.fn(async () => undefined);
+    const { result } = renderHook(() => useDirectLogin(grant), {
+      wrapper: onStore(async () => true, siwe(grant.onSign, legacy)),
+    });
+    await act(async () => {
+      await result.current.signIn();
+    });
+    expect(legacy).toHaveBeenCalledTimes(1);
+  });
+
+  it("refuses a SignInProvider wired to some other onSign", async () => {
+    const { grant, onStore } = setup();
+    const { result } = renderHook(() => useDirectLogin(grant), {
+      wrapper: onStore(async () => true),
+    });
+    await expect(result.current.signIn()).rejects.toThrow(
+      /SignInProvider's onSign is not this grant's/,
+    );
+  });
+
   it("needs a SIWEProvider", async () => {
     const { grant } = setup();
     const { result } = renderHook(() => useDirectLogin(grant));
-    await expect(result.current.signIn()).rejects.toThrow(/inside a SIWEProvider/);
+    await expect(result.current.signIn()).rejects.toThrow(
+      /inside a SignInProvider or SIWEProvider/,
+    );
   });
 });

package/src/keycloak/useDirectLogin.ts

@@ -1,5 +1,6 @@
 import { useCallback, useContext, useState, useSyncExternalStore } from "react";
 import { SIWEContext } from "../connectkit/siwe/SIWEContext";
+import { useOptionalSignIn } from "../core/signIn";
 import type { DirectGrant } from "./directGrant";
 import { ProfileIncompleteError, type KeycloakTokens } from "./types";
 
@@ -16,8 +17,9 @@ export interface UseDirectLoginResult {
   tokens: KeycloakTokens | null;
   error: Error | null;
   /**
-   * Sign in with the connected wallet through SIWEProvider and exchange the
-   * signature for tokens. Resolves null when the wallet or Keycloak refused.
+   * Sign in with the connected wallet through the SignInProvider (or a
+   * deprecated SIWEProvider) and exchange the signature for tokens. Resolves
+   * null when the wallet or Keycloak refused.
    */
   signIn(): Promise<KeycloakTokens | null>;
   refresh(): Promise<KeycloakTokens>;
@@ -25,12 +27,17 @@ export interface UseDirectLoginResult {
 }
 
 /**
- * Direct (browserless) wallet login: SIWEProvider signs, the grant trades the
- * signature for Keycloak tokens. Mount it under
- * `<SIWEProvider {...kc.siweConfig(grant.onSign)}>`; every login attempt resets
- * the kc nonce, which refetches it in SIWEProvider and GpgProvider alike.
+ * Direct (browserless) wallet login: the connection store's wallet signs, the
+ * grant trades the signature for Keycloak tokens. Mount it under
+ * `<SignInProvider {...kc.signInConfig(grant.onSign)}>`; under the deprecated
+ * `<SIWEProvider {...kc.siweConfig(grant.onSign)}>` it signs through that.
+ * With both, it signs through the one wired to this grant's onSign, the
+ * SignInProvider when both are.
+ * Every login attempt resets the kc nonce, which refetches it in SIWEProvider
+ * and GpgProvider alike.
  */
 export function useDirectLogin(grant: DirectGrant): UseDirectLoginResult {
+  const storeSignIn = useOptionalSignIn();
   const siwe = useContext(SIWEContext);
   const state = useSyncExternalStore(
     grant.subscribe,
@@ -40,18 +47,23 @@ export function useDirectLogin(grant: DirectGrant): UseDirectLoginResult {
   const [signing, setSigning] = useState(false);
 
   const signIn = useCallback(async () => {
-    if (!siwe) throw new Error("useDirectLogin must be used inside a SIWEProvider");
-    if (siwe.onSign !== grant.onSign) {
-      throw new Error("useDirectLogin: the SIWEProvider's onSign is not this grant's");
+    if (!storeSignIn && !siwe) {
+      throw new Error("useDirectLogin must be used inside a SignInProvider or SIWEProvider");
+    }
+    const signer = [storeSignIn, siwe].find((candidate) => candidate?.onSign === grant.onSign);
+    if (!signer) {
+      throw new Error(
+        `useDirectLogin: the ${storeSignIn ? "SignInProvider" : "SIWEProvider"}'s onSign is not this grant's`,
+      );
     }
     setSigning(true);
     try {
-      const result = await siwe.signIn();
+      const result = await signer.signIn();
       return result === false ? null : grant.tokens;
     } finally {
       setSigning(false);
     }
-  }, [siwe, grant]);
+  }, [storeSignIn, siwe, grant]);
 
   const status: DirectLoginStatus = signing
     ? "signing"

package/src/keycloak/useWalletLogin.spec.tsx

@@ -0,0 +1,52 @@
+// @vitest-environment happy-dom
+import { act, cleanup, render, waitFor } from "@testing-library/react";
+import { verifyMessage, type Address } from "viem";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { useConnection } from "../core/react";
+import type { SignInCredential } from "../core/signIn";
+import { Web3Provider } from "../providers/WalletProvider";
+import { useWalletLogin, type UseWalletLoginResult } from "./useWalletLogin";
+
+afterEach(() => {
+  cleanup();
+  window.sessionStorage.clear();
+});
+
+describe("useWalletLogin under a SignInProvider", () => {
+  it("reads the store's connection and signs through the SignInProvider, not wagmi's SIWE", async () => {
+    const onSign = vi.fn<(credential: SignInCredential) => boolean>(() => true);
+    const live: { login?: UseWalletLoginResult; address?: string | null } = {};
+    function Probe() {
+      live.login = useWalletLogin();
+      live.address = useConnection().address;
+      return null;
+    }
+    render(
+      <Web3Provider
+        config={{ appName: "wallet login on the store", families: ["eth"], mockWallet: true }}
+        signIn={{ getNonce: async () => "nonce-9", onSign, domain: "app.example.com" }}
+      >
+        <Probe />
+      </Web3Provider>,
+    );
+    // The mock wallet is always authorised, so wagmi restores it and the store takes it.
+    await waitFor(() => expect(live.login?.isConnected).toBe(true));
+    expect(live.login?.address).toBe(live.address);
+
+    await act(async () => {
+      await live.login!.login();
+    });
+
+    expect(onSign).toHaveBeenCalledTimes(1);
+    const [{ username, message }] = onSign.mock.calls[0];
+    expect(message).toContain("Nonce: nonce-9");
+    expect(
+      await verifyMessage({
+        address: live.address as Address,
+        message,
+        signature: username as `0x${string}`,
+      }),
+    ).toBe(true);
+    expect(live.login?.status).toBe("success");
+  });
+});