<SignInWithMetamaskButton />
The <SignInWithMetamaskButton />
component is used to complete a one-click, cryptographically-secure login flow using MetaMask.
Usage
Basic usage
pages/index.jsimport { SignInWithMetamaskButton } from "@clerk/nextjs"; export default function Home() { return ( <div> <h1> Sign in </h1> <SignInWithMetamaskButton /> </div> ); }
example.jsimport { SignInWithMetamaskButton } from "@clerk/clerk-react"; export default function Example() { return ( <div> <h1> Sign in </h1> <SignInWithMetamaskButton /> </div> ); }
pages/index.jsimport { SignInWithMetamaskButton } from "@clerk/remix"; export default function Home() { return ( <div> <h1> Sign in </h1> <SignInWithMetamaskButton /> </div> ); }
pages/index.jsimport { SignInWithMetamaskButton } from "gatsby-plugin-clerk"; export default function Home() { return ( <div> <h1> Sign in </h1> <SignInWithMetamaskButton /> </div> ); }
Custom usage
In some cases you will want to use your own button, or button text. You can do that by wrapping your button up.
pages/index.jsimport { SignInWithMetamaskButton } from "@clerk/nextjs"; export default function Home() { return ( <div> <h1> Sign in </h1> <SignInWithMetamaskButton mode="modal"> <button> Sign in </button> </SignInWithMetamaskButton> </div> ); }
example.jsimport { SignInWithMetamaskButton } from "@clerk/clerk-react"; export default function Example() { return ( <div> <h1> Sign in </h1> <SignInWithMetamaskButton mode="modal"> <button> Sign in </button> </SignInWithMetamaskButton> </div> ); }
pages/index.jsimport { SignInWithMetamaskButton } from "@clerk/remix"; export default function Home() { return ( <div> <h1> Sign in </h1> <SignInWithMetamaskButton mode="modal"> <button> Sign in </button> </SignInWithMetamaskButton> </div> ); }
pages/index.jsimport { SignInWithMetamaskButton } from "gatsby-plugin-clerk"; export default function Home() { return ( <div> <h1> Sign in </h1> <SignInWithMetamaskButton mode="modal"> <button> Sign in </button> </SignInWithMetamaskButton> </div> ); }