Firebase Set-up in React

Firebase Set-up in React

Firebase ecosystem provides a variety of use cases that improves product build.

As a react developer, one of the first scenarios that may prompt your use of firebase is user authentication.

This article will provide a simple step by step guide on setting up firebase in your react project.

1. Sign Up on firebase

Visit @firebase.google.com and click on sign in/ Get started

firebase1.PNG

If you have a google account already, you can sign in with your Google account otherwise, click on "create account". There are two options:

   - For myself
   - To manage my business

In this demo, we will choose "for myself". Next is the prompt to fill in relevant details to create a google account. Fill this up and follow the subsequent prompt(s) till you are signed in.

Once signed in click you'd be in your console. If this isn't the case click on "console" on the top right corner of the navbar.

2. Create a project:

Click on the create a project button as shown in the image below:

firebase2.PNG

then do these:

a. Enter project name

createp.PNG

b. Accept terms and click on continue; Next page is a brief on google analytics and if you want it in the project click the toggle button.

c. If you choose to run google analytics then read the next prompt and tick where applicable and select "create project".

dems2.PNG

3. Get Web Configuration:

To access the configuration that will be used in your react project, click the </> button (for visual reference it is highlighted in the image below):

webc.PNG

The page to enter an App nickname will come up next, you can decide to stick with the same name or choose a nickname. I'd stick with demo project.

dem3.PNG

Setting up firebase hosting will be ignored as it is not relevant to this use case.

Click on register app and the code snippet to be pasted in your project will be made available.

You wouldn't need to copy the entire code as it is not needed in your react file and will throw an error. Only the firebaseConfig object and functions to initialize firebase is needed.

In your react project create a file in your root folder conventionally named "firebase.js" and paste in the needed code snippet

Sample available below:

import * as firebase from 'firebase';

  // Your web app's Firebase configuration
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
  const firebaseConfig = {
    apiKey: "AIzaSyC5oSXuNMWFMyVsYEDPD8xOYscLBHaprjc",
    authDomain: "ecommerce-e506b.firebaseapp.com",
    projectId: "ecommerce-e506b",
    storageBucket: "ecommerce-e506b.appspot.com",
    messagingSenderId: "1069213947488",
    appId: "1:1069213947488:web:4a63565ecc197361e85505",
    measurementId: "G-N4CW78V8Z9"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();

*note: I changed the var keyword used in the original code from firebase to const keyword.

4. Install Firebase:

Install firebase using your package manager to enable your project to import the required firebase module.

Using:

$ npm i firebase

Or,

$ yarn add firebase

*5. Export Auth Functions: The use case of this firebase set up is user authentication therefore the functions for authentication in firebase module has to be stored in a variable and exported.

Code sample:

export const auth  = firebase.auth();

export const googleAuth = new firebase.auth.GoogleAuthProvider;

Credits:

  • Transparent react logo (used in cover image) pngFind

  • Firebase logo (used in cover image) SubPng

  • Page snippets from firebase