In this tutorial, we are following the first chapter of clone Firebaseweb-UI demo and use codes from it as well. Here, we are going to learn how to create a reusable and shareable Facebook login component with React and Bit. First, we will prepare a facebook login component using firebase integration and authentication in a React project. Then, we are will push the code to Bit. We will also learn to import modules from packages installed using the Node Package Manager(NPM). We have broken down this tutorial into various sub-headings for you to grasp the concept and work accordingly.

What you’ll learn …?

How to create new React app.

How to install and using firebase in React.

How to use Firebase Authentication.

How to create and set up a Facebook app.

How to install and use Bit.

How to pass props in React.

Problem

Firebaseweb-UI demo built using vanillaJS is not split up into component which makes it hard for maintenance purpose. Since the components are not used, the codes may be re-written in most parts creating a heavy form of project.

Requirements

Here’s a complete list of plugins, packages, and services you’re going to need in order to gain something from this tutorial:

Nodejs v8.x.x or higher installed along with NPM/yarn.

or higher installed along with NPM/yarn. Firebase, Bit and Facebook developer account.

Already installed React project.

Firebase and Bit package.

First Step

Before working on the Facebook login component, we are going to complete every configuration required while using App.js.

Firstly, try to grab CSS from Firebaseweb-UI demo and paste from

firebase-ui.css -> App.css

Here, we need to include firebase CSS to App.js.

Then include some styles to Index.css,

style.css -> Index.css

which we need to include in the index.js file.

Then, we need to grab the button code from firebaseweb-ui and then add it to our App.js code as follows:

Now, in the browser, we can see the facebook login component button. The screenshot of the result from the above code snippet is shown below:

Second Step: create and setup Facebook App and Firebase

In this step, we are integrating facebook login with firebase. You will need to create a facebook app from your facebook developer account which will include APP_ID and APP_SECRET key. Then, open your facebook developer account and copy APP_ID and APP_SECRET. After that, we need to paste it on firebase console as shown in the screenshot below:

Then, we need to open the firebase console and paste APP_ID and APP_SECRET key on authentication sign-in method tab as shown in the screenshot below:

After that, you will see a redirect URI at the bottom as shown in the screenshot above. We need to copy that redirect URI. Then, return to the Facebook developer console. In the developer console, we need to go to Facebook login setting and scroll to Valid OAuth Redirect and paste the URI there as shown in the screenshot below: