Setting up your first ReactJS & Firebase Auth project

#javascript #programming #beginners #react

Nowadays, security is very important on websites and apps. Sometimes, developers make their own backend incorporating their own custom security methods. Other developers use various cloud platforms so that they don’t need to worry about security logic, and these platforms help developers with most secure ways of authenticating users.

We are going to see how you can use Firebase auth service to secure your react APP.

Setting up Firebase

First you will need to set up our own Firebase project through the Firebase Console. To get started, navigate your browser to Firebase Console. Make sure you are logged into your Google account.

Now, click on Add project and follow the simple instructions provided. Once presented with a dashboard, click on Authentication on the sidebar and click on Get Started to enable the module. Now you will be presented with various authentication options. Click on Email/Password, enable it, and save it. We will come back later, let create our react app first.

Setting up React project

Navigate to your terminal and use npx create-react-app appname to create a new react app.
Next lets install firebase and react router dom: npm install firebase react-router-dom react-firebase-hooks

Integrating Firebase into our React app

Now lets go back to the Firebase Console dashboard, click on Project Settings. Click on the third icon (</>) to configure our Firebase project for the web. Here you will see a config file. Copy the config. Create a new file in the src folder named firebase.js, import firebase modules, and paste the config file here.
Next we will initialize our app and services so that we can use Firebase throughout our app. This will use our config to recognize the project and initialize authentication and database modules.

With this on your react app you can now start to create login and signup forms and use the firebase authentication module.