This page may contain legacy content

To get our most up-to-date content please access our documentation

August 16, 2021

How to Connect Users with WalletConnect

Table of Contents

User authentication is an essential aspect when developing dApps (decentralized applications), as it is crucial to determine rightful wallet owners. By authenticating users, they can interact with dApps, enable developers to access information regarding NFTs, token balances, etc., along with other important functionalities. However, authenticating users can be quite a hassle without the proper tools. This is something Moralis solves, by making the authentication process a breeze. Developers will know that it’s possible to use numerous methods and alternatives to authenticate users. For example, we’ve previously shown how to authenticate users with MetaMask using Moralis. However, in this article, we’re going to look closer at how to connect users with WalletConnect and utilize Moralis during the process. 

Moralis is the next-gen dApp and Web3 development platform, which provides users with a complete experience from idea to a fully functioning dApp. Moreover, Moralis gives users access to a fully managed serverless backend infrastructure, making authenticating users with WalletConnect much easier. Consequently, developers using Moralis can build dApps with native support for WalletConnect authentication with just a few lines of code. As this is the case, the article also focuses specifically on how to connect users with WalletConnect through Moralis.

Furthermore, this is merely one of the many use cases of Moralis, and the platform provides a variety of other valuable tools for Web3 development. Moralis Speedy Nodes, NFT balances, and real-time alerts are just three examples of handy development tools that users on the platform can access. So, if you’re looking to become a full-fledged dApp developer, the first step is to sign up with Moralis. With the platform, you’ll be able to significantly shorten your development process to save both time and significant resources!

How to Connect Users with WalletConnect – What is WalletConnect?

Before we delve deeper into how to connect users with WalletConnect through Moralis, we’ll take this section to look closer at WalletConnect. We first need to make the first distinction that WalletConnect is an open-source Web3 protocol that connects dApps to mobile crypto wallets. This means that WalletConnect isn’t an application itself, but rather a protocol used by various other wallets.

The connection can occur through two different alternatives; either a QR code or deep linking. Through the protocol, it is possible to interact with dApps directly using mobile phones. As a phone is necessary to utilize the protocol, WalletConnect can be considered a relatively safe option.

As we previously mentioned, WalletConnect is a protocol that several different crypto wallets utilize. Some examples of wallets supporting WalletConnect are MetaMask, Trust Wallet, Rainbow, etc. To get started with WalletConnect, all you need to do is download one of the apps supporting the protocol. These are downloadable for both Android and iOS. Furthermore, the WalletConnect protocol isn’t built on a blockchain, which means there isn’t a specific cryptocurrency backing WalletConnect. This also means that no fees exist for utilizing WalletConnect. 

As a result, WalletConnect opens up a whole world of dApps that was previously only available to MetaMask users. As such, users can interact with dApps without giving up any information regarding the private keys of their wallets. Furthermore, they need their phones to sign any transaction providing a higher degree of safety. 

However, this article only scratches the surface of WalletConnect and how it works. If you want to learn more about WalletConnect, then we recommend visiting their official website for more in-depth information. 

What is MetaMask?

MetaMask is one of the most popular crypto wallets on the market with 1,000,000+ users around the globe, and the application acts as a perfect gateway to an incredibly well-developed Ethereum ecosystem of decentralized applications. MetaMask is available in two different versions, either as a browser extension or as a mobile application. Moreover, as we previously mentioned, MetaMask is one of the wallets supporting the WalletConnect protocol. 

The wallet provides users with a selection of great features, such as a token wallet, key vault, token exchange, browser, etc. With the extension/application installed, it is possible for users to manage their assets fully. As such, they have the ability to store, swap, purchase, and manage all their assets through MetaMask. This means that it is possible to utilize MetaMask to manage assets effectively while maintaining complete control of all assets.

Furthermore, we also mentioned that MetaMask is a gateway to the decentralized web. This means that the wallet can be used to access Ethereum based dApps. As such, it is possible to access applications like Compound or Uniswap through the extension/app. This is all achieved without compromising the safety of the user’s assets as they remain in complete control. Furthermore, MetaMask is integrated with Moralis making development with the extension through the platform a breeze.

However, what we just read only explained the very basics of what MetaMask is. If you visit the Moralis Blog, you’ll find in-depth MetaMask articles will give you a better understanding of MetaMask and provide an excellent explanation for setting up your own account. Furthermore, the article also explains how to use the extension/app and describes all features of MetaMask in more detail. 

How to Authenticate Users With MetaMask

As we mentioned in the introduction, the quickest way to develop dApps is through Moralis. One of the many reasons for this is that the platform’s many integrations make it extremely easy to authenticate users. Many of those using Moralis use MetaMask for authentication users. Since this is the case, we’re going to look closer at authenticating users with MetaMask, before diving deeper into the subject of how to connect users with WalletConnect. 

The first thing we need to do is to sign up with Moralis to create our own server. We can do this by clicking the “+ Create a new App” button at the top right of the Moralis interface. This will allow us to create a server by inputting a name, selecting a region, and selecting the desired networks. Once we select our options, we can hit the “Create Instance” button to finalize and start our server. 

Now that we have a server, we can start creating our application. The first step to authenticate users is to import the following scripts: 

