Join, compete & win! Prize pool of $100,000
Search
Generic filters

Web3 Firebase Authentication – Create a Web3 Sign-In with Moralis

Many programmers still focus on Web2 applications. However, with Web3‘s surging popularity and Web3’s growth reach all niches and industries, now is the best time to become a Web3 developer. If you’re an aspiring blockchain developer, you’ve probably realized that there is one feature practically all dApps need – Web3 authentication. Furthermore, you probably know that Firebase offers many neat and practical solutions for Web2, including signup and login features. But is there such a thing as “Web3 Firebase authentication” alternative? Fortunately, the Web3 tech stack has evolved significantly in the last couple of years, with Moralis leading the way. This Web3 development platform covers user authentication for your dApps without breaking a sweat. Also, Moralis’ cross-chain interoperability and cross-platform functionality offer a holistic authentication solution. Hence, developers consider Moralis the premier “Firebase for crypto” platform, offering Ethereum authentication and login solutions for numerous reputable programmable blockchains. 

Herein, we’ll demonstrate how Web3 development is way past the limitations of RPC nodes. In particular, we’ll show how straightforward Web3 Firebase authentication can be when using the right tools. To show this, we took on a simple challenge, which we will present below. As such, you’ll get to see us create a basic Web2 login using Firebase. Then, we will also do a Web3 login example using the Web3 Firebase authentication solution. Along the way, you’ll be able to learn how easy it is to get started with the best Web3 backend platform. Hence, you will walk away with the knowledge required to take your blockchain development further. Whether you want to build a simple dApp, launch a white-label NFT marketplace, create a Web3 music streaming service, or master the Unity Web3 scene, learning how to create a Web3 sign-in with Moralis is the place to start!    

What is Firebase?

Before we take a closer look at Moralis’ “Web3 Firebase authentication” alternative, we want to make sure that you know the basics. So, in case you are not sure what Firebase is, let’s start with that. Firebase is a platform developed by Google. It serves to make developing mobile and web applications easier. Firebase was originally founded in 2011 as an independent company. However, Google bought the platform in 2014 and made it into its flagship product for app developers. In short, it is a platform that offers basically everything that devs need to create killer Web2 applications. 

For instance, it accelerates app development with fully managed backend infrastructure. Also, it lets developers release apps with confidence and monitors the performance and stability of their applications. Nonetheless, it also offers tools to boost user engagement with rich analytics, A/B testing, and messaging campaigns.

Here’s a list of all the products contained within Firebase:

  • Cloud Firestore
  • Machine Learning
  • Cloud Functions
  • Authentication
  • Hosting
  • Cloud Storage
  • Realtime Database
  • Crashlytics
  • Performance Monitoring
  • Test Lab
  • App Distribution
  • Google Analytics
  • In-App Messaging
  • A/B Testing
  • Cloud Messaging
  • Remote Config
  • Dynamic Links

Now that you know what Firebase is, it shouldn’t surprise you that many Web2 developers rely heavily on this platform. However, we understand where things are headed and realize that Web3 is the future. Thus, you need a platform that would offer a similar holistic solution, such as Firebase, but for Web3. Fortunately, a group of advanced developers created Moralis – a Firebase for crypto alternative (a.k.a. Web3 Firebase). 

What is the “Web3 Firebase”?

Firebase works well for Web2 project, but Moralis is the “Firebase of Web3”. Specifically, Moralis offers the most advancing Web3 SDK, including the ultimate Web3 API. The latter incorporates the Ethereum API via the native API, resolve API, account API, and token API, including the extensive NFT API. Furthermore, with Moralis Speedy Nodes, Moralis is also one of the best blockchain node providers. Moreover, devs can connect to several reputable programmable EVM-supported blockchains, including Ethereum, Polygon, BNB Chain, Arbitrum, and Avalanche. Aside from cross-chain interoperability, Moralis can also be used for different platforms and devices. As such, you can dive into Web3 development with JavaScript (JS), React, React Native, or Unity skills easily. Aside from JavaScript proficiency, it’s beneficial to be familiar with the most popular Web3 walletMetaMask

According to more than 65,000 blockchain projects that use Moralis, the latter enables you to save 87% of development time. By taking all the guesswork out of backend development, you get to devote maximum focus on the frontend. As such, you are able to offer your customers a great Web3 UI

In addition, Moralis’ free version provides everything you need to get going. Your free Moralis account enables you to create a Moralis server and access its database (Moralis’ dashboard). When you combine the latter with the Moralis “sync” feature, you can effortlessly sync and index smart contract events. Hence, you have everything you need to index the blockchain. Nonetheless, you can also create a metaverse easily using Moralis’ Metaverse SDK. Plus, as if all that wasn’t impressive enough, Moralis’ experts created some additional shortcuts that come in the form of boilerplates. As a result, a wide range of web and mobile dApps can be created in minutes by using the ultimate Web3 boilerplate, Ethereum mobile boilerplate, or any of their forks.   

Web3 Firebase Authentication in Action

Now that you are all caught up and know what Firebase and Moralis are and why the latter can be thought of as a Web3 Firebase, it’s time to see these two platforms in action. We will first use Firebase to create a simple Web2 login. Then, we will use Moralis to create a simple Web3 login and leave it up to you to decide which is simpler. 

Creating Web2 Login with Firebase

We started by creating a simple React app, using the “npx create-react-app [app-name]” command:

Next, we installed Firebase. Since we are using the “yarn” package manager, we used the “yarn add firebase” command:

Note: If you are using “npm”, you’d need to use the “npm install firebase” command.

Moreover, we started with a fresh Firebase account. Hence, we clicked on the “Get started” button on Firebase’s official website:

Then, we logged in with one of our Google accounts:

As such, we needed to enter that account’s password to get access to Firebase. Once inside Firebase, we clicked on the “Create a project” button:

Then, we needed to complete the project setup. As such, we entered our project’s name, disabled Google Analytics, and waited for the project to be created:

Inside our project’s overview dashboard, we first accessed “Project settings”:

There, we selected the “</>” symbol since we have a web app:

Next, we had to give our new app a name and register it:

Firebase Web2 Authentication Code Walkthrough

Moving forward, we needed to add Firebase SDK to our project. We skipped the first step since we had already entered “yarn add firebase”. Hence, we focused on copying the configuration code from the Firebase configuration page. We pasted it into the “firebaseConfig.js” file, which we had created in Visual Studio Code (VSC):

Next, we deleted the comments and added the following line of code just below the existing “import” line:

import {getAuth, GoogleAuthProvider} from “firebase/auth”;

Then, we also added the following lines at the bottom:

export const provider = new GoogleAuthProvider();
export const auth = getAuth(app);

As such, you’ll end up with this:

After adding the above three lines of code to the “firebaseConfig.js” file, we were ready to code the “FirebaseAuth.js” file. This is the file that will ensure that our simple “Sign in with Google” interface works properly:

With the initial setting and the code set in place, we just need to select Google as a sign-in method. To do that, we went to the home page of our project’s dashboard. There, we clicked on “Authentication”:

Then, we selected the “sign-in method” tab and clicked on “Google”:

On the next screen, we only needed to switch the “Enable” toggle button to on, select our email address, and click on “Save”:

With everything ready, it was time to test this Web2 login. As such, we used our simple interface and clicked on “Sign in with Google” and selected one of our Google accounts:

 As you can see on the far right-hand side of the above image, our Web2 authentication was successful.

Web3 Firebase Authentication Solution

After completing the above Web2 login example, it was time to use our Web3 Firebase authentication alternative using Moralis. As such, we needed to start with some initial setups. Moreover, we followed the above example’s lead and stuck with React. As such, we used the React Moralis documentation and focused on the “Quick Start” instructions:

After using the above command, we started tweaking our “index.js” file, which we had created in VSC. First, we copied the code from the “Quick Start” section: 

ReactDOM.render(
  <MoralisProvider appId="xxxxxxxx" serverUrl="xxxxxxxx">
    <App />
  </MoralisProvider>,
  document.getElementById("root"),
);

Looking at the code above, you can see that we needed a Moralis app ID and server URL. Thus, it was time to complete the initial Moralis setup.

Initial Moralis Setup

Here are the steps you need to follow to complete the initial Moralis setup:  

  1. Create Your Free Moralis Account – Use the link on the left to get to the signup page. There, enter your email, create your password, and click on the link that will be sent to your email to confirm your account. However, in case you already have an active Moralis account, just log in
  1. Create a Moralis Server – After logging in to your account, you will access your Moralis admin area. Next, select the “Servers” tab. There, you will see the “+ Create a new Server” button in the top-right corner. If this is your first time using Moralis, you’ll be able to follow the on-page tutorial:

By clicking on the “+ Create a new Server” button, you’ll see a drop-down menu offering different network types (see screenshot below). Since this is an example project, we recommend selecting “Testnet Server”. This tends to be the best option when utilizing example projects or testing dApps.

Moving on, you’ll see a pop-up window asking for your server details. As such, enter your server’s name, then select your region, network type, chain(s), and click on “Add Instance” to spin up your server:

  1. Access Your Server’s Details – Now that your server is running, you can access its details. To do this, click on the “View Details” button: 


This will open a new window containing all the details you need. Moreover, there are copy icons on the right-hand side to easily copy the details. For the sake of this tutorial, we only needed the server URL and the application ID:

  1. Populate “index.js”The final thing you need to do is to paste the above-copied details into the appropriate fields inside the previously-presented “index.js” file:

Web3 Firebase Authentication Code Walkthrough

With the code from the Moralis documentation and server details copied, we needed to make some additional tweaks. As such, we just had to add the following “import” line to our code:

import {MoralisProvider} from "react-moralis";

Here’s what our finished “index.js” file looked like:

Next, we needed to get the “MoralisAuth.js” file ready. We started with some non-crucial “import” lines to cover the styling. Followed by these essential lines:

import React from “react”;
import {MoralisProvider} from "react-moralis";
Import {useMoralis} from “react-moralis”;

Then, we used several Moralis endpoints, including “authenticate”, “isAuthenticated”, and “user” from “useMoralis”.

Also, we needed to add a couple of lines of code to check if the user wasn’t authenticated. Moreover, essentially, we were able to do the authentication with a single line of code:

Finally, we also wanted our code to check if users are authenticated and respond accordingly:

Looking at the screenshot above, you can see that after successfully authenticating users, they will be greeted. Moreover, they will also get to see their address thanks to “ethAddress”. The above lines of code also provided our simple-looking example dApp with the “Sign in with MetaMask” login button. This is what the results looked like:

The above is the essence of Web3 Firebase authentication from the users’ perspective. As long as they already have the MetaMask browser extension set up, the process is seamless.

In case you are more of a video person, make sure to check out the above tutorial in video format:

Web3 Firebase Authentication – Create a Web3 Sign-In with Moralis – Summary

By looking at the above-presented login examples, you’ve been able to see the simplicity that Moralis brings to the table. As such, Web3 Firebase authentication done with Moralis actually requires fewer lines of code than Web2 authentication. However, we must all agree that Firebase does a great job when it comes to Web2. Yet, it doesn’t offer a Web3 solution. Fortunately, you can rely on Moralis to provide you with a smooth login experience in the blockchain world. Moreover, to further boost Web3 user onboarding success rates, you may want to consider Web3 authentication via email and Web3 social login. By making the signup process of your dApps familiar to what the average person knows, you will more easily attract the masses. 

However, you may need to expand your knowledge and confidence before you are ready to start creating your dApps. If that’s the case, we recommend checking out the Moralis blog and the Moralis YouTube channel. These two outlets are two of the best ways to get quality crypto education for free. They also host countless example projects and explanations of various crypto aspects. For instance, some of the latest topics focus on implementing blockchain game transactions with Unity, exploring gasless metaverse interactions, building a Web3 Spotify clone, creating an ERC-721 NFT, connecting Unity game with Web3 login, metaverse smart contract examples, building a cross-chain Zapper dApp with ReactJS, and much more. 

However, if you want to become a blockchain developer as soon as possible, you ought to take a more professional approach. Hence, consider enrolling in Moralis Academy. There, you’ll access some of the most advancing blockchain development courses. Moreover, you’ll become a valued member of an amazing community, get a personalized study path, and individual expert mentorship. 

March 17, 2022
Become a Moralis Mage
Get the latest information about Moralis Web3 in your email
Search
Generic filters
Related Articles
Become a Web3 Expert
Subscribe to our newsletter and get our E-book Web3 Speed run for FREE