<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
import { SignInWithMetamaskButton } from "@clerk/nextjs";
export default function Home() {
return (
<div>
<h1> Sign in </h1>
<SignInWithMetamaskButton />
</div>
);
}import { SignInWithMetamaskButton } from "@clerk/clerk-react";
export default function Example() {
return (
<div>
<h1> Sign in </h1>
<SignInWithMetamaskButton />
</div>
);
}import { SignInWithMetamaskButton } from "@clerk/remix";
export default function Home() {
return (
<div>
<h1> Sign in </h1>
<SignInWithMetamaskButton />
</div>
);
}import { 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 in the <SignInWithMetamaskButton> component.
import { SignInWithMetamaskButton } from "@clerk/nextjs";
export default function Home() {
return (
<div>
<h1> Sign in </h1>
<SignInWithMetamaskButton mode="modal">
<button>
Sign in
</button>
</SignInWithMetamaskButton>
</div>
);
}import { SignInWithMetamaskButton } from "@clerk/clerk-react";
export default function Example() {
return (
<div>
<h1> Sign in </h1>
<SignInWithMetamaskButton mode="modal">
<button>
Sign in
</button>
</SignInWithMetamaskButton>
</div>
);
}import { SignInWithMetamaskButton } from "@clerk/remix";
export default function Home() {
return (
<div>
<h1> Sign in </h1>
<SignInWithMetamaskButton mode="modal">
<button>
Sign in
</button>
</SignInWithMetamaskButton>
</div>
);
}import { SignInWithMetamaskButton } from "gatsby-plugin-clerk";
export default function Home() {
return (
<div>
<h1> Sign in </h1>
<SignInWithMetamaskButton mode="modal">
<button>
Sign in
</button>
</SignInWithMetamaskButton>
</div>
);
}