Authentication of users on Ethereum for validation purposes is an essential feature when building Web3 applications. Therefore, programming the functionality of Ethereum authentication for dApps should be a significant priority for blockchain developers. Moreover, empowering users to log in and validate themselves enables users to check that blockchain data regarding their balances and transactions are accurately synchronized. However, Ethereum authentication and login programming can be a rather challenging and daunting task. As such, in this full tutorial to Ethereum login programming, we’ll explore the ultimate solution for Ethereum authentication that makes this development process feel like a breeze.
Fortunately, there is a simple Ethereum login programming solution available – Moralis. To get full access to this solution, all you need to do is create your free Moralis account today. By using Moralis’ SDK, you get access to simple Ethereum authentication solutions, which you can implement in seconds. Moreover, there are many programmable blockchains available these days, and Moralis has cross-chain interoperability built-in to its core. This means that you will be able to use its wide range of authentication solutions on all leading chains, including Binance Smart Chain (BSC), Polygon, Avalanche, and others. However, since Ethereum remains the leading network for deploying decentralized applications (dApps), we’ll focus on Ethereum authentication herein. We’ll first cover the basics and then take on an example project that will show you how Moralis eliminates all the overhead related to Ethereum login programming.
Why Do You Need Ethereum Authentication?
Every internet user nowadays currently relies on email and password authentication on a wide range of websites. That way, users get access to specific content and can set up their personal preferences, which are then stored as part of users’ accounts. The same type of authentication may be used for Web3 applications; however, that doesn’t bring forth the actual advantage of dApps. To ensure on-chain data access, users need to provide their blockchain addresses. However, manually doing so would not be user-friendly at all.
As such, semi-automated Web3 user authentication is most easily done with the use of blockchain wallets. Once users approve dApps to access their public address, they get to fully engage with Web3 applications. This means that they can display their fungible token balances, display their NFTs, trade their assets, put them to use (in NFT games), etc. With that said, when we focus on Ethereum’s chain, Ethereum authentication is essential for the users to experience the actual advantages of Web3.
Moralis’ Ethereum Authentication Solutions
Since many wallet solutions are available in 2021, Moralis decided to integrate only the most reliable options. The most popular, reliable, and leading wallet is MetaMask, which is used as Moralis’ default Ethereum authentication solution. However, to offer developers and users more options, Moralis also provides an additional solution – WalletConnect. Besides Moralis’ native support for MetaMask and WalletConnect’s Ethereum authentication, it’s possible to use any Web3 provider as well. Of course, this requires additional lines of code; however, it’s still easily implemented.
What is MetaMask?
As mentioned above, MetaMask is one of the most popular and trusted cryptocurrency wallets on the market, and it’s been around since 2016. Moreover, it was originally designed to support Ethereum’s blockchain. However, as new chains started to emerge, MetaMask developers offered users an option to add other chains. However, by default, Ethereum’s mainnet and testnets are set up.
Besides being a wallet, MetaMask serves as a gateway to the Web3 world. This is exactly the feature Moralis exploits to offer a developer-friendly and user-friendly Ethereum authentication solution. Feel free to dive deeper into the topic of “what is MetaMask?” by checking out one of our past articles covering that topic. Furthermore, if you do not fully understand MetaMask’s use cases yet, feel free to take a closer look at MetaMask authentication.
What is WalletConnect?
Following WalletConnect’s official definition, WalletConnect is an open-source protocol for connecting dApps to mobile wallets. It supports a wide range of mobile wallets and enables establishing the connection with QR code scanning. It is reputable and, in some aspects, a safer choice compared to desktop or browser extension wallets. When a user scans a QR code (normally used on desktops) or clicks an application’s deep link (normally used on mobile devices), the WalletConnect session starts. If this is the first time you’ve heard about WalletConnect, we recommend checking out the FAQ section at walletconnect.org. In addition, we recommend taking a closer look at our article explaining how to authenticate users with WalletConnect.
What is Moralis?
Unless you’re new to blockchain development, you’ve most likely heard of Moralis before. This ultimate Web3 development platform is offering a complete paradigm shift when it comes to creating Web3 applications. It enables everyone proficient in JavaScript and able to use MetaMask to start creating decentralized applications quickly and easily. It makes that possible by taking care of the entire blockchain-related backend aspects of dApp development. Essentially, developers get to copy and paste short snippets of code provided by one of the neatest documentations in the industry.
When you use Moralis to build dApps, you overcome all limitations of RPC nodes with ease. You get to deliver functioning Web3 applications markedly quicker and with resources to spare. Moreover, thanks to Moralis’ cross-chain interoperability, you ensure that your dApps are future-proof. As such, Ethereum authentication solutions are just one of the many powerful tools that this Web3 development platform offers.
Furthermore, Moralis provides a wide range of videos (on Moralis’ YouTube channel) and blog posts (on Moralis’ blog) covering crypto concepts and example projects to help you scale up your knowledge and skills. As such, Moralis is a great place for beginners and experienced developers alike. Whether you want to know how to become a blockchain developer or if you have a specific programming task in mind (regarding NFT token development, BEP20 token development, upload NFTs to OpenSea, etc.), Moralis has your back.
Now, let’s take on an example project to show you how easy Ethereum login programming can be.
Using Ethereum Authentication – Ethereum Login Programming Example
Now that you know the basics, we’re ready to take a closer look at how to add authentication features to different dApps easily. Moreover, as a developer, you want to make sure that you cater to users on both desktop and mobile devices, which is something where many dApps fall short. As such, we’ll use a Web3 application demo to show you Ethereum authentication programmed on desktop and mobile with the help of Moralis.
Using Ethereum Authentication – Finished Demo dApp
Let’s have a quick overview of what we’ll be creating and how it will function on desktop and mobile. We will start with the former.
Finished Ethereum Authentication Demo dApp on Desktop
As shown in the image below, you can see that our demo app will have two buttons. That way, we’ll give users an option to choose between signing in with MetaMask or WalletConnect.
Users with MetaMask’s browser extension or application installed will click the “Sign in using MetaMask” button. This will automatically evoke MetaMask, where they’ll need to click the “Sign” button to confirm the authentication:
On the other hand, users that prefer using another Ethereum authentication option will click the “Sign in using WalletConnect” button. This will return a pop-up window/modal with a QR code:
When users sign in using either of the two methods, the “Logout” button in the top-left corner and the “Wallet Logged in” message in the bottom right will appear:
Finished Ethereum Authentication Demo dApp on Mobile
When on a mobile device, we want to focus on signing in using WalletConnect since that option supports a wide range of mobile wallet applications. Here are the images of the steps that users would need to follow on their smartphones:
As you can see (in the second step on the image above), there is a wide selection of mobile wallet applications with WalletConnect support. For this example, we used Trust Wallet. Following are two confirmation steps, and in the final image, you can see that we are logged in.
Ethereum Login Programming for Our Demo dApp
We do not want to overwhelm you with the entire code herein; as such, we’ll only take a closer look at specific code snippets. However, we suggest taking a detailed look at the complete code, which we made available on GitHub.
For the purpose of creating our demo code, we’ll use a simple React template, which includes multiple JavaScript (JS) files. “App.js” and “index.js” will be of our main interest. It’s in the “index.js” file where we need to enter our Moralis application ID and server URL (for details, see Moralis’ Quick Start). This will provide us with access to Moralis’ tools, including its powerful Web3 API.
Note: Do not use the application ID and server URL from the code below, but instead, use your own details from your Moralis server.
const moralisAppId = "77IfzDQc5dLFD3YbNKeuNrxHGe2c5OWGoMxgfLTU";
const moralisServerURL = "https://ioc7ccqovdu5.grandmoralis.com:2053/server";
ReactDOM.render(
<React.StrictMode>
<MoralisProvider appId={moralisAppId} serverUrl={moralisServerURL}>
<ChakraProvider theme={theme}>
<App />
</ChakraProvider>
</MoralisProvider>
</React.StrictMode>,
document.getElementById("root")
);Furthermore, inside the “App.js” file, we are importing the Moralis React package and the “useMoralis()” hook:
import logo from "./MageLogo.jpg";
import React, { useEffect } from "react";
import "./App.css";
import { useMoralis } from "react-moralis";
import { Button, Box, Heading } from "@chakra-ui/react";
import { Container, Center } from "@chakra-ui/react";
const LogoutButton = () => {
const { logout, isAuthenticating } = useMoralis();As a matter of fact, most of the functionality will come out of this hook; thus, it is used across the “App.js” code multiple times.
Let’s now focus specifically on the “authenticate()” function.
Ethereum Login Programming – The Authenticate Function
The “authenticate()” function enables us to get most of the heavy lifting done with minimum effort. Furthermore, since MetaMask authentication is the function’s default option, it doesn’t require any additional parameters when going after this kind of authentication. However, if we want to go after other Ethereum authentication solutions, additional parameters are necessary:
async function authWalletConnect() {
const user = authenticate({
provider: "walletconnect",
chainId: 56,
// mobileLinks: [
// "metamask",
// "trust",
// "rainbow",
// "argent",
// "imtoken",
// "pillar",
// ],
signingMessage: "Welcome!",
});
console.log(user);
}Looking at the code above, keep in mind that “chainId” can be for any other EVM compatible chain (in our case, 56 is for Binance Smart Chain).
Note: You may also use chains that are not EVM compatible (such as Elrond); however, in that case, you need to utilize the “Non-EVM Chain Login” section of Moralis’ documentation. In case that is something you want to learn about, make sure to watch our video about Elrond login programming.
Furthermore, the code lines starting with “//” are currently converted to comments (would be activated by removing “//”). If activated, these lines of code enable us to focus only on specific mobile wallet app providers supported by WalletConnect. The latter can be useful in case we have a specific set of mobile wallet app providers that we trust. Moreover, it can also be helpful to avoid overwhelming users with too many options.
If you would prefer watching a video, feel free to watch one of Moralis’ experts covering the code related to our demo dApp in more detail:
Also, note that there is an extremely detailed explanation of the “authenticate()” function and other crypto login aspects available inside Moralis’ documentation. The explanations include code examples and videos covering some simple use cases.
Ethereum Authentication – Full Tutorial to Ethereum Login Programming – Summary
Assuming you’ve covered all of the sections above, you’re finally ready to create your own dApp. With Moralis, it shouldn’t take you long as you’ll spend minimal effort and time on Ethereum login programming and other backend aspects. Moreover, Moralis will enable you to take care of Ethereum authentication with short snippets of code. In fact, the “authenticate()” function is what you will use for that purpose. Moreover, in the case of using MetaMask authentication, you don’t need to add any parameters since it’s the function’s default option. However, when using WalletConnect, which is a favorable option for authenticating mobile users, some additional parameters are necessary.
In addition to the information obtained herein, if you aspire to become a blockchain developer, specifically an Ethereum developer, make sure to check out our Ethereum development for beginners guide. In that guide, you’ll discover the necessary tools in order to succeed when developing on Ethereum. Moreover, once you’ve completed that guide, make sure to advance your blockchain knowledge even further by learning how to build Ethereum dApps. Moreover, NFT development has never been easier than with Moralis’ ultimate NFT API.
With the tools and expertise from Moralis, you have all the required knowledge to build next-gen applications. Implementing Ethereum authentication for your dApp is just the beginning. So, sign up today, and let Moralis guide you in your development journey from start to finish!
