reactjsfirebasegoogle-authenticationproductionvercel

CreateReactApp - Illegal URL for new iframe

I have a CRA app built with Redux toolkit/Firebase & deployed it on Vercel. You can view the error in the console here - deployed site after clicking on the google auth button. Currently, the app works with zero errors on localhost & everything works fine even the google auth but on my Vercel hosted site it throws this Error - enter image description here

How do I fix this? I have no clue what I'm doing wrong. Here is my firebaseconfig

firebase.initializeApp(firebaseConfig);
//export auth & db service
export const auth = firebase.auth();
export const firestore = firebase.firestore();
//google auth used below by setting provider
export const provider = new firebase.auth.GoogleAuthProvider();
provider.setCustomParameters({ prompt: "select_account" });

Here is my handleClick -

  const handleSignInWithGoogle = async () => {
    auth
      .signInWithPopup(provider)
      .then((result) => {
        dispatch(
          userActions.login({
            userName: result.user.displayName,
            userEmail: result.user.email,
          })
        );
      })
      .then(() => {
        history.push("/profile");
      });
  };
Solution

  • Sorry guys for all the trouble- i fixed it it was stupid of me, after i checked the log i saw my " "api keyec efchfach " " so i removed the "afeaficagcfi" inverted comma from my vercel env variables. Didn't know it added it automatically.