<SignInWithMetamaskButton>
The <SignInWithMetamaskButton>
component is used to complete a one-click, cryptographically-secure sign-in flow using MetaMask.
Usage
Basic usage
import { SignInWithMetamaskButton } from '@clerk/nextjs'
export default function Home() {
return <SignInWithMetamaskButton />
}
import { SignInWithMetamaskButton } from '@clerk/clerk-react'
export default function Example() {
return <SignInWithMetamaskButton />
}
import { SignInWithMetamaskButton } from '@clerk/remix'
export default function Home() {
return <SignInWithMetamaskButton />
}
<script setup>
import { SignInWithMetamaskButton } from '@clerk/vue'
</script>
<template>
<SignInWithMetamaskButton />
</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.
import { SignInWithMetamaskButton } from '@clerk/nextjs'
export default function Home() {
return (
<SignInWithMetamaskButton mode="modal">
<button>Custom sign in button</button>
</SignInWithMetamaskButton>
)
}
import { SignInWithMetamaskButton } from '@clerk/clerk-react'
export default function Example() {
return (
<SignInWithMetamaskButton mode="modal">
<button>Custom sign in button</button>
</SignInWithMetamaskButton>
)
}
import { SignInWithMetamaskButton } from '@clerk/remix'
export default function Home() {
return (
<SignInWithMetamaskButton mode="modal">
<button>Custom sign in button</button>
</SignInWithMetamaskButton>
)
}
<script setup>
import { SignInWithMetamaskButton } from '@clerk/vue'
</script>
<template>
<SignInWithMetamaskButton mode="modal">
<button>Custom sign in button</button>
</SignInWithMetamaskButton>
</template>
Feedback
Last updated on