Sign in with wallet

import { signInMethodFor } from "@passage-cl/react/universal";

const clientCreds = await passage.auth.clientCredentials();
const offers = await passage.offers.list(clientCreds);
const requirements = await passage.requirements.forOffer(offerId, clientCreds);

// "wallet" or "coinlist"
const signIn = signInMethodFor(requirements[optionId] ?? []);

// app/api/coinlist/wallet/challenge/route.ts
import { passageServer } from "@/lib/passage-server";
import { isRateLimited } from "@/lib/rate-limit";
import {
  type ChallengedWallet,
  isFromThisSite,
  rememberChallenge,
} from "@/lib/wallet-challenge-binding";
import { type NextRequest, NextResponse } from "next/server";

const STATEMENT = "Sign in to Example with your wallet.";

export async function POST(request: NextRequest) {
  if (!isFromThisSite(request)) {
    return new NextResponse(null, { status: 403 });
  }
  if (isRateLimited(request)) {
    return new NextResponse(null, { status: 429 });
  }

  const { walletAddress, chain } = (await request.json()) as ChallengedWallet;
  // A challenge stores no session, so this response is never sent.
  const { message } = await passageServer(new NextResponse()).auth.walletChallenge({
    walletAddress,
    chain,
    statement: STATEMENT,
  });
  return rememberChallenge(NextResponse.json({ message }), { walletAddress, chain });
}

// app/api/coinlist/wallet/complete/route.ts
import { passageServer } from "@/lib/passage-server";
import {
  forgetChallenge,
  isFromChallengingBrowser,
} from "@/lib/wallet-challenge-binding";
import type { WalletSignInGrant } from "@passage-cl/react/universal";
import { type NextRequest, NextResponse } from "next/server";

export async function POST(request: NextRequest) {
  const { walletAddress, chain, signature } =
    (await request.json()) as WalletSignInGrant;
  if (!isFromChallengingBrowser(request, { walletAddress, chain })) {
    return new NextResponse(null, { status: 403 });
  }

  const response = NextResponse.json({ ok: true });
  await passageServer(response).auth.completeWalletSignIn({
    walletAddress,
    chain,
    signature,
  });
  return forgetChallenge(response);
}

// app/providers.tsx
"use client";

import { PassageProvider } from "@passage-cl/react";
import type {
  ClientConfig,
  WalletConnection,
  WalletSignInConfig,
} from "@passage-cl/react";
import {
  chainFromId,
  ClientId,
  EvmWalletAddress,
  RedirectUri,
} from "@passage-cl/react/universal";
import type {
  EthereumChain,
  SignInMethod,
  SiweMessage,
} from "@passage-cl/react/universal";
import { useRouter } from "next/navigation";
import { useAccount, useDisconnect } from "wagmi";

// Module scope: the provider builds a new client whenever `config` changes
// identity, so do not rebuild it on every render.
const config: ClientConfig = {
  clientId: ClientId(process.env.NEXT_PUBLIC_COINLIST_CLIENT_ID!),
  redirectUri: RedirectUri(process.env.NEXT_PUBLIC_COINLIST_REDIRECT_URI!),
  getAccessToken: async () => {
    const res = await fetch("/api/coinlist/oauth/access-token", {
      credentials: "include",
    });
    if (res.status === 204) return null;
    if (!res.ok) {
      throw new Error("GET /api/coinlist/oauth/access-token failed");
    }
    const data = (await res.json()) as {
      value: string;
      expiresAt: string;
      signInMethod: SignInMethod;
    };
    return { ...data, expiresAt: new Date(data.expiresAt) };
  },
};

async function post(path: string, body?: unknown): Promise<Response> {
  const res = await fetch(path, {
    method: "POST",
    credentials: "include",
    headers: { "content-type": "application/json" },
    body: JSON.stringify(body ?? {}),
  });
  if (!res.ok) throw new Error(`POST ${path} failed`);
  return res;
}

// Each one resolves on success and throws on any failure.
const walletRequests: Pick<WalletSignInConfig, "challenge" | "complete"> = {
  challenge: async (params) => {
    const res = await post("/api/coinlist/wallet/challenge", params);
    return (await res.json()) as { message: SiweMessage };
  },
  complete: async (grant) => {
    await post("/api/coinlist/wallet/complete", grant);
  },
};

function sdkChain(chainId: number): EthereumChain | null {
  try {
    return chainFromId(String(chainId));
  } catch {
    return null;
  }
}

function useWalletConnection(): WalletConnection {
  const { address, chainId, status } = useAccount();
  // wagmi reconnects the stored wallet after a reload. Reported as
  // `disconnected`, that would sign the user out on every reload.
  if (status === "connecting" || status === "reconnecting") {
    return { type: "connecting" };
  }
  const chain = chainId === undefined ? null : sdkChain(chainId);
  if (status !== "connected" || !address || !chain) {
    return { type: "disconnected" };
  }
  return { type: "connected", address: EvmWalletAddress(address), chain };
}

export function Providers({ children }: { children: React.ReactNode }) {
  const connection = useWalletConnection();
  const { disconnect } = useDisconnect();
  const router = useRouter();
  return (
    <PassageProvider
      config={config}
      walletSignIn={{
        ...walletRequests,
        signOut: async () => {
          disconnect();
          await post("/api/coinlist/oauth/logout");
          // Server Components read the cleared cookie only on a refresh.
          router.refresh();
        },
        connection,
      }}
    >
      {children}
    </PassageProvider>
  );
}

"use client";

import { useWalletSignIn } from "@passage-cl/react";
import { EvmWalletAddress } from "@passage-cl/react/universal";
import { useRouter } from "next/navigation";
import { useAccount, useWalletClient } from "wagmi";

export function SignInWithWalletButton() {
  const { address } = useAccount();
  const { data: walletClient } = useWalletClient();
  const { state, signIn } = useWalletSignIn();
  const router = useRouter();

  if (!address || !walletClient) return null;

  const onClick = async () => {
    const result = await signIn({
      address: EvmWalletAddress(address),
      signMessage: (message) =>
        walletClient.signMessage({ account: address, message }),
    });
    // Server Components read the new session cookie only on a refresh.
    if (result.type === "signed-in") router.refresh();
  };

  return (
    <>
      <button disabled={state === "pending"} onClick={() => void onClick()}>
        {state === "pending" ? "Check your wallet..." : "Sign in with wallet"}
      </button>
      {state === "failed" && <p>Could not sign in with your wallet. Try again.</p>}
    </>
  );
}