Husam's Blog

Husam's Blog

React 2025 by Lee Robinson Course | Personal Notes

React 2025 by Lee Robinson Course | Personal Notes

Day 1: Github Authentication with Firebase

As I started watching Lee Robinson's React 2025 course, I thought it would be a good idea to blog about my personal experience and what issues I faced, and how I solved them.

Github Authentication with Firebase

Since I have some experience in React.js and Next.js, I'll write about the part that was completely new for me which is working with Firebase.

I always heard about Firebase and how great it is but haven't tried it before starting the course. To me, Firebase seemed very similar to MongoDB Realm in terms of helping developers of using authentication providers in their applications, however, Firebase seemed easier to use.

An annoying bug

As bugs are developers' worst nightmare, I faced an annoying bug that took me some time to troubleshoot and fix.

In the course, Lee creates a Firebase configuration file that initializes a connection to Firebase as follows:

import firebase from "firebase";
import "firebase/auth";

const config = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
};

if (!firebase.apps.length) {
  firebase.initializeApp(config);
}

export default firebase;

After this, he creates React Context to wrap the _app.js file with it so the user object can be accessed easily from any page/component instead of doing "Props Drill" and passing the user object to a very deep level.

To allow authentication using Github, an instance of GithubAuthProvider() should be passed to signInWithPopup().

The following piece of code shows that:

import firebase from "./firebase";

const provider = new  firebase.auth.GithubAuthProvider();

const signinWithGithub = async () => {
    const response = await firebase
      .auth()
      .signInWithPopup(provider);
    setUser(response.user);
    return response.user;
  };

The mistake I had was that instead of using firebase.auth.GithubAuthProvider(), I used firebase.auth().GithubAuthProvider() which gave me the following error:

TypeError: (intermediate value).GithubAuthProvider is not a function

I went to the docs of Firebase and tried to fix that by importing GithubAuthProvider from "firebase/auth" and use directly as follows:

import { GithubAuthProvider } from "firebase/auth"
const provider = new  GithubAuthProvider();

The above code didn't solve the problem, but instead, it introduced me to the following error:

TypeError: firebase_auth__WEBPACK_IMPORTED_MODULE_4__.GithubAuthProvider is not a constructor

After a couple of trials here and there with some googling to try to find a solution, I decided to go to Lee's repository and see the difference between his code and mine, which was that I only used new firebase.auth().GithubAuthProvider() instead of using new firebase.auth.GithubAuthProvider().

Regardless of how silly such a bug is and how much it pissed you off as a developer, It just makes a developer's heart so happy to be able to solve them finally!

 
Share this