How to Do Web3 Authentication via Email?

Incorporating elements from the Web2 space to the Web3 realm would be highly beneficial. By implementing features that regular users are familiar with, blockchain adoption will come sooner rather than later. One of such features that Web2 users are familiar with is email authentication. However, since blockchain authentication is often limited to Web3 wallets, would it perhaps be possible to achieve Web3 authentication via email? Fortunately, there is a seamless way to do email authentication for Web3. Furthermore, you can quickly implement Web3 login with an email option with the proper tools. By implementing this authentication method into dApps, the general public will be more inclined to adopt Web3, as they’ll be more willing to utilize platforms that use familiar authentication features.

Moving forward, you’ll learn the details about the tools that make Web3 login with email possible. The key to this feature is the ultimate Web3 development platform – Moralis, and its integration of Magic (Magic Labs). Furthermore, we’ll show you a demo of Web3 authentication via email. That way, you’ll see how things function once set in place. In addition, we’ll also take on an example project. As such, we’ll show you how to implement this login method into your dApps (decentralized applications). With that skill under your belt, you will be able to use this user-friendly login option for all your future Web3 apps. Moreover, you will have a chance to enable Web3 login with email for any of your existing dApps built with Moralis. Now, in case this is your first encounter with Moralis (a.k.a. Firebase for crypto), make sure to create your free account before moving on.  

Web3 Authentication via Email

As mentioned above, Moralis’ integration of Magic is a powerhouse when it comes to Web3 login with email. The combination of these two tools enables you to offer users a familiar login method on the frontend. In addition, these tools automatically create a unique Web3 wallet address on the backend. The latter enables users to fully engage in all that Web3 has to offer. Now, the best way to get a full grasp of how Web3 authentication via email functions is to take a look at a demo.

Web3 Login with Email Demo

For the purpose of this demo, we created a pretty simple login page:

As you can see from looking at the image above, our login page has an email address entry field and a login button. You probably agree that most average users would intuitively know to enter their email address and click the button, right?

After clicking the button, the authentication process starts. The latter includes a couple of automated actions. First, a pop-up window is shown to the users:

The message instructs the user to check their email inbox. Hence, the second automated part is sending the user an authentication email. This email can be fully customized; however, by default, you are looking at something like this:

As depicted in the screenshot above, users must click on the login button (link) within the authentication email. After clicking the link, users will be logged in and see the following message:

Successful Web3 Authentication via Email

By following the instructions in the above pop-up message, users need to return to the original tab. From this point on, it’s up to you to create a dashboard of your choice. As such, you get to decide what logged-in users see. For the sake of this demo, we decided to display users’ account addresses and their balances. Moreover, we’ve also included three buttons: refresh, sign out, and one to perform test transfers:

The purpose of the above screenshot is to show you that this type of Web3 login with email really works. As you can see, we get all the information needed (address and balance) to perform all sorts of Web3 functionalities. For instance, we can easily transfer assets. Moreover, to prove that sending assets is possible, we click on the “Test Transfer” button. A confirmation message confirms our action:

The image above even shows you the MetaMask wallet we’ve sent test assets to. Furthermore, Magic even enables us to avoid dealing with seed words or passwords for a seamless user experience. Hence, for users, things can be as simple as entering an email address and clicking on a confirmation link. 

Why Implement Web3 Authentication via Email?

If you’ve used any Web3 applications, you are most likely familiar with Web3 authentication or Web3 login. You know that it typically requires you to sign a confirmation message using a hot wallet such as MetaMask. While this is a simple process for users that already have wallet extensions set up, it can be a rather overwhelming task for newcomers. Hence, offering your users a method that they are completely familiar with has its advantages. As such, you should consider offering Web3 authentication via email in dApps that are catering to users new to Web3.

How to Do Web3 Authentication via Email – A Step-by-Step Overview

Now that you know how practical Web3 login with email can be for new users, it’s time to see how to implement it. Moreover, if you’ve already created dApps with Moralis in the past, you can easily implement Web3 authentication via email. After following our lead herein, we recommend you dive deeper into Moralis’ documentation. So, here are the steps you need to follow:

1. Get your Magic API key by visiting the official Magic website. Click on the “Get Started” button and complete the registration procedure: 

With your Magic account created, you will get access to your API key.

2. Next, you need to add the Magic SDK to your project. Depending on your project, you can do this either with the script (when you imported Moralis’ SDK via CDN) or via NPM (when you imported Moralis’ SDK via NPM):
   1. Via CDN: <script src=”https://auth.magic.link/sdk”></script>
   2. Via NPM: npm install magic-sdk

3. Use the following lines of code:

const user = await Moralis.authenticate({ 
  provider: "magicLink",
  email: "[email protected]",
  apiKey: "pk_xxxxx",
  network: "kovan",
})

Looking at the lines of code above, you can see that it requires a couple of parameters. If you want to use Magic links, “magicLink” is what you need to use next to “provider”. Next to “email”, you need to use the email address of a user that wants to log in. As such, you’ll need to connect this parameter with the email capture field. Next to “apiKey”, you paste your Magic API key. Finally, next to “network”, you get to choose between the mainnet (Ethereum) and one of the Ethereum testnets. 