Once we have the scripts, we must also initialize Moralis, which we can do through the following code: 

We can locate the App ID and server URL by clicking the ”View Details” button on the server in question.

Once we are done with these preparations, we can start with the code for authenticating users through MetaMask. Let’s begin by creating a button:

Then we can create a simple function for logging in, which we’ll call “login,” that’ll look like this: 

That’s it; this is all we need to do to authenticate users with MetaMask through Moralis. However, if you prefer to watch a video explaining the process, then make sure to check out this one:

How to Connect Users with WalletConnect Using Moralis

Now that we know how to authenticate users with MetaMask, the default option on the platform, we can move on to the main topic of how to connect users with WalletConnect through Moralis. We’ll use a simple example for this section showcasing how easy it is to move from the default MetaMask integration to using WalletConnect. 

As you saw in the previous section, the process to authenticate users with MetaMask is straightforward. A variation of the example in that section for authenticating users with MetaMask can look something like this: 

To move from authenticating with MetaMask to WalletConnect, we need to add an argument to the calls. In this case, we will add an argument to both the “authenticate” and “enable” functions of our application. Furthermore, we’ll also have other enable functions in the code itself in some cases, and they should all receive the same argument.

Without the arguments, the users would receive a pop-up from the MetaMask extension to authenticate themselves as a user. When we add the arguments, we integrate WalletConnect, and in this case, users would receive a QR code modal on their screen instead. The users will then authenticate themselves by scanning the code with their phones through their WalletConnect compatible wallet. 

This process is extremely easy, and it only takes a few seconds to create a simple authentication function like this one. However, if you still have questions regarding the process, we recommend watching the following video from the Moralis YouTube channel. Here you will find a more detailed example with a fully functioning application demonstrating the process:

Developing with Moralis

We have continuously mentioned Moralis throughout the article, and there are good reasons for this. Moralis is the number one platform for Web3 development, and helps users save both valuable time and money. We showcase two clear examples of this in the previous sections, where we show how to authenticate users with MetaMask and WalletConnect. However, native user authentication is just one of the many great features that Moralis offers, and there is a lot more to discover. 

For example, Moralis offers a complete solution for developers to go from a simple idea to a fully functioning dApp. Moralis is also built to be cross-chain compatible from the ground up. If you are interested in developing dApps, we recommend the following two articles: “How to Create Ethereum dApps” and “How to Create BSC dApps“. Reading these two articles will further demonstrate the capabilities of developing with Moralis. 

Furthermore, the platform also offers a well-established blog providing you with new information regarding features and can help you become a better Web3 developer. The platform also offers to create guidance in the form of the official Moralis documentation where you can, among other things, find a quick start guide for building your first ever dApp. 

Along with these powerful features, Moralis also provides all users with an infinitely scalable backend infrastructure. This means that you, as a developer, may direct your full attention to developing smart contracts and focus on the frontend of your applications. As a result, you can save both time and money as the platform does all the heavy lifting for you. 

So, if you are looking to become a dApp developer today, the first step is to sign up with Moralis to benefit from all the platform’s great features! 

How to Connect Users with WalletConnect — Summary

When developing dApps, it can be convenient to let users authenticate themselves through crypto their wallets. However, without the proper tools, integrating this functionality can be quite a hassle. Nevertheless, Moralis allows you to do this with just a few lines of code. Moralis takes care of all the heavy backend management, making authenticating users a much simpler task. This means that the platform allows users to save both valuable resources and time. In this article, we look closer at how to connect users with WalletConnect. 

Authenticating and connecting users with MetaMask through Moralis is a simple task. All you require is basically one line of code to authenticate any user. The same line of code with a minor modification is all you require to connect users with WalletConnect instead. All that’s required is to add an argument to the original authentication call supplying the provider with the code. We demonstrated this in an earlier section to exemplify the process. As such, it is just as easy to authenticate users with WalletConnect as with MetaMask. 

Moreover, this is just one of the many great features of Moralis, and the platform can be used throughout the whole development process. Moralis is the ultimate Web3 development platform, and it provides everything needed to develop and deploy dApps. Moralis also offers a selection of features/tools such as native support for IPFS, MetaMask, the Moralis NFT API, Price API, and much more. 

So, if you are interested in developing dApps, feel free to join Moralis and an ecosystem of 5,000+ blockchain projects that are utilizing the software today. Signing up with the platform is entirely free, and it will provide you with immediate access to the platform’s tools!

 

Market Data API
Build amazing trading and portfolio dapps with this Market Data API. Keep users engaged with up-to-date data!
Market Data API
Related Articles
September 19, 2022

How to Create a Web3 Dapp in 3 Steps

October 18, 2022

Add Dynamic Web3 Authentication to a Website

October 15, 2022

NodeJS Web3 Tutorial – Create Dapps Using a NodeJS Web3 Example

December 12, 2022

The Best Ethereum API in 2023 – Ultimate Guide

February 24, 2023

Full Guide: How to Get Blockchain Data

August 11, 2022

How to Code a Blockchain App in 5 Steps

October 17, 2023

How to Get an ERC-20 Token Address

February 28, 2023

Arbitrum Testnet – How to Build and Launch Arbitrum Projects

October 31, 2023

Complete Blockchain API Tutorial with API Examples