Deploying and Authenticating a React App with Google’s Firebase

Lee McGowan
Dec 9, 2019 · 8 min read

With services like AWS available to everyone, it’s easier than ever to get your app on the internet. And AWS is incredible, especially for large-scale corporations who have the resources to leverage the kind of power it gives you.

But what if you’re a small business? Or a single developer? Is AWS suitable for you? Maybe. But I once ran up a $300 bill because I forgot to turn off single EC2 box. And Jeff Bezos is a… controversial figure.

For those who want something different, there’s Google’s Firebase.

What is Firebase?

Firebase is a platform offering a suite of services such as authentication, hosting, databases and a lot more. You can also integrate your applications with Google’s analytics service. The free tier is extensive and sufficient for most small use-cases. And I’ve never run up a bill with them.

Firebase with React

One of the best things about Firebase is its easy integration with React projects. There’s even a react-with-firebase-auth npm package which makes setting up authentication super easy.

What’s the plan, then?

In this post, I’m going to take you through installing firebase into a react project, deploying it to the web & setting up Google authentication. I’ve already created a repository on Github with some code in it so that we can skip the initial React stuff, but the steps here will work equally well with your own project.

You can find that here. (I managed to misspell the name. Sue me.)

Creating a Firebase Project

The first step is creating a project through the Firebase console. Click here and log in to your Google account. You should see a button like this:

Hit it.

Follow the instructions on screen. They’re pretty self-explanatory. You don’t have to enable Google analytics but it also doesn’t really matter if you do, so go wild, cowboy.

Google will create your project, which takes a while because Google is only a small corporation and thus lacks the processing power to do it quickly.

When it’s done, have a drink. You’ve earned it.

Installing Firebase into the Project

Next step is to initialise your project with Firebase. Easy game. Just run npm i -g firebase-tools. Then firebase login. This should open a browser window where you can login to your google account.

Once that’s done, run firebase init at the project root. A list will appear; select hosting, only. At the next menu, select Use an existing project and then the project you just created. For the next one, set your public directory to be build/ as this is where create-react-app deposits the build files. Answer yes to rewriting all URLs to /index.html (this is needed for single page applications). Answer no to overwriting index.html.

Deploying the App

Now that the project is initialised, it can be deployed to the web. Run firebase deploy at the root of the project. If everything’s gone well, it should upload some files and then spit out a URL which you can click on to see your app running. You even get a free SSL cert. Marvellous.

Initialising Firebase in Code

Create a firebase.setup.js file in the src/ folder. Add the following.

This file is responsible for setting up Firebase services. As we’re only using auth, that’s all we’ve put in here.

firebase.config is a file we haven’t yet created. It will contain the autogenerated config that Firebase creates for us. I’ll explain where to get that next.

firebaseApp is the object returned when we initialise a Firebase application with firebase.initializeApp().

firebaseAppAuth is the object returned when we call firebaseApp.auth(), and this initialises the authentication service for our application.

providers contains all the auth providers we want to use for this project. For now, it’s only google.

We export providers and firebaseAppAuth because we need to use them later when we establish a way to login to our app.

Getting your Autogenerated Firebase Config

Navigate to your project in the Firebase console. You should see a page like this:

On the left hand side is a toolbar, and on the top right of that, next to Project Overview, is a cog icon. Click on that and go to the project settings.

Scroll down til you see something like this, and then select the Config button:

Copy the firebaseConfig JSON object into src/firebase.config.js. Make sure you also write export default firebaseConfig; at the bottom of that file.

The config probably shouldnt be stored somewhere public like Github. It’s fine for learning purposes, but in future consider somewhere more secret.

Importing FirebaseSetup and Running the App

Once you’ve completed this, you can import * as firebaseSetup from ‘./firebase.setup’; in your App.js file and then run the project with npm run start. Load it up in the browser and check there are no errors in the console.

Using Google Auth

The last step is installing the react-with-firebase-auth package and using it to setup Google authentication.

Run npm i react-with-firebase-auth. Then, update your App.js file so it looks like this:

Here, we imported the higher order component (HOC) provided by react-with-firebase-auth and wrapped the component export with it. We passed it the providers and firebaseAppAuth objects which we exported from firebase.setup.js. Then, we added three props to the App component, all of which are passed down to it from the withFirebaseAuth HOC.

signInWithGoogle is a function which enables users to sign in with their google account.

signOut signs a user out.

user is the user we’re signed in as.

Check me, captain obvious 😎.

Logging in the User

The <Login /> component already renders a button for logging in, so simply pass the signInWithGoogle function as a prop to that component.

Then use it in the <Login /> component.

Showing the User they’re Logged In

When the signInWithGoogle function is called and the user authenticates, the withFirebaseAuth HOC re-renders. It then passes a user prop to our App component containing info about the person who has just logged in. We can use that to check if someone is logged in to our app.

In App.js, remove const loggedIn = false; and replace the loggedIn property in our conditional with user:

Before we can see this working, we need to add Google as an AuthProvider in the Firebase console. To do this, go back to your project page and select Authentication from the left-hand sidebar. You should see something like this:

Now, click Set up sign-in method. Find Google in the list, select the pencil icon to edit and then enable it as a provider. You also need to enter a support email address. Save when done.

With all that complete, restart your app and load it in the browse, then hit the login button and watch the magic happen. Google should redirect you to their own authentication page, and once you’ve provided your details or selected an account, it will send you back to our application and you should see Hello, you are logged in as: .

Congratulations blank, you’ve done it. Your application is officially authenticating with Google. Glory be.

Still, it’s kinda disrespectful to call your users blank, as if they mean nothing. To be honest, you should be ashamed of yourself. What would your granny say?

To fix it, we can pass the user prop down to our <LoggedIn /> component.

And then render user.displayName in <LoggedIn />.

If you check the browser now, it should show your name. And more importantly, it will show your user’s name.

Well done.

Granny isn’t crying anymore.

Next Steps

Although we have a working app, and for some this method of authentication and deployment will surely be enough, we have really only scratched the surface. There are several paths you could take from here.

  • Currently our users are perpetually trapped in our application. There is no escape. If you’re not attempting to create some sort of digital prison, (no judgement if you are 🚓) then you may want to add a logout button.
  • There is also a lot more you can do with react-with-firebase-auth and several other providers to explore. You can read the package docs here, or check out the other auth providers in the Authentication section of your project’s console.
  • Finally, Firebase offers loads of other stuff, like data storage. You could create a form component where users can submit compliments and then store them all in Firebase’s realtime database for future reading. The compliments could even be about me. Wouldn’t that be great? Asking for a friend.

Finit

I love writing stuff, and it brings me great joy to know that others are reading it, even if they’re simultaneously blocking me on all forms of social media due to my irritating personality and tendency to ramble off on a tangent that has absolutely nothing to do with anything, which my dad used to say was a serious problem I had — usually when other family were around to back him up because I guess he thought it would make the comment sink in more — but truth be told I don’t really see it, although maybe that’s because none of us are really good at examining the flaws which define us.

If you want to read more of this utter shit, check out my profile. Seriously, do it. It’s great for testing your temper.

Goodbye.

Lee McGowan

Written by

I write about programming, and I write about writing. I also might write about philosophy, if I ever get ‘round to engaging my tiny brain.

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade