Github Authentication with Firebase | React | Bit
Tags: javascripttips, react, javascript
Published: 2019-09-15 04:21:34

---
title: Github Authentication with Firebase | React | Bit
published: true
tags: javascript-tips,react,javascript,reactjs
canonical_url: https://medium.com/@laraveltut/github-authentication-with-firebase-react-bit-c478e761d5e2
cover_image: https://cdn-images-1.medium.com/max/1024/1*AJ-IfmxtP3YysTv6eNwUVA.png
---


> This post includes affiliate links; I may receive compensation if you purchase products or services from the different links provided in this article.

#### Make a fully functional real estate app in minutes

Become the next Trulia, Zillow or Airbnb by releasing a real estate app for both iOS and Android in minutes. [Download our functional React Native Real Estate app template](https://www.instamobile.io/app-templates/real-estate-app-template-react-native/), integrated with Firebase Backend, to literally launch your own app today. Crafted with extreme attention to details, this beautiful app template written in React Native represents the best way to jumpstart the development of your new mobile app.

Now, let’s get on with implementing the Github login with Firebase and React then make shareable with Bit

### What you’ll learn …?

- How to pass props in React.
- How to use Firebase Authentication.
- How to create and set up a Github app.
- How to use Bit.

Most of the points have already been covered in the first chapter, so this chapter makes the concepts even clearer as we move along.

### Requirements

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

- Nodejs v8.x.x or higher installed along with NPM/yarn.
- Firebase, Github and Bit account.
- Already completed project from the previous chapter.
- Firebase and Bit package.

### Create a Github App

first create new [GitHub app](https://github.com/settings/apps/new)

![](https://cdn-images-1.medium.com/max/1024/1*f4EkpYyMjXOBDfYDG8oRgQ.png)

and filling all necessary data

![](https://cdn-images-1.medium.com/max/770/1*pNEdp-tYi4AP2EFnqjhRqg.png)

GitHub app is easy to create now we have new app

![](https://cdn-images-1.medium.com/max/1008/1*CXzYIkuPltwcrM2jVwfxvA.png)

grab Client ID and Client secret

### Config FireBase App

goto our app and open Authentication \> Sign In Method \> pasting Client ID and Client Secret on Github tab

![](https://cdn-images-1.medium.com/max/992/1*cSCBx7W6xACiC_7AiplgpQ.png)

and save now we can use Github Login on Our app

### Create a Github Login Component

now we replicate other component that we build from previous part and chage all function ,class ,file name to Github

![](https://cdn-images-1.medium.com/max/222/1*PRwGoCEqT909WQdn8Dsp0A.png)

in GitHubAuth.jsx change all everything to Gihutb

{% gist https://gist.github.com/krissnawat/ce257cf22fa3359fd84345fe92ff636d %}

and at index.js

{% gist https://gist.github.com/krissnawat/8d442c01b60608f40b169c0777a3ff01 %}

now we can use component in main App.js

{% gist https://gist.github.com/krissnawat/d820665a21394324ca2cad05209fdd60 %}

let testing

![](https://cdn-images-1.medium.com/max/1024/1*GFarP1Idsw72W1NSLd76iA.gif)

it’s work let share again on Bit

### Make it Reusable and Sharable with Bit

[Share reusable code components as a team · Bit](https://bit.dev)

To make our code reusable and shareable, we’ll do some restructuring and move all our code to ‘components’ (this is not mandatory but a better practice, when using [Bit](https://bit.dev)). Then, we’ll export it (with all its dependencies), to a component collection on [Bit’s cloud](https://bit.dev/components), to be shared with others and easily reused.

In this step, we are going to push the new component i.e. Google login component to Bit again. We already have our Bit package installed and connected to our Bit account. So, we need to create a collection and start by tracking the component.

Note:: The first and second step features an installation of Bit account. These steps can be skipped if you already have a Bit account.

#### 1. Initialize Bit on a project

Here, we create a new collection on Bit to which we are going to push all our component code. We use the Bit “create collection” configuration page to create a new collection named “firebase-auth-collection” as shown in the screenshot below:

![](https://cdn-images-1.medium.com/max/587/1*FF1zzr2tVDlxytpkbV7Cbw.png)

To successfully push the whole project to Bit, you need to follow the instructions given on the page shown below:

![](https://cdn-images-1.medium.com/max/1024/1*ccQIEhgssTq-cQdb4stu7w.png)

First, we need to install Bit CLI

> Using NPM,

> _npm install bit-bin --global_

Then, we need to go to the project directory in our Bit CLI and perform the commands bit init and run bit login on Bit CLI as shown in the screenshot below:

![](https://cdn-images-1.medium.com/max/715/1*y2bXTuO2sAPDSDdwiJuegw.png)

#### 2. Configure a React compiler for our component

When we configure a compiler we tell Bit to capsule the component with it. Capsuling components together with their compilers gives us the freedom to use, build and test them anywhere. This includes being able to run the code in any of the applications we’d like to use the component in, as well as running it in the cloud to enable features such as the [live component playground](https://bit.dev/davidhu2000/react-spinners/pacman-loader).

```
bit import bit.envs/compilers/react --compiler
```

#### 3. Track components

We need to track our component by using the following command in your command prompt or Bit console:

bit add src/components/GithubAuth

The result after the command is performed is shown below in the screenshot:

![](https://cdn-images-1.medium.com/max/720/1*zAg2dB5lw3f7Z4uBzp2IPA.png)

#### 4. Tag and export

Here, we are going to s[et a version](https://docs.bit.dev/docs/versioning-tracked-components.html) to all tracked components, and export to this collection using following bit command:

bit tag --all 1.0.0

![](https://cdn-images-1.medium.com/max/701/1*1pjbIqWVj3xBGCEVNIE9Sw.png)

Finally, we need to perform following bit command to push our component code to bit collection that we created before:

```
bit export krissnawat.firebase-auth-collection
```

Now, our package is live on [Bit](https://bit.dev/krissnawat/firebase-auth-collection/google-auth). It is our second component in our firebase auth collection as shown in the screenshot below:

![](https://cdn-images-1.medium.com/max/1024/1*6m6kNj-xrIgc89d9XEfIAA.png)

Lastly, we need to replace the component in our _App.js_ file as shown in the code snippet below:

{% gist https://gist.github.com/krissnawat/4ca50df0b51913ace07cf48b217e2954 %}

Finally, the implementation of Github login with firebase auth and uploading the component to Bit is complete. Now, we can run the project locally to test everything.

#### Conclusion

In this tutorial, we learned how to implement Github login with firebase. We also learned about implementing the reusable code in the form of components as in the previous chapter. Finally, we were successful in pushing our second component in our Firebase Auth collection.