<SignInWithMetamaskButton/>

Sign in with Metamask Web3 wallet in the browser

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

NameTypeDescription
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>

© 2022 Clerk. All rights reserved.