Web3 Login with Email – An Example Project

Note: To follow along easily, make sure to use the code provided for the sake of this example project. This is the same project as presented in the demo above. It is available on our GitHub page.

As you can see, offering Web3 login with email in your dApps is quite simple when using Moralis. All it takes are the above three steps. Let’s now take on an example project. In case you haven’t done so yet, make sure to complete the first two steps from the previous section. Next, use the “SignIn.js” file, which we’ve created for the sake of this example project. This is where we need to implement the lines from the third step of the previous section:

  const [email, setEmail] = useState("[email protected]");

  const handleCustomLogin = async () => {
    await authenticate({
      provider: "magicLink",
      email: email,
      apiKey: "",
      network: "kovan",
    });
  };

Note: Make sure to use your own Magic API key next to “apiKey”.

In case you are more of a video person, you can watch over the shoulders of one of Moralis’ experts as he implements the above lines of code. If that interests you, watch the video below, starting at 5:41.

Moralis’ Web3 Authentication via Email Feature

Those of you who have been creating phenomenal dApps with the help of Moralis before can implement Web3 authentication via email (as instructed above) right away. However, if you are new to Moralis, you first need to complete some basic setup steps. As such, let us guide you through the initial Moralis setup.

Moralis Initial Setup – Part 1 

1. Create Your Free Moralis Account – Use the link to the left to access the signup page. Then, create your free account by entering your email address and creating your password. Also, make sure to confirm your account (click on the confirmation link sent to your email). However, in case you already have an active Moralis account, just log in.

2. Create a New Server – Once you’ve successfully logged in to your Moralis admin area, go to the “Servers” tab. There, click on the “+ Create a new Server” button in the top-right corner. From the drop-down menu that appears, select the network type that suits your needs (see the image below). When working on example projects or early stages of your own projects, going with the “Testnet Server” option makes the most sense.

With the server type selected, enter your server’s details in the new pop-up window. You need to give your server a name, then select your region, network, and chain(s):

Finally, you need to spin up your server by clicking on the “Add Instance” button. Please note that it can take some time for the server to start. 

Moralis Initial Setup – Part 2 

3. Access Server Details – With your Moralis server up and running, most of the Moralis features become available to you. Among others, you get to access your server’s details. For that purpose, you need to click on the “View Details” button next to your server name: 

After clicking on “View Details”, a new pop-up window will present you with your server URL, application ID, and more. This is also where you can access the Moralis “sync” feature. Moreover, you get to copy the details in question by using the copy icons:

4. Initialize Moralis – You now need to initialize Moralis and unleash the full power of its SDK. This includes the ultimate NFT API. So, you need to populate your coding file with your server’s details. When you are building your dApp from scratch, this will be a “.html”, “.jsx”, or “.js” file. However, taking the ultimate shortcut by using the most practical Web3 boilerplate, you’ll be populating the “.env” file. As such, copy and paste your Moralis server’s details (application ID and server URL):
   1. When using the ultimate Web3 boilerplate:

2. When creating dApps from scratch (“.js” file):

Note: Do NOT use the details from the image above. Instead, make sure to use the details of your server.

Web3 Login with Email and Your dApps

As mentioned in the final step of the initial Moralis setup sequence, you have two options when it comes to creating dApps. Thus, you may use the Moralis Web3 API to build dApps from scratch or use the ultimate Ethereum dApp boilerplate. Each of the two options has its own advantages. For instance, when starting from scratch, you have complete freedom to create a unique UI. Hence, it is the way to go when a unique appearance is your primary goal. 

On the other hand, you can use components with a user-ready UI when working with the boilerplate. As such, the latter enables you to have a dApp with a neat UI up and running in minutes. Thus, the boilerplate offers you the path of least resistance. Moreover, it is the way to go when functionality in the shortest time possible is your prime concern. If that sounds interesting, we recommend checking out our boilerplate projects. 

How to Do Web3 Authentication via Email – Summary

At this point, you are probably really excited. Knowing that there’s a way to onboard users to Web3 applications with them basically not knowing anything about crypto wallets is quite incredible. Furthermore, combine this with the simplicity of creating dApps with Moralis, and you have a decent arsenal on your hands. 

Moving forward, we encourage you to put that power to use. If you have your own idea, by all means, tackle them right away. However, in case you need some practice and guidance, make sure to use the Moralis blog and the Moralis YouTube channel. Both of these outlets offer many example projects and great explanations of various crypto topics. For instance, some of the latest topics revolve around React Native Web3 dev, Web3 gamification, NFT game characters, how to mint 10,000 NFTs, Web3 data science, the ultimate Web3 UI kit, ERC721 smart contracts, Alchemy alternatives, upgradable smart contracts, and much more. This method is one of the best free crypto education paths available online.

However, if you are interested in a more professional approach, you need to consider enrolling in Moralis Academy. By doing so, you get access to countless pro-grade blockchain programming courses. On top of that, you get to engage with one of the most advancing and supportive communities. Nonetheless, you get professional mentoring from blockchain experts. As such, you ought to become a blockchain developer and go full-time crypto in no time.