I am writing The Road to React with Firebase book which I intend to release end of this year. If you are interested in grabbing a copy of the book, you can receive updates for it. Feel encouraged to leave me any feedback for improving the content. You can even contribute to it by editing this article on GitHub. I want to create a high quality book about Firebase in React similar to The Road to learn React
This short visual Firebase tutorial should help you to create your first Firebase application that can be used with any web framework/library such as React, Angular or Vue. For instance, you can use it for this extensive Firebase in React tutorial that uses all the features we will discuss in this visual guide.
Let’s start by creating a Firebase application with your Google Account. Therefore, hit the “Add Project” button to create a new Firebase project:
It is recommended to keep this sensible data in your environment variables in your project to configure your application. Even though this information is accessible in your client-side application, it’s okay to have them publicly available. You need to project your Firebase application later with other mechanisms (.e.g Read/Write Rules, Domain Restrictions). That’s it for the Firebase setup with a configuration. You should be able to get along with the initial steps of setting up a Firebase application.
If you want to use authentication mechanisms with your Firebase application, to enable users to sign up, sign in and sign out, you need to head over to the Authentication option.
Let’s enable the Email/Password sign in method so that users can login with a email and password in your application. ￼
That’s it. You can implement email/password authentication flows in your application now. If you click the Users option above, and users have actually signed up in your application, you can see these users in a list with their authentication methods. ￼
If you want to setup social sign in methods such as Google, Facebook and Twitter, head over to this tutorial that guides you through the process of setting up Facebook and Twitter Apps, but also through the necessary source code implementation. Otherwise you can also follow these visual guides on how to setup Facebook and Twitter.
Firebase authentication comes with more advanced features that go beyond the login of a user to your application. What about password reset/change, email change or email verification features? Firebase helps you with these things. In case you want to adjust email templates for these features, for instance for a email verification that a user receives to confirm their email, you can do it in the Templates option. ￼
You can find more about the implementation details in the Firebase in React tutorial referenced in the beginning of this visual guide.
If you navigate to the Database option, you will be presented with two database options for Firebase: the newer Cloud Firestore and the Firebase Realtime Database. ￼
You need to find out yourself which matches the requirements of your application. ￼
The Firebase in React tutorial from the beginning shows you how to implement the older Firebase Realtime Database, but also shows you how to migrate over to Cloud Firestore in the end. Choosing one doesn’t mean to use it forever. If you would use the Cloud Firestore, your Database could look like the following in your Firebase project’s dashboard. ￼
While Firebase manages users that are created from authentication sign up/in methods with email/password or social logins such as Google, Facebook or Twitter, you are in charge to create the user entities yourself in the database. Next to the users you can create other entities such as messages for a chat application or projects for a project management software.
Careful: While Firebase Realtime Database can be used on the free plan, Cloud Firestore is charged by usage. That’s why you can set monthly quotas and budget alerts. You can always see the pricing plan, and adjust it, in the bottom left corner of your Firebase project’s dashboard.
Finally you can use Firebase to host your project on top of Google’s infrastructure. When you navigate to the Hosting option, you can get started to deploy your application. ￼
First you need to install the necessary node packages on the command line. ￼
Then you can login with your Google account, initialize a Firebase application, and finally deploy it. ￼
I have written about this in greater detail for deploying a React application with Firebase Hosting. Otherwise, it’s worth to mention that Firebase Hosting comes with all the essential features (e.g. analytics, domain support) other hosting provider would offer you as well.
That’s it for my visual guide through setting up Firebase with authentication, database and hosting. If you want to go through the implementation of all these features, checkout the referenced React in Firebase tutorial from the beginning of this guide. Otherwise explore your Firebase project’s dashboard a bit more to learn more about Firebase Cloud gor hosting files such as images, audio and video, and Cloud Functions for serverless business logic.
Did the article help you? Share it with your friends on social media , support me as my Patron, and become a full-stack developer with my books