Skip to content

Commit

Permalink
feat: MetaMask Web3 authentication guide
Browse files Browse the repository at this point in the history
  • Loading branch information
chanioxaris committed Dec 17, 2024
1 parent 4b13ae7 commit ceefb41
Show file tree
Hide file tree
Showing 2 changed files with 50 additions and 0 deletions.
46 changes: 46 additions & 0 deletions docs/authentication/web3/metamask.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
---
title: MetaMask
description: Learn how to set up Web3 authentication with MetaMask.
---

<TutorialHero
beforeYouStart={[
{
title: "A Clerk application is required.",
link: "/docs/quickstarts/setup-clerk",
icon: "clerk",
},
]}
>
- Use MetaMask to authenticate users with Web3
</TutorialHero>

Enabling [MetaMask](https://metamask.io/) as a Web3 provider allows your users to sign in and sign up to your Clerk application with their MetaMask wallet.

## Enable MetaMask as a Web3 provider

1. In the Clerk Dashboard, navigate to the [**Web3**](https://dashboard.clerk.com/last-active?path=user-authentication/web3) page.
1. From the list of web3 providers, enable **MetaMask**.

## Test authentication

The simplest way to test authentication is to visit your Clerk application's [Account Portal](/docs/customization/account-portal/overview), which is available for all Clerk applications out-of-the-box.

1. In the Clerk Dashboard, navigate to the [**Account Portal**](https://dashboard.clerk.com/last-active?path=account-portal) page.
1. Next to the **Sign-in** URL, select **Visit**. The URL should resemble:
- **For development**`https://your-domain.accounts.dev/sign-in`
- **For production**`https://accounts.your-domain.com/sign-in`
1. On the sign-in page, you should see **MetaMask** as an option. Use it to sign in with your MetaMask wallet.

## Collect additional user information during sign-up

Web3 applications typically utilize a hexadecimal wallet address to identify users, which offers a high level of privacy. However, when bridging the gap between Web3 and Web2, it's often necessary to gather human-readable information about the user, such as their email address, phone number, or a username.

To collect additional information about your user during sign-up:

1. In the Clerk Dashboard, navigate to the [**Email, phone, username**](https://dashboard.clerk.com/last-active?path=user-authentication/email-phone-username) page.
1. On this page, toggle on attributes you wish to collect from your user during sign up. Select the settings icon next to an attribute to set it as **Required**. When set as **Required**, Clerk automatically prompts the user for this information after they authenticate with MetaMask.

## Connect MetaMask to existing account

Users can connect their MetaMask wallet to their account at any time through their user profile page. You can configure your application to use the [Account Portal User Profile page](/docs/customization/account-portal/overview#user-profile) or the prebuilt [`<UserProfile />`](/docs/components/user/user-profile) component.
4 changes: 4 additions & 0 deletions docs/manifest.json
Original file line number Diff line number Diff line change
Expand Up @@ -607,6 +607,10 @@
{
"title": "Coinbase Wallet",
"href": "/docs/authentication/web3/coinbase-wallet"
},
{
"title": "MetaMask",
"href": "/docs/authentication/web3/metamask"
}
]
]
Expand Down

0 comments on commit ceefb41

Please sign in to comment.