Firebase Authentication — Lowering Headaches For Developers
So I had to do some authentication with GitHub 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.
Everything was fine, I found this amazing tutorial 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, which I would also send my CLIENT_IDof my OAuth app with.
Once the user logs in on the GitHub sign-in page we redirect them to (usinghttps://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 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):
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_tokenwith 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 or this one 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) told me about Firebase Authentication.
Firebase Authentication? I’ve only heard/used Firebase Realtime Database in my personal projects such as this chat website and this mechanical keyboard sound test platform. This could be worth a shot.
Worth a shot it definitely was. With this lovely article in the Firebase documentation and this video, 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)
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:
Now on to the authentication.
Code for auth.js :
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.
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)
<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)
