Firebase Auth Issue through React JS and Django Templates

I’m using React JS to create the login page. For the I used Firebase 10.7.1 npm module to create the authentication.

Here is my quick code for Auth:

const provider = new GoogleAuthProvider();
    signInWithPopup(auth, provider)
    .then((result) => {
        // Get the ID token directly from the result object
        const idToken = result._tokenResponse.idToken; // Updated this line
        // Send the token to your backend
        sendTokenToBackend(idToken); // Updated this line
    })
    .catch((error) => {
        console.error("Error during Google Sign In: ", error);
    });

Authentication works fine in react JS and when i run the build and paste the files to render them through the django templates. I can see the react code rendered perfectly.

enter image description here

However, now when I try to sign in, halfway of the execution I get the below error doesn’t matter if I allow all domains for CORS in Django:

enter image description here

It had the same behaviour when I was creating the same code in the native Java script for signInWithPopUp. I’ve tried multiple browsers:

  • Chrome, Firefox, Edge