Skip to main content
Docs

<SignInWithMetamaskButton>

The <SignInWithMetamaskButton> component is used to complete a one-click, cryptographically-secure sign-in flow using MetaMask.

Usage

Basic usage

Note

This component can be used in Expo Web projects, but it isn't available in native environments (iOS or Android). For native apps, build a custom UI using Clerk hooks. See custom flows guides for details.

/app/page.web.tsx
import { SignInWithMetamaskButton } from '@clerk/clerk-expo/web'

export default function Home() {
  return <SignInWithMetamaskButton />
}

Custom usage

In some cases, you will want to use your own button, or button text. You can do that by wrapping your button in the <SignInWithMetamaskButton> component.

Note

This component can be used in Expo Web projects, but it isn't available in native environments (iOS or Android). For native apps, build a custom UI using Clerk hooks. See custom flows guides for details.

/app/page.web.tsx
import { SignInWithMetamaskButton } from '@clerk/clerk-expo/web'

export default function Home() {
  return (
    <SignInWithMetamaskButton mode="modal">
      <button>Custom sign in button</button>
    </SignInWithMetamaskButton>
  )
}

Feedback

What did you think of this content?
Edit this page on GitHub

Last updated on