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.
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.
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.
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.
Open up your terminal and:
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.
gatsby-node.js file in the root directory.
Finally, create a file in the
pages directory called
Copy this starter UI
http://localhost:8000/login and you should see this
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.
I’m going to create two hooks
This will be for passing around the initialized Moralis client.
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!
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/