Clerk opens Web 3.0 with metamask
This article is going to explain how Clerk is utilizing metamask to open new doors to web 3.0.
What is Clerk?
Looking for an easy implementation of an authentication system to your web application? Yes. Clerk can be your best choice: https://clerk.dev/ . Clerk provides you with ready made components for sign in, sign up, sign out, user profile and many more features including social login. Just add clerk to your application and use all great features with less code.
In this article I am going to build a react.js web application which utilizes some great features of Clerk including metamask authentication. Let’s start!
Step 1: Create application in Clerk dashboard with authentication strategy as Sing in with metamask.
Step 2: Create react application
Create a react application using the “npx create-react-app react-clerk-app” command.
Step 3: Install Clerk to our react application.
Use this command to install clerk to your react application “npm install @clerk/clerk-react”
Step 4: Create .env.local file and put clerk frontend API key
Your .env.local file should contain the following. Put the relevant frontend API key in [PUT FRONTEND API KEY], extracted from the API key section of the clerk dashboard.
REACT_APP_CLERK_FRONTEND_API=[PUT FRONTEND API KEY]Step 4: Now we can add Clerk Provider to our application.
You need to wrap App.js with <ClerkProvider></ClerkProvider>. First we need to import </ClerkProvider> from @clerk/clerk-react.
import { ClerkProvider} from "@clerk/clerk-react";Then you need to wrap your App.js with <ClerkProvider></ClerkProvider>. You also need to give the front end API key as a prop to the clerk provider.
Step 5: Add react router dom to your application.
Use this command to add router dom to your project: npm i react-router-dom. Then you can wrap the App component in index.js file with <BrowserRouter></BrowserRouter>. Now your index.js file looks like this.
Step 6: Now we need to let our Clerk Provider access the router.
To do this, ClerkProvider uses navigate prop. We can use the useNavigate hook from react router dom and allow ClerkProvider access to the router.
First we need to import useNavigate hook
import { useNavigate } from "react-router-dom";Then grab the useNavigate() function to a constant
const navigate = useNavigate();Now we can pass navigation to navigate prop in Clerk provider.
<ClerkProvider frontendApi={frontendApi} navigate={(to) => navigate(to)}>Step 7: Import all components needed from @clerk/clerk-react.
I am going to use SignIn, SignOut, UserProfile, UserButton, useUser, SignInWithMetamaskButton, RedirectToSignIn components in my application.
Step 8: Make the component to view after signing in to the web application.
In this component I am going to show user name, user profile and sign out for logged users. To this I am going to use UserButton, useUser and UserProfile from Clerk.
useUser() will grab the current user who has logged into the application. From the user object we can extract the first name, last name and other details of the user. Here I have grabbed the first name and web3wallet address from the user object.
<UserButton /> component of clerk will provide a button which will open UI with sign out option and manage user account option.
<UserProfile /> will load ready made UI of user profile with all functionalities to update the profile.
Step 9: Use the SignedIn component from Clerk.
Now in the App component, I am going to specify what should happen if the user is logged. To do this we can use <SignedIn> </SignedIn> from the clerk. This will specify what UI you need to show after signing in. In my case I am going to load <Home/> component I made in step 8.
<SignedIn><Home /></SignedIn>
Step 10: Use the SignedOut component from Clerk.
Now I can specify what to display if the user is not logged in to the application. To do that I can use <SignedOut> </SignedOut>. In my case I need to show a sign in with the metamask option to the user as I choose metamask authentication as my strategy. I can just do this with <redirectToSignIn> component only. Because from this component it will loaded clerk hosted sign in UI which contains sign in with metamask button itself. so I don’t need to include it in my code here. But here I am going to explain what happens with <SignInWithMetamask> component too.
What happens with <SignInWithMetamaskButton /> ?
This button will force metamask to open the connection UI. then we can choose the account we want and connect. Then the button internally grab the public address and triggers a message to be signed by metamask. Then we have to sign it from metamask UI. Clerk will validate the user internally and pass the authenticated user to the application side. That’s it. All the authentication steps and API requests are hidden from the developer. Developer only needs to import <SignInWithMetamaskButton /> from Clerk.
In my case I am using <RedirectToSignIn/> component that eventually hold this metamask button option inside. If you just use metamask button, your app will be loaded to localhost first without loading clerk provided sign in UI.
<SignedOut>{/* <SignInWithMetamaskButton /> */}<RedirectToSignIn /></SignedOut>
That’s it. Now your entire code looks like this.
Your web app will look like this.
Click Sign in with metamask
Choose an account and connect.
Now you will be needed to sign the message sent from Clerk
After you sign the message, you are in. now you see the view from<Home/> component. Inside that we have used the user object to grab first name and metamask account address. Also we used <UserProfile/> from Clerk to see this nice Account view.
Click the round button at the corner, you can see the view provided from <UserButton/>
These are the documents I have followed from the Clerk.