Firebase Basics with React in Examples

Here we will be talking about creating, configuring and using Firebase in React.js application. We will take a look on user authentication basics and firestore collections.

Prerequisites

I will use React.js + Redux + Saga + Typescript + ESLint + SASS for our project. WOW! “Isn’t those too much for a simple example”, you might ask, and you are right, but… I want to show you a real-world example so you could use it for yourself. I will leave a link to the GitHub project at the end of this article.

What will be covered in this article

• 1. Creating a new firebase project
• 2. Add firebase to the project
• 3. Set sign-in methods
• 4. Sign in with email and password
• 5. Sign in with Google
• 6. Create a Firestore database
• 7. Firestore CRUD operations
• 8. Creating Firebase Storage
• 9. Adding a Profile image
• Other Firebase stories: Cloud Functions, Admin SDK, Facebook Sign-in method

1. Creating a new firebase project