Sign in with Ethereum Button

The Sign in with Ethereum (SIWE) Button component provides a secure authentication method allowing users to sign in using their Ethereum wallet. It implements the Sign in with Ethereum standard for decentralized authentication.

The component features:

Ethereum wallet-based authentication
Customizable authentication message
Loading states during signing

Add to your project

import { SignInWithEthereum } from 'ethereum-identity-kit'
 
export default function LoginPage() {
  const handleVerifySignature = async (message: string, nonce: string, signature: string) => {
    // Verify signature on your backend
    const response = await fetch('/api/verify-siwe', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ message, nonce, signature }),
    })
    return response.ok
  }
 
  const handleGetNonce = async () => {
    // Get nonce from your backend
    const response = await fetch('/api/siwe-nonce')
    const { nonce } = await response.json()
    return nonce
  }
 
  return (
    <SignInWithEthereum
      message="Sign in to access your account"
      verifySignature={handleVerifySignature}
      getNonce={handleGetNonce}
      onSignInSuccess={() => console.log('Sign in successful!')}
      onSignInError={(error) => console.error('Sign in failed:', error)}
    />
  )
}

Try it out! - https://playground.ethidentitykit.com/?path=/story/molecules-sign-in-with-ethereum--button

Parameters

Parameter	Description	Required	Default Value
`verifySignature`	Function to verify the signature on your backend. Receives message, nonce, and signature as params.	Yes	-
`getNonce`	Function to get a nonce from your backend for security.	Yes	-
`message`	The message to display to the user during authentication.	No	-
`onSignInSuccess`	Callback function called when the user signs in successfully.	No	-
`onSignInError`	Callback function called when sign in fails. Receives error as parameter.	No	-
`darkMode`	Enables dark mode styling for the button.	No	false
`expirationTime`	The expiration time of the nonce in minutes.	No	5

Backend Integration

To use the Sign in with Ethereum button, you’ll need to implement two backend endpoints:

Nonce Generation Endpoint

// Example: /api/siwe-nonce
export async function GET() {
  const nonce = generateNonce() // Generate a secure random nonce
  // Store nonce in session/database for verification
  return Response.json({ nonce })
}

Signature Verification Endpoint

// Example: /api/verify-siwe
export async function POST(request: Request) {
  const { message, signature } = await request.json()
 
  try {
    const siweMessage = new SiweMessage(message)
    const result = await siweMessage.verify({ signature })
 
    if (result.success) {
      // Create user session, JWT, etc.
      return Response.json({ success: true })
    }
  } catch (error) {
    return Response.json({ error: 'Invalid signature' }, { status: 400 })
  }
}

⚠️

Both verifySignature and getNonce functions are required for the component to work properly. Ensure your backend properly validates signatures and manages nonces to maintain security.

The component automatically handles wallet connection prompts and message signing. The button text changes to “Signing Message…” during the authentication process and is disabled to prevent multiple simultaneous attempts.

The component uses predefined styles and can be further customized using CSS classes. The appearance can be manually toggled between light and dark modes using the darkMode prop, however, if you have a dark class applied in your application, the component will automatically use that.

Notifications useProfileDetails