How to Authenticate Dapp Users with MetaMask - Moralis Web3 | Enterprise-Grade Web3 APIs (2024)

Web3 authentication is an integral point of all decentralized applications (dapps). As such, if you want to become a Web3 developer you need to be able to authenticate your dapp’s users. And, in case you’ve used any DeFi platforms or other Web3 applications before, you know that you can do this with popular crypto wallets, such as MetaMask. So, how to use these Web3 wallets to authenticate dapp users? Well, we can tell you that with the right tools, it’s a lot simpler than you might think. In fact, it takes less than ten minutes, which includes completing the initial setup. We know that it sounds quite unbelievable. However, thanks to Moralis everyone with some basic JavaScript proficiency can have a web application that supports Web3 login up and running in no time. If that’s something you want to learn more about, make sure to follow our lead.

Moving forward, we’ll cover a simple example project using Moralis’ SDK. We will show you how to connect it with Vanilla JS. However, we will first need to complete some initial Moralis setup, which will provide us with dapp credentials. Essentially, there’ll be no coding in this example project – we’ll copy-paste the lines of code provided by the Moralis documentation. Though, we will walk you through the code to make sure that things are clear. Furthermore, you’ll also see how neatly this Firebase for crypto logs and indexes users by looking at the Moralis database. However, we must first provide more context for those of you who have never heard of Moralis before. As such, you’ll get to meet Moralis and learn more about how it enables you to effortlessly authenticate dapp users. Then, we’ll roll up our sleeves and tackle today’s example project.

Web3 Authentication with Moralis

Moralis is the ultimate Web3 development platform. Its goal is to help legacy developers with bridging Web2 and Web3. Hence, Moralis focuses on three key areas of dapp development – Web3 authentication, Web3 API, and syncing on-chain events. And, since the need to authenticate dapp users is the starting point, we will focus on that part herein.

Moralis enables you to effortlessly unify Web3 wallets and Web2 accounts in your applications. As such, it is the go-to tool for those who are building dapps from scratch and those who want to add Web3 functionality to their existing Web2 applications. Moreover, Moralis authentication is compatible with any tech stack. Of course, you also own and control all user data. Furthermore, when you tackle Web3 authentication with Moralis, you can also utilize standards, such as OpenID, OAuth, DIDs, and others. So, if you are:

• Building a new Web3 app
• Connecting an existing Web2 user database with Web3 authentication
• Interested in using authentication aggregators for your enterprise’s Web3 authentication flows

Then you should make sure to use Moralis!

Moreover, in case you’ve dealt with Web3 authentication implementation before, you know that it can be quite challenging. However, when you use Moralis Web3 Auth API, you get to the finish line without any hassle. This means:

• You don’t need to redirect the users to a third-party auth interface.
• No need to truly understand Web3 authentication flows.
• You don’t have to learn how wallets sign or verify messages.
• No need to master varying wallet standards.
• You don’t have to discover how wallets work on different blockchains.
• No need to worry about the authenticating solution’s security.
• You don’t have to update and maintain the auth solution.

Essentially, Moralis gives you one unified API for all Web3 authentication methods and comprehensive SDKs for easy integration.

Speed and Future-Proofing

The Moralis’ Web3 Auth API enables you to authenticate dapp users without breaking a sweat or a bank. Basically, it helps you turn months of work into a task as simple as copying and pasting one line of code. As such, you get to devote your precious time and resources to the things that really matter. This is the way to eliminate any onboarding friction and scale effortlessly.

Moreover, thanks to Moralis cross-chain interoperability, your sign-up flows are not stuck to any particular chain. Even if you are new to the crypto sphere, you know that blockchain is cutting-edge technology. It’s evolving fast, and thus being ready for any change is the key. When you use Moralis’ Web3 Auth API, you are ready for any new wallets, chains, and authentication methods. That’s without you ever worrying about it at all.

Now that you have the basic idea of what Moralis is and how its auth solution can help you authenticate dapp users, let’s look at a simple example project. And, as promised, let’s start with a quick demo so that you’ll know what to expect moving forward.

Authenticate Dapp Users with MetaMask – Demo

Here’s our simple webpage:

Looking at the above screenshot, you can see that we kept things super simple. That way there are no unnecessary distractions. After all, the goal is to show you how to authenticate dapp users with MetaMask. When users land on this page, they intuitively know that they need to press the “Moralis Metamask login” button. When they do that, their MetaMask extension pops up with the following signature request:

To confirm their login attempt, users need to click the “Sign” button in their MetaMask wallets. By doing so, the Moralis’ Web3 Auth API does the rest in the backend. This also means that after signing the signature request, users are authenticated:

As you can see, our example dapp displays users’ wallet addresses and offers them to log out. That’s all. However, the backend log users log into your Moralis database. As such, you can automatically use all publicly available on-chain data to obtain users’ balances, transaction history, and more. Do you see the power of this?

With the above demo under our belts, it’s time to take a close look at how to create such a simple dapp. We assure you that it’s super easy and fast. So, make sure to follow our lead and get your hands dirty. It will take no more than ten minutes of your time. And, this might just be the best investment of 10 minutes you’ve ever made.

