<SignInWithMetamaskButton/>

Overview

The <SignInWithMetamaskButton/> component is used to complete a one-click, cryptographically-secure login flow using MetaMask, with all data stored on the Clerk user.

Internally, it calls the Clerk.authenticateWithMetamask() method.

Usage

Make sure you've followed the installation guide for Clerk React before running the snippets below.

The most common scenario for using the <SignInWithMetamaskButton/> component is to execute a Metamask sign in or sign up flow in React and NextJS apps.

1
import React from 'react';
2
import { render } from 'react-dom';
3
import {
4
  ClerkProvider,
5
  SignedIn,
6
  SignedOut,
7
  UserButton,
8
  SignInWithMetamaskButton,
9
} from '@clerk/clerk-react';
10

11
const frontendApi = process.env.REACT_APP_CLERK_FRONTEND_API;
12

13
function App() {
14
  return (
15
    <ClerkProvider frontendApi={frontendApi}>
16
      <SignedIn>
17
        <UserButton />
18
      </SignedIn>
19
      <SignedOut>
20
        <SignInWithMetamaskButton />
21
      </SignedOut>
22
    </ClerkProvider>
23
  );
24
}
25

26
render(<App />, document.getElementById('root'));

Props

Name	Type	Description
redirectUrl?	string	Full URL or path to navigate after successful sign in or sign up.

Simple button

<SignInWithMetamaskButton />

Custom button

<SignInWithMetamaskButton>
  <button className="btn">
    Web3 authentication rocks!
  </button>
</SignInWithMetamaskButton>