Firebase Authentication Setup Guide
By: Steve K
Tags: Development, Firebase, Technology, Learning, Programming

Photo by Micah Williams on Unsplash

This week will be a quick tutorial on setting up Firebase authentication for your web application in place of authenticating on your own. Our first step is setting up a google account to use firebase if you already have a Gmail then you are already done as you can use that to access and work with Firebase.

This part is pretty simple we are going to be creating a project in Firebase to house our backend and setup authentication via email and password.

Create a Project

2. Again straightforward we are naming the project it will be referenced by in Firebase.

Name your project

3. Here we are selecting if we would like to opt in to use Google analytics. The creation of the project should take a couple of minutes as it will be provisioning the required space as well as a structure for the database.

4. From here we want to click on either the Authentication option on the left side panel or the main screen button.

Click Authentication to begin the process

5. Here we will click the edit button on the right of Email/Password to activate authentication with those credentials.

Click the pencil icon to the right of Email/Password

Hit Enable

6. Here we are going to switch over to our Users tab to create a test user.

The User tab is to the left of the tab we were previously in (Sign-In Method)

Test user created!

7. Here the user is created and we will need to make note of the User UID as that will be the identifier in most cases in any web application to get content or data specific to the user.

Make note of the User UID

8. Now we have to move over to configuration to connect firebase to our web application. The cog icon next to Project Overview in the sidebar will take us to where we need to go.

Project Settings!

9. Once you have navigated to the settings page at the bottom right we will be clicking the code icon (web-app icon) to get redirected to the page where we can add our web application to firebase.

Bottom Right Code Icon!

10. Fill out the form and add a nickname and make sure you select firebase hosting as this will be used when your application is deployed. Once you hit register firebase wizard will walk you through the next steps but I will be showing you how to do most of this via the console so we can hit next and skip through this for now.

Make sure Firebase Hosting is checked

11. From here most of the integration on the Firebase website is complete. Now you will want to head over into your repo and in the console, we will type in and run the below command to install firebase tools.

npm install -g firebase-tools

12. After that we will log into firebase from the console similarly to how its done with Heroku or Netlify.

firebase login

13. Once logged in via the console run the following command.

firebase init

Type y when asked for confirmation. You will then be asked what is written below.

Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices.

14. Here we will be selecting Configure and deploy Firebase Hosting sites.

( Use Up/Down arrows to navigate the list. Spacebar to select)

Here we want to use an existing project because we are connecting to the project already created on Firebase.

Use the project we created on Firebase to continue

15. Now it will prompt what directory to use as public, it is the build directory of your react app by default, so input build and press enter.

16. It should then ask if your application is a SPA( Single Page Application ).

17. With this Firebase is now initialized in our project. From here we just need to configure the APP_KEYS.

18. At this point we will need to add data to a .env file it is a good practice to have both a .env.development and .env.production. So in case of any mishaps you strictly have only been working in the development env.

19. From here we need to move back to the Firebase console to the settings page where we left off. Here we will be grabbing the Configuration under Firebase SDK snippet.

This application is already gone!

20. Now we need to move back to our env file and fill out all of the relevant variables that firebase provided us with.

Plug in the Firebase variables into the env

Note that the REACT_APP_NAME will take whatever value you want to be displayed. As for REACT_APP_DEFAULT_USER_ID we can plug in the User UID we held onto from Firebase previously.

21. Once that information is filled out and in both env files its time to build and deploy the application.

npm run build --prod

22. Run the following command to deploy the project.

firebase deploy

23. Once the deployment is complete we have one last step to complete and that's creating the real-time database ‘firestore’. Head over to the firebase console again and select the database from the sidebar.

Realtime Database

24. Create a database in the region closest to you and for simplicity we will choose test mode.

Selecting Test mode was for this guide you can choose locked mode if you plan on deploying immediately

25. From here our firestore database is configured and ready to receive and store data. With this Authentication is set up and integrated and our test user can access it as needed.

This guide didn’t have a specific web application in mind but was more focused on utilizing firebase to handle user authentication and login. The framework is fairly straightforward and simple to use. Firebase also comes with many baked-in social logins already available if you plan to authenticate a user via Google/Facebook/Twitter. This was a quick guide on the many utilities that Firebase can provide and get a web application running fairly quick.