Skip to main content
Docs

<SignInWithMetamaskButton>

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

How to use the <SignInWithMetamaskButton> component

Basic usage

pages/index.js
import { SignInWithMetamaskButton } from '@clerk/nextjs'

export default function Home() {
  return (
    <div>
      <SignInWithMetamaskButton />
    </div>
  )
}
example.js
import { SignInWithMetamaskButton } from '@clerk/clerk-react'

export default function Example() {
  return (
    <div>
      <SignInWithMetamaskButton />
    </div>
  )
}
pages/index.js
import { SignInWithMetamaskButton } from '@clerk/remix'

export default function Home() {
  return (
    <div>
      <SignInWithMetamaskButton />
    </div>
  )
}
example.vue
<script setup>
import { SignInWithMetamaskButton } from '@clerk/vue'
</script>

<template>
  <div>
    <SignInWithMetamaskButton />
  </div>
</template>

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.

pages/index.js
import { SignInWithMetamaskButton } from '@clerk/nextjs'

export default function Home() {
  return (
    <div>
      <SignInWithMetamaskButton mode="modal">
        <button>Custom sign in button</button>
      </SignInWithMetamaskButton>
    </div>
  )
}
example.js
import { SignInWithMetamaskButton } from '@clerk/clerk-react'

export default function Example() {
  return (
    <div>
      <SignInWithMetamaskButton mode="modal">
        <button>Custom sign in button</button>
      </SignInWithMetamaskButton>
    </div>
  )
}
pages/index.js
import { SignInWithMetamaskButton } from '@clerk/remix'

export default function Home() {
  return (
    <div>
      <SignInWithMetamaskButton mode="modal">
        <button>Custom sign in button</button>
      </SignInWithMetamaskButton>
    </div>
  )
}
example.vue
<script setup>
import { SignInWithMetamaskButton } from '@clerk/vue'
</script>

<template>
  <div>
    <SignInWithMetamaskButton mode="modal">
      <button>Custom sign in button</button>
    </SignInWithMetamaskButton>
  </div>
</template>

Feedback

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

Last updated on