UI Components <SignInWithMetamaskButton> <SignInWithMetamaskButton>
The <SignInWithMetamaskButton>
component is used to complete a one-click, cryptographically-secure sign-in flow using MetaMask.
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 >
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 >
Last updated on Jan 9, 2025