<SignInWithMetamaskButton />

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

Usage

Basic usage

pages/index.js
import { SignInWithMetamaskButton } from "@clerk/nextjs";
 
export default function Home() {
  return (
    <div>
    <h1> Sign in </h1>
      <SignInWithMetamaskButton />
    </div>
  );
}

example.js
import { SignInWithMetamaskButton } from "@clerk/clerk-react";
 
export default function Example() {
  return (
    <div>
    <h1> Sign in </h1>
      <SignInWithMetamaskButton />
    </div>
  );
}

pages/index.js
import { SignInWithMetamaskButton } from "@clerk/remix";
 
export default function Home() {
  return (
    <div>
    <h1> Sign in </h1>
      <SignInWithMetamaskButton />
    </div>
  );
}

pages/index.js
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 up.

pages/index.js
import { SignInWithMetamaskButton } from "@clerk/nextjs";
 
export default function Home() {
  return (
    <div>
    <h1> Sign in </h1>
      <SignInWithMetamaskButton mode="modal">
        <button>
          Sign in
        </button>
      </SignInWithMetamaskButton>
    </div>
  );
}

example.js
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>
  );
}

pages/index.js
import { 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.js
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>
  );
}

Last updated on November 21, 2023