Sign In With Ethereum

npm install @coinbase/cdp-react @coinbase/cdp-hooks @coinbase/cdp-core @base-org/account

import { CDPReactProvider, AuthButton, type Config } from "@coinbase/cdp-react";

const config: Config = {
  projectId: "your-project-id",
  appName: "My App",
  appLogoUrl: "https://picsum.photos/64",
  ethereum: {
    createOnLogin: "smart",
  },
  authMethods: ["email", "siwe:base"],
};

function App() {
  return (
    <CDPReactProvider config={config}>
      <AuthButton />
    </CDPReactProvider>
  );
}

import { useSignInWithSiwe, useVerifySiweSignature } from '@coinbase/cdp-hooks';

function SignInWithEthereum({ walletClient }) {
  const { signInWithSiwe } = useSignInWithSiwe();
  const { verifySiweSignature } = useVerifySiweSignature();

  const handleSignIn = async () => {
    const address = walletClient.account.address;

    // Step 1: Request the challenge message
    const { message, flowId } = await signInWithSiwe({
      address,
      chainId: 8453, // Base mainnet — use the chain the user is signing on
      domain: window.location.hostname,
      uri: window.location.origin,
    });

    // Step 2: Ask the user's wallet to sign the message
    const signature = await walletClient.signMessage({ message });

    // Step 3: Verify the signature and complete sign-in
    const { user, isNewUser } = await verifySiweSignature({ flowId, signature });

    console.log(`Signed in as ${user.userId} (${isNewUser ? 'new' : 'returning'} user)`);
  };

  return <button onClick={handleSignIn}>Sign In With Ethereum</button>;
}

import { initialize, signInWithSiwe, verifySiweSignature } from '@coinbase/cdp-core';

await initialize({ projectId: 'your-project-id' });

async function signInWithEthereum(walletClient) {
  const address = walletClient.account.address;

  // Step 1: Request the challenge message
  const { message, flowId } = await signInWithSiwe({
    address,
    chainId: 8453,
    domain: window.location.hostname,
    uri: window.location.origin,
  });

  // Step 2: Sign the message with the user's wallet
  const signature = await walletClient.signMessage({ message });

  // Step 3: Verify the signature and complete sign-in
  const { user, isNewUser } = await verifySiweSignature({ flowId, signature });

  console.log(`Signed in as ${user.userId} (${isNewUser ? 'new' : 'returning'} user)`);
}