Using Firebase Authentication for the First Time

Heshan Andrews
3 min readJul 25, 2020

--

It’s 15.17 here in Kandy, Sri Lanka.

For our upcoming project in SEF, “ScholarX”, we got to provide users with a single-sign-in method to log onto the platform. Have never used firebase before, the goal is to build a web app using firebase and React. Let’s go.

Future me:- This is the simple web app I built in a single sitting while writing this article.

15.54 -

Created a new project in firebase. UI experience is remarkable. Got into a dashboard, let’s see what happens here.

Firebase Test Project

18.08 -

Delved a little deep into the subject, apparently, I have to create a web app under my firebase project and get the firebase config object, set up my web project using that object. npm install -save firebase is gonna provide all the necessary stuff. To use the sign in with google require to enable google authentication from the authentication tab in the firebase project dashboard.

18.17 -

Initializing a new typescript + react project to play a little with this object.

18.20 -

Here’s what I’m gonna do, Create a web app with two views

  • Sign in with google view
  • Profile view

19.58 -

This is how I configured the firebase for the app.

Services/firebase.utils.js
App.jsx

The process was super easy, Initialised firebase app with the provided firebase config object. Configured and used sign in with pop to add the sign in with google functionality. With onAuthStateChanged and signOut functions from firebase.app().auth() it was easy to get the user object when logged in and to provide the user with a logout button. I guess that’s it for the basic web app, now the fun part, making the UI bit more attractive.

20.31 -

Gonna create a UI to log in to hell using google.

22.02 -

Took a little time to create the UI. Found some new cool tools to create SVG shapes. Pushed to the GitHub and hosted in github-pages.

This is the basic web app I built to try and play around firebase authentication.

You can check it out if you follow this link -https://gravewalker666.github.io/welcome-to-hell/

The complete project can be found here in this gitub repo - https://github.com/Gravewalker666/welcome-to-hell/

Thanks for reading my friends! Hit me up on Linkedin. King Joff just died and Sansa ran away with Littlefinger, such a shame how a young, wise and fierce leader was poisoned and killed. Got to go and see what happens next. Goodbye, people.

--

--

Heshan Andrews
Heshan Andrews

Written by Heshan Andrews

Your average software engineering dude from South Asia

No responses yet