<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.
1import React from 'react';2import { render } from 'react-dom';3import {4ClerkProvider,5SignedIn,6SignedOut,7UserButton,8SignInWithMetamaskButton,9} from '@clerk/clerk-react';1011function App() {12return (13<ClerkProvider publishableKey="clerk-pub-key">14<SignedIn>15<UserButton />16</SignedIn>17<SignedOut>18<SignInWithMetamaskButton />19</SignedOut>20</ClerkProvider>21);22}2324render(<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
1<SignInWithMetamaskButton />
Custom button
1<SignInWithMetamaskButton>2<button className="btn">3Web3 authentication rocks!4</button>5</SignInWithMetamaskButton>