A crypto wallet is an essential component if a user wants to interact with Web3 applications. Moreover, crypto wallets act as gateways that let users access decentralized applications (dApps) on blockchains such as Ethereum. However, with a substantial amount of blockchain wallets available, such as MetaMask, Rainbow, Trust Wallet, Argent, etc., developers find the programming process cumbersome when implementing support for these wallets to their dApp. Therefore, WalletConnect provides a solution that enables developers to implement a connection between dApps and wallets effortlessly. Moreover, with Moralis, you can integrate WalletConnect to your dApp and authenticate users easily. As such, we will in this article take a closer look at what WalletConnect is and how you can utilize it with Moralis to authenticate Web3 users.
With Moralis, you get to take advantage of its native support for WalletConnect. In turn, you’ll be able to experience how you can authenticate users quickly by using a single line of code provided by Moralis. As such, we will use Moralis throughout this article as it makes authentication of dApp users significantly more straightforward and accessible.
Moralis also offers a vast selection of Web3 development tools that can aid in the complete development process. For example, with Moralis Speedy Nodes, you’ll get to use the fastest, most reliable blockchain nodes on the market. These nodes support blockchains such as Ethereum, Polygon, BSC (Binance Smart Chain), Avalanche, Arbitrum, and Fantom. As such, Moralis has established itself as the ultimate operating system for Web3 development.
Gain access to all of Moralis’ tools by signing up with the platform. It only takes a couple of seconds, and you’ll be able to get going with your first blockchain project in a matter of moments!
What is WalletConnect?
A misconception of WalletConnect is that it is often referred to as an application; however, this is not the case. Rather than an app, WalletConnect is an open-source protocol used to establish a connection between various wallets and dApps. The protocol establishes an encrypted connection between two applications, wallets, or devices. This connection is symmetrically encrypted through a shared key of the two peers.
WalletConnect works with over 75 leading wallets where MetaMask, Rainbow, Trust Wallet, and Argent are the most popular ones. The connection between wallets and dApps is established either by scanning a QR-code or deep link. The code or link is sent out by one peer and then scanned or approved by the other peer of the interaction. If WalletConnect is integrated into a dApp, it is extremely easy to create a safe and reliable connection. This alternative is even safer than solely using MetaMask or any of the other wallets.
WalletConnect offers additional useful features that come in handy for blockchain development. Here are a few examples:
- Chain Agnostic – As of now, WalletConnect supports a variety of different chains. This means that it is possible to use WalletConnect when, for example, working with Ethereum or Solana. Furthermore, according to WalletConnect’s official website, the protocol will expand to support even more chains in the future.
- Multi-Chain – Along with supporting several different chains, the protocol also allows for a multi-chain integration. This means that it is possible to connect a wallet to multiple chains simultaneously.
- Platform Agnostic – Moreover, WalletConnect is also platform agnostic. This means that the protocol can be used across desktop, browser, mobile, and gaming applications.
If you’d like to take on a challenge involving crypto wallets, check out Moralis’ article on how to build a crypto wallet in 4 steps.
Building dApps with Moralis – Why Authenticate Users?
An essential aspect of, for example, Ethereum dApp development revolves around the authentication of users. It is essential to allow users to authenticate themselves when interacting with dApps to reassure them that they are the wallet’s owners. For this reason, all dApp developers need to add some form of authentication mechanism to their projects.
The largest crypto wallet on the market is MetaMask which has over ten million monthly users across the globe. As such, it is not uncommon that dApp developers integrate the functionality that allows users to sign up and authenticate with MetaMask. However, the number of wallet alternatives is continuously growing, making it more favorable to integrate another option such as WalletConnect.
As WalletConnect supports a multitude of different wallets, you’re allowing your dApp’s users to utilize several various wallets. This means that it can be favorable to use WalletConnect when it comes to authenticating the potential users of our dApps.
However, adding this functionality to dApps can be quite cumbersome as it, in many instances, requires complex coding. This is where Moralis enters the picture as the number one Web3 operating system. As such, Moralis takes care of the heavy lifting, enabling you to create and launch your projects markedly quicker.
Therefore, we will explain in the following sections how easy it is to authenticate users with WalletConnect when working with Moralis.
How to Authenticate Users with WalletConnect in 3 Steps
Now that we have answered the question ”what is WalletConnect?” and acquired a better understanding of why we need to authenticate our dApp’s users, we can move on to taking a closer look at this process. For this tutorial, we will be creating a simple dApp that is solely used to authenticate users. Since we’re working with Moralis, the process becomes straightforward and consists of the following three steps:
- Initialize Moralis.
- Create an HTML file.
- Add the logic.
Creating this simple dApp will only take us a couple of minutes as we will be utilizing the features of Moralis. However, we won’t be going too in-depth when it comes to the HTML file of the dApp, since you will be able to design and structure the content according to your own preferences. Moreover, the logic will be written in JavaScript. For this reason, it will be favorable to have some prior knowledge of this language. Nonetheless, you can follow along if you are a novice, as we will walk you through each step of the way.
If you’d rather look at a video where one of Moralis’ experts explains the process, tune in to the Moralis YouTube channel, where the following clip showcases the process in video format:
Step 1: How to Authenticate Users with WalletConnect – Initialize Moralis
To initialize Moralis, we need a server. As such, if you haven’t already, the first thing you need to do is sign up with Moralis. Once you have an account and are logged in, you can go ahead and click the ”+ Create a new Server” button at the top of your admin panel.
Clicking this button will provide three different alternatives. The option you choose from here should be based on where you are going to deploy the dApp. However, clicking either alternative will bring you to a new window to input some information. First, we need to give the server a name. Second, we need to select a region, and finally, we also need to choose network(s).
Once done, all that remains is to click the ”Add Instance” button at the bottom right of the window. Spinning up the server might take a while, but the process will be finalized momentarily.
With the instance up and running, we can click the ”View Details” button for the server in question. Among the available information, you’ll find the server URL and application ID. Now, with the information at hand, you can go ahead and create a JavaScript file. In the file, you will then use the previously fetched information and input the following:
Moralis.initialize("paste Moralis app ID here”); Moralis.serverURL = "paste Moralis server URL here”;
This initial step is generally done when creating dApps with Moralis. As such, following the same procedure will help you get going with any future dApp project. Now, with a server up and running, we can move on to look closer at the HTML code.
Step 2: How to Authenticate Users with WalletConnect – Create an HTML File
Next up, we need to structure the content and add the required fields and buttons of the application. To structure the content, we are going to use HTML code, and as an example, this is what the UI (as shown in the video tutorial) looks like:
As you can see from the images above, we initially had a single login button. Once a user logs in, additional options appear to either “logout” or proceed with a “test signing”. As such, we need to add these buttons to the HTML code. Here is an example of what the code for the login button looks like:
<button id=”btn-auth">Login</button>
However, this is just a simple demo dApp, and there are usually additional elements to a website. As such, it is up to you to structure the content according to your own preferences. For this reason, we won’t be diving any deeper into the file. However, don’t worry; if you want inspiration and want to look closer at the complete file, then you can visit the following page from the GitHub repository: ”index.html”.
Once you have the desired layout for your dApp, we can move on to the next step, which involves the logic of this simple application. This is also where we add the functionality allowing us to authenticate users with WalletConnect.
Step 3: How to Authenticate Users with WalletConnect – Add the Logic
With the server up and running and the proper structure for the web applications’ content, we can add some logic. The dApp we are about to create contains five different functions:
- renderApp()
- authenticate()
- logout()
- testCall()
- enableWeb3()
These are all essential functions; however, we are going to focus on the “authenticate()” and ”enableWeb3()” functions since this is where we need to add the logic to make sure that the users can authenticate themselves with WalletConnect.
authenticate()
As the name of the ”authenticate()” function suggests, it authenticates users. We have the ”Moralis.authenticate()” function within this function, which allows us as developers to authenticate users with a single line of code.
Initially, this function authenticates users with MetaMask unless an argument is passed. In this case, we want to authenticate users with WalletConnect, which means we need to input a provider as an argument. In this example, we create a “const” that we initially assign with ”walletconnect” in the JavaScript file. We then simply use this “const” and pass it as an argument when calling the ”Moralis.authenticate()” function. Furthermore, we also pass the same “const” as an argument when calling the ”Moralis.enableWeb3()” function. As such, this is what the complete function looks like:
async function authenticate() { try { user = await Moralis.authenticate({ provider }); web3 = await Moralis.enableWeb3({ provider }); } catch (error) { console.log('authenticate failed', error); } renderApp(); }
enableWeb3()
Next up, we also have the ”enableWeb3()” function where we need to specify the provider. Since we want to authenticate users with WalletConnect, we will again utilize the same “const” and pass it as an argument. As such, this is what this function looks like:
async function enableWeb3() { try { web3 = await Moralis.enableWeb3({ provider }); } catch (error) { console.log('testCall failed', error); } renderApp(); }
This covers the needed steps for authenticating users with WalletConnect; however, there are additional elements to the complete dApp. If you’d like to look at the other functions and how they are connected to the buttons through on-click events, check the complete code at the Moralis GitHub repository.
Furthermore, you’ll also be able to take a closer look at the CSS file used to style the elements of the website. This can also be done according to your own preferences; however, taking a look might provide you with some inspiration for when you create your dApps.
Summary – What is WalletConnect?
WalletConnect isn’t an application but rather a protocol for establishing safe and encrypted connections between wallets and dApps. The protocol provides working integrations with more than 75 different wallets where MetaMask is one of them. As such, WalletConnect provides an even greater level of security than simply utilizing a crypto wallet.
Furthermore, it is possible to utilize WalletConnect to authentic dApp users, and it is straightforward when working with Moralis. As a user of the operating system, it is possible to authenticate users with a single line of code. Furthermore, in this article, we were able to create a demo dApp in three simple steps in a matter of minutes. This showcases the potential of working with Moralis. However, this is far from the limits of Moralis as it can be utilized in a variety of different blockchain projects. For example, you can utilize the system to develop your own NFT marketplace, build your first dApp, create a DeFi dashboard, and much more.
The platform also provides additional excellent development tools such as native support for IPFS, the Moralis NFT API, Price API, etc. Furthermore, if you want to learn more about the blockchain industry in general, visit the Moralis blog for fresh and exciting content which will keep you up to date. There you’ll be sure to find everything from a comprehensive Ethereum testnet guide, to a breakdown of OpenZeppelin, BEP20, ERC721, ERC1155, and much more!
So, if you are looking to become a blockchain developer, the first step is to sign up with Moralis. This will provide you with access to the infinitely scalable backend infrastructure allowing you to develop dApps quickly!