As mentioned before, in order to get your hands on the Moralis’ Web3 Auth API, you need to complete the initial Moralis setup. As such, make sure to complete the following steps:

1. Visit Moralis’ home page and click the “Start for Free” button to create your free account. On the other hand, if you already have an active account, just log in using your credentials:

2. Once inside your Moralis admin area, click the “Create New Dapp” button to create a new Moralis dapp:

3. First, you need to select the environment. For most example projects, you will go with “Testnet”; however, today we will focus on the Ethereum mainnet. Thus, select the “Mainnet” option:

4. Moralis supports all leading chains and lets you select all of them. However, as mentioned in the previous step, we will authenticate dapp users on the Ethereum mainnet herein. Hence, make sure to click on “Eth Mainnet” followed by “Proceed”:

5. As far as the region goes, you need to choose the city closest to your location from the options in the drop-down menu:

6. The final step of creating your Moralis dapp requires you to name it. This can be anything you want but avoid overthinking this step. Once you enter the name, just click the “Create Your Dapp” button:

See Also

How To Buy an NFT - Your Ultimate Guide in 2024

It usually takes just a couple of seconds before your dapp is ready. With your Moralis dapp up and running, you get to access its details and all the functionality. You just need to click the “Settings” button:

By clicking “Setting”, you will automatically land on the “Dapp Details” tab. This is where you can copy your dapp’s credentials:

However, before you copy the above credentials, you need to get the code where you will paste them ready.

Creating a Simple Vanilla JS Dapp

First, open your favorite IDE. Feel free to follow our lead and use Visual Studio Code (VSC). Inside the VSC open a folder that you will use for this project. We created the “WEB3AUTH” folder. Then, start by creating a new file and name it “index.html”:

Moreover, as promised above, you don’t need to write the code manually. Instead, use the Moralis documentation:

In the side menu, you will see “Connect with SDK”. If you remember, we said that we will use Vanilla JS to authenticate dapp users. Thus, select the “Connect with Vanilla JS” option:

On that page you will find the code that will get the job done:

After copying the above code, return to VSC and paste it into the “index” file:

Looking at the above lines of code, we first have the title. Next, there’s a URL, which brings in the latest version of the master Moralis SDK. Inside the body, we first have the “Morallis Hello World!” heading. Then, there are two buttons that serve for initiating Web3 login and logout. Finally, we bring in the “main.js” file, which will define the logic for the two buttons. Hence, you need to create that file next.

Logic to Authenticate Dapp Users

Create the “main.js” file (do not misspell it as we did):

Again, you do not need to write the code yourself. Simply go back to the same documentation pages that we used above and scroll down a bit. Stop when you see the “Add Authentication” section and copy the code:

Then, return to VSC and paste the code into the “main.js” file that you created above. Looking at the image above, you can see that the top four lines cover the Moralis integration. This is where you need to paste your Moralis dapp’s credentials:

Note: Make sure to use your credentials and not the ones in the image above.

With your dapp URL and ID in place, you are ready to authenticate dapp users on Ethereum. However, before you run it, let’s walk you through the rest of the code.

The “login” function gets the current users if they are already logged in. However, if they are not yet authenticated, it uses “Moralis.authenticate”. The latter triggers MetaMask with the “Log in using Moralis” signing message. Then, the code console-logs users’ Ethereum addresses. Furthermore, the code also console-logs any errors.

Further down the code, we have the “logOut” function, which gets the current users (the ones that are logged in) and logs them out. It also console-logs the “logged out” message. Finally, at the bottom of the code, we have the two on-click events for our “login” and “logout” buttons.

Test Run Your Dapp

Last but not least, we encourage you to watch the video below. In it, you’ll have a chance to follow our in-house expert as he runs this example dapp and uses a browser console for a deeper insight. Starting at 5:05, you’ll learn how to add the “Live Server” extension in VSC. The latter will enable you to run your dapp locally.

How to Authenticate Dapp Users with MetaMask – Summary

If you covered the above sections, you now know that Moralis is the simplest way to incorporate Web3 authentication. Thanks to its powerful Web3 Auth API, you get to authenticate dapp users with a single line of code. Essentially, “Moralis.authenticate” does the trick. Of course, you need to complete the initial Moralis setup first, where you create your Moralis dapp. Then, you need to paste that dapp’s credentials into the code. And, to make things even simpler, in many cases you don’t need to write the code yourself. Instead, you can just copy-paste it from the Moralis documentation, which is exactly what you did to complete today’s project.

Now, that you know how to easily authenticate dapp users, you are ready to take on more complex projects. If you have your own idea for Web3 apps, tackle them. However, if you need some additional practice, taking on other example projects might be a good idea. You can take your pick on the Moralis’ YouTube channel and the Moralis’ blog. As such, you will get to learn how to work with smart contract events and thus utilize the “Sync” feature, which is another core tool of the Moralis’ SDK. This is also a place to learn more about why to build on Solana.

Moreover, in case you are looking for a professional approach to your blockchain development education, Moralis Academy should be on your radar. This is where you get to attend top-notch Web3 development classes. Furthermore, you also get a personalized study path, expert mentorship, and membership in one of the most advancing communities.