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:
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
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
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
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.
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
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.
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
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
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
<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
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.
const loggedIn = false; and replace the
loggedIn property in our conditional with
Before we can see this working, we need to add
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:
Set up sign-in method. Find
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: .
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
If you check the browser now, it should show your name. And more importantly, it will show your user’s name.
Granny isn’t crying anymore.
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
- There is also a lot more you can do with
react-with-firebase-authand several other providers to explore. You can read the package docs here, or check out the other auth providers in the
Authenticationsection 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.
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.