Firebase Authentication — Lowering Headaches In Developers
Tags: firebase, authentication, react, javascript
Published: 2021-08-15 18:09:09

> This is an article originally from Medium. I have decided to switch from Medium to dev.to and import all my posts from there.

![Firebase logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r6hdo83766pcf459s7np.png)

So I had to do some [authentication with GitHub](https://docs.github.com/en/developers/apps/authorizing-oauth-apps) the other day for a mini-project I was making. The main idea was that I would use GitHub’s authentication service with OAuth to use with a web app for a login system.

![overview of how login screen would look like](https://cdn-images-1.medium.com/max/800/1*F04rtugyB1rdIl57VbMX8A.png)

Everything was fine, I found [this amazing tutorial](https://www.youtube.com/watch?v=PdFdd4N6LtI) by “Barely Coding With Daniel Bark” which showed me how to use Node.js to authenticate the user.

In essence, when the user clicked the “Login With GitHub” button, my web app would redirect the user to `[https://github.com/login/oauth/authorize](https://github.com/login/oauth/authorize)`, which I would also send my `CLIENT_ID`of my OAuth app with.

Once the user logs in on the GitHub sign-in page we redirect them to (using`https://github.com/login/oauth/authorize`), it would then send me back a temporary code and client secret of my GitHub OAuth app on one of my endpoints with the Node.js server, because the user would be redirected there. I then had to send a `POST` request to `[https://github.com/login/oauth/access_token](https://github.com/login/oauth/access_token)` with my `CLIENT_ID`, `CLIENT_SECRET` and the `code` we got when it redirected back to my site. After that, I would get a response with an `access_token`, which would allow me to get other info such as the user’s profile picture on GitHub, their username, etc. etc. etc.

Code for the server side from video (Not my code view [source](https://github.com/danba340/oauth-github-example/blob/master/index.js)):

{% gist https://gist.github.com/ShubhamPatilsd/c756ff66a79fd58031d29f6c5e7ce3a4 %}

As I mentioned above, I found a very intuitive tutorial on YouTube which helped me get the gist of things, and all was good. We got the access token and then redirected the user to a static HTML page. Then I realized that I had to incorporate this with React, a UI Framework for JavaScript.

You might be thinking that this was no big deal and that I could easily incorporate a backend with Node.js with this. Here, the issue lies in serving the UI and communicating the `access_token`with React.

First of all, I had to serve the UI once the user is authenticated. Now you see, React is meant to be a frontend framework, or in other words, it manages the things the user can see. The backend is the infrastructure behind the frontend, which manages and serves data for the frontend. Our backend task of communicating with the GitHub OAuth App now needs to be code on the frontend, as we cannot just serve up a JSX file with React UI.

React in its nature appends to an element in **one** HTML file. This could be a `div` with an `id` of `root` or something else. I’m going to massively oversimplify here but, React appends its own, JavaScript and HTML “hybrid” code called JSX, to the inside of that element we specified in the original HTML file.

You might say that we should just load the HTML file from the server, but the HTML file is not how the React code loads. React uses a Node.js server (different one from our backend) to run the React code.

To clear things up, the React server could run on `http://localhost:3000/` while our backend server would run on `http://localhost:5000/` .

So, to have a frontend, we need to run a Node.js server so your React code can append itself to that one HTML file.

Now that we have **two** different Node.js servers running, (one for the backend and one for the frontend with React) this leads me into the second issue, communicating the access token to the frontend.

Since we are running two Node.js servers, communicating data between them would be very hard and unintuitive (for a beginner programmer like me) and would involve multiple API endpoints and possibly cookies.

This can all get pretty complicated pretty fast. You might be thinking that we should just somehow incorporate the backend in the React frontend. This isn’t impossible but it would just be very complicated for a programmer who just wants to get things done in their project. ([This approach](https://levelup.gitconnected.com/how-to-implement-login-with-github-in-a-react-app-bd3d704c64fc) or [this one](https://codeburst.io/react-authentication-with-twitter-google-facebook-and-github-862d59583105) can be very complicated for beginner programmers and coders who just want to get things done in their project. They’re really good if you’re advanced or you want to understand things at a very low level.)

This is when Firebase Authentication really shines.

As I was banging my head on a wall trying to figure this out, Benjamin S on the CodeDay Discord Server, ([CodeDay is a non-profit dedicated to introducing students to computer science](https://www.codeday.org/)) told me about Firebase Authentication.

![the person who suggested firebase auth to me](https://cdn-images-1.medium.com/max/800/1*c7GkdBByYMHjBTDeuA6kkQ.png)

Firebase Authentication? I’ve only heard/used Firebase Realtime Database in my personal projects such as this [chat website](https://chat-win98.herokuapp.com/) and this [mechanical keyboard sound test platform](https://keyshare.now.sh/). This could be worth a shot.

Worth a shot it definitely was. With [this lovely article](https://firebase.google.com/docs/auth/web/github-auth) in the Firebase documentation and [this video](https://www.youtube.com/watch?v=MG3ZTfdxODA), I installed Firebase in my project (`npm install firebase` ), setup a Firebase Project, and started coding my authentication. (I recommend using that article if you want an `in-depth` explanation)

![folder structure of project](https://cdn-images-1.medium.com/max/600/1*wqTxsSGf8oyzOmaBh-XdmA.png)

So I had a config for my Firebase project which was basically setting up my Firebase with API credentials.

Code for the `firebase-config.js`:

{% gist https://gist.github.com/ShubhamPatilsd/63eda4dbefa8a41bf2d46168feeed56d %}

Now on to the authentication.

Code for `auth.js` :

{% gist https://gist.github.com/ShubhamPatilsd/d794fc8121727573879b4d1825defb43 %}

Now for where it all comes together, `App.js`

`App.js` (don’t read all of this code I’ll explain the important parts)

We have the function called `loginAsync` which I setup to handle clicks of the login button.

```js
import githubLogin from './service/auth';

const loginAsync = async () =>{

const res = await githubLogin();

console.log(res);

}
```

We then have the actual button. (I’m using Material-UI, which allows me to have Google’s Material Design)

```jsx
<Button onClick={loginAsync} style={{

}}variant="contained" startIcon={<LockOpenIcon />}>Login With GitHub</Button>
```

We have an `onClick` handler, which tells the code to go to our `loginAsync` function above.

And that was it! It worked perfectly. I would redirect the users to a URL when they click the login button with the OAuth `CLIENT_ID` , which allowed them to login. This then sent the user to a Firebase URL such as `my-app-12345.firebaseapp.com/__/auth/handler` for an OAuth callback handler. Firebase would then redirect the user to my site and send the data with the access token again.

This was amazing how it prevented me from going crazy trying to figure out authentication. Thank you Firebase!

Hope this helps! You can always respond to this and give me some feedback! (This is also my first time writing on Medium)

By [Shubham Patil](https://medium.com/@shubhampatilsd) on [March 23, 2021](https://medium.com/p/adb61a73fbf6).

[Canonical link](https://medium.com/@shubhampatilsd/firebase-authentication-lowering-headaches-in-developers-adb61a73fbf6)

Exported from [Medium](https://medium.com) on August 15, 2021.