<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.
Copy
1import React from 'react';2import { render } from 'react-dom';3import {4ClerkProvider,5SignedIn,6SignedOut,7UserButton,8SignInWithMetamaskButton,9} from '@clerk/clerk-react';1011const frontendApi = process.env.REACT_APP_CLERK_FRONTEND_API;1213function App() {14return (15<ClerkProvider frontendApi={frontendApi}>16<SignedIn>17<UserButton />18</SignedIn>19<SignedOut>20<SignInWithMetamaskButton />21</SignedOut>22</ClerkProvider>23);24}2526render(<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>