Sign in with Starknet

import { createStarknetSignInTypedData } from "@chipi-stack/backend";

const nonce = crypto.randomUUID().replaceAll("-", "");
const now = Math.floor(Date.now() / 1000);

const typedData = createStarknetSignInTypedData({
  domain: "app.example.com",
  uri: "https://app.example.com",
  address: "0x0123", // the address Bramble returned from wallet_requestAccounts
  nonce,
  issuedAt: now,
  expirationTime: now + 600,
});

type InjectedWallet = {
  id: string;
  request(call: { type: string; params?: unknown }): Promise<unknown>;
};
type WalletError = { code?: number; message?: string };

declare const signInButton: HTMLButtonElement;
declare function showMessage(text: string): void;

const SN_MAIN = "0x534e5f4d41494e";

// Bramble's codes, in words a user can act on.
const WALLET_ERRORS: Record<number, string> = {
  113: "You declined the request in Bramble.",
  114: "Bramble refused the request. Make sure it is on Starknet Mainnet, then try again.",
  163: "Bramble couldn't complete the request. Unlock it and check this site is connected.",
};

// Late injection: look now, then on `starknet#initialized`, polling as a fallback.
function waitForBramble(timeoutMs = 3000): Promise<InjectedWallet | null> {
  const found = () =>
    (window as unknown as { starknet_bramble?: InjectedWallet }).starknet_bramble ?? null;
  return new Promise((resolve) => {
    if (found()) return resolve(found());
    const done = () => {
      clearInterval(poll);
      clearTimeout(timer);
      window.removeEventListener("starknet#initialized", check);
      resolve(found());
    };
    const check = () => {
      if (found()) done();
    };
    window.addEventListener("starknet#initialized", check);
    const poll = setInterval(check, 100);
    const timer = setTimeout(done, timeoutMs);
  });
}

signInButton.onclick = async () => {
  const bramble = await waitForBramble();
  if (!bramble) return showMessage("Install Bramble to sign in with Starknet.");

  try {
    // 1. Mainnet only. This works before connecting and never prompts.
    // Bramble answers in hex; accept the short string too for other wallets.
    const chainId = (await bramble.request({ type: "wallet_requestChainId" })) as string;
    const onMainnet = chainId === "SN_MAIN" || (/^0x[0-9a-f]+$/i.test(chainId) && BigInt(chainId) === BigInt(SN_MAIN));
    if (!onMainnet) {
      return showMessage("Switch Bramble to Starknet Mainnet, then sign in again.");
    }

    // 2. Connect. Explicit params; the promise waits for the user's decision.
    const [address] = (await bramble.request({
      type: "wallet_requestAccounts",
      params: { silent_mode: false },
    })) as string[];
    if (!address) return showMessage("No Bramble account connected.");

    // 3. Your server issues the message for this address (step 1).
    const issued = await fetch("/api/siws/nonce", {
      method: "POST",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({ address }),
    });
    const { typedData } = (await issued.json()) as { typedData: unknown };

    // 4. Sign. Bramble shows the message and waits for the user.
    const signature = (await bramble.request({
      type: "wallet_signTypedData",
      params: typedData,
    })) as string[];

    // 5. A new account is not deployed yet: send its deployment data along.
    let deploymentData: unknown;
    try {
      deploymentData = await bramble.request({ type: "wallet_deploymentData" });
    } catch (err) {
      const code = (err as WalletError).code;
      // 115: already deployed, nothing to send. 116: Bramble can't derive it.
      if (code !== 115 && code !== 116) throw err;
    }

    // 6. Your server verifies (step 3).
    const verified = await fetch("/api/siws/verify", {
      method: "POST",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({ typedData, signature, deploymentData }),
    });
    const result = (await verified.json()) as { ok: boolean; reason?: string };
    if (!result.ok && result.reason === "ACCOUNT_NOT_DEPLOYED") {
      return showMessage("Make one transaction with this account first, then sign in.");
    }
    showMessage(result.ok ? "Signed in." : "Sign-in failed. Try again.");
  } catch (err) {
    const code = (err as WalletError).code;
    showMessage((code !== undefined && WALLET_ERRORS[code]) || "Sign-in failed. Try again.");
  }
};

import { verifyStarknetSignIn, type StarknetDeploymentData } from "@chipi-stack/backend";
import { RpcProvider, type TypedData } from "starknet";

declare const typedData: TypedData;
declare const signature: string[];
declare const nonce: string;
declare const deploymentData: StarknetDeploymentData | undefined;

const provider = new RpcProvider({ nodeUrl: "https://api.cartridge.gg/x/starknet/mainnet" });

const result = await verifyStarknetSignIn({
  typedData,
  signature,
  provider,
  expected: { domain: "app.example.com", uri: "https://app.example.com", nonce },
  deploymentData,
});

if (result.ok) {
  // result.address: 0x + 64 hex. Sign the user in, or link the address to the current user.
} else {
  // result.reason: WRONG_NONCE, EXPIRED, INVALID_SIGNATURE, ACCOUNT_NOT_DEPLOYED, ...
}