Exploring Moralis — Web3 Authentication

Introduction

My friend Ryan Hansen recently told me about Moralis, a new serverless platform for building Web3 Applications. This seemed like a good opportunity to try something new out!

Today I want to show you all how to add authentication with Moralis into your web application.

Before we begin, it’s important to understand what Web3 is.

Web3

It’s funny, Web 2.0 is just the “Web” these days. It’s hard to imagine a world without mobile internet, social media giants, and cloud computing. Just as Web 2.0 was emerging in the mid 2000s, a new paradigm shift is upon us.

Web 3 can be described as:

‘Open’ in that they are built from open source software built by an open and accessible community of developers and executed in full view of the world.

‘Trustless’ in that the network itself allows participants to interact publicly or privately without a trusted third party.

‘Permissionless’ in that anyone, both users and suppliers, can participate without authorisation from a governing body.

Written by Max Mersch and Richard Muirhead in https://medium.com/fabric-ventures/what-is-web-3-0-why-it-matters-934eb07f3d2b

In the world of decentralized applications, frontend engineers will need to adjust their understanding as Web3 evolves. Thankfully there are smart engineers with good foresight building tools that should make the transition from building in Web 2.0 to Web3 like you never left.

Moralis

Great tools allow engineers to focus on their business/project objectives and defers to the tool for all the bullshit. Why do users use products like Firebase, Hasura, GatsbyJS, or NextJS? They do so because no one wants to write all that glue code for the 50th time in their career.

Moralis is all that. With Moralis you get the Web3 Backend infra. You get to focus on building the application.

Super useful features:

• Authentication — every app needs auth. don’t build auth. i’ve done it too many times and it’s never worth it.
• JSON Store— every app needs a data store.
• Websocket “subscriptions” — more and more UIs are initializing data over wss. Having this in the toolbelt is great.
• Cloud functions — JS functions that can interact with the data store and do whatever you need.
• File storage — upload files

Seems like a good utility belt to me.

Today I’m going to play around with Web3 Authentication.

Getting Started

To preface this, I work at Gatsby, Inc. So I’m going to use that to simplify the frontend toolchain. So shameless plug, you SHOULD use GatsbyJS for this. :)

Open up your terminal and:

gatsby new

Follow the CLI wizard. Make sure you select the option “configure” for Gatsby Cloud. We’ll need this later.

In your newly created directory lets install dependencies

yarn add moralis node-polyfill-webpack-plugin

To use Moralis in the browser we need to add the appropriate node polyfills.

Create a gatsby-node.js file in the root directory.

Finally, create a file in the pages directory called login.js

Copy this starter UI

Run

yarn start

Navigate to http://localhost:8000/login and you should see this

Moralis Backend

Moralis is in Beta, you can sign up for access at the bottom of the page at https://moralis.io/. Make sure you verify your email!!

Once you’re logged in you’ll see your server list. You can create new environments to mainnets, testnets, or even locally using the truffle suite.

Let’s add a new server.

I picked the closest region to me and the testnet. Once the server is up and running we can continue.

Login Hooks

I’m going to create two hooks

This will be for passing around the initialized Moralis client.

Next

Here we expose a login, logout, and currentUser method.

Let’s import this back into the login page and take it for a spin

By default Moralis authenticates with Metamask.

After signing, I am taken to the home page that came with our project.

Displaying User info

Let’s change the homepage to display the current user’s ETH Address and a button to logout.

If we go through the login flow again we’ll end up on our home page!

Next I’m going to use Gatsby Hosting to put up my demo site to share with ya’ll. Make sure to hide your environment variables.

Gatsby Hosting will deploy my app to a CDN. Now I have my demo site ready to share with everyone

If you want to login to the app try it out here!

https://exploringmoralismaster.gatsbyjs.io

Conclusion

I’m going to pause here and go enjoy my Saturday :). I am super impressed with how quickly an engineer can get setup with an arsenal of tools.

Authentication is a table stake feature available in every application. I just got authentication for my future dapp in under an hour.

We used a collection of awesome tools. First we spun up our site super fast with gatsby new. We leveraged React to make UI’s super fast. We leveraged Moralis for our dapp infrastructure. Finally we deployed our app to a CDN with Gatsby Hosting. All that in an hour. Wow.

I’m going to build upon this in my next post, where we build a profile page!

If you liked this post, please give it a clap!

You can follow me on twitter https://twitter.com/abhiaiyer

If you’re interested in GatsbyJS http://gatsbyjs.com/

And take a look at Moralis at https://moralis.io/