As seen in the code below, im using firebase's signInWithRedirect, based on a few peoples docs, this is the preferred approach, but in my case, the getRedirectResult is always returning null, even after logging in. What am i doing wrong ?

const navigate = useNavigate();

useEffect(() => {
  const checkRedirectResult = async () => {
  try {
    const result = await getRedirectResult(auth);
    console.log("Auth result:", result);

    if (result?.user) {
      const user = result.user;
      navigate("/");
    }
  } catch (error) {
    console.error("Auth error:", error);
    toast.error("Failed to sign in");
  }
};

checkRedirectResult();
}, [navigate]);

const loginWithGoogle = async () => {
 try {
  await signInWithRedirect(auth, googleProvider);
 } catch (error) {
  console.error("Login error:", error);
  toast.error("Failed to start sign in");
 }
};

As seen in the code below, im using firebase's signInWithRedirect, based on a few peoples docs, this is the preferred approach, but in my case, the getRedirectResult is always returning null, even after logging in. What am i doing wrong ?

const navigate = useNavigate();

useEffect(() => {
  const checkRedirectResult = async () => {
  try {
    const result = await getRedirectResult(auth);
    console.log("Auth result:", result);

    if (result?.user) {
      const user = result.user;
      navigate("/");
    }
  } catch (error) {
    console.error("Auth error:", error);
    toast.error("Failed to sign in");
  }
};

checkRedirectResult();
}, [navigate]);

const loginWithGoogle = async () => {
 try {
  await signInWithRedirect(auth, googleProvider);
 } catch (error) {
  console.error("Login error:", error);
  toast.error("Failed to start sign in");
 }
};

• javascript
• reactjs
• firebase
• firebase-authentication

Share Improve this question Follow asked Jan 17 at 16:10 Vedant ShahVedant Shah 1,43622 gold badges1010 silver badges2020 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

my friend I'm pretty sure signInWithRedirect is gonna stop working soon (or already stopped), but I'm not 100% sure. I think I saw that in google auth interface.

If that come to be true, what about you use popUp?

const provider = new GoogleAuthProvider();
 try {
   
    const result = await signInWithPopup(auth, provider);
    const user = result.user;

    if(!user.uid){
      console.log("Erro");
      setExibirErro("Erro login google.");
      return
    }

    const { displayName, email, uid, emailVerified, photoURL } = user; 
    const providerId = result.providerId;
    const { firstName, lastName } = splitName(displayName || '');

}

Hey OP and other readers, I was struggling with this too for several days. Here is what I figured out the hard way:

1. Make sure you have implemented signInWithRedirect using one of the suggested best practices.

NOTE: You can only implement best practice Option 1 - Custom Domain IF you are hosting your app on Firebase. If you are not, you need to pick a different option. This is because of a CORS policy that prevents re-directs during the pre-flight request.

I also remember reading somewhere that if you are not hosting your app on Firebase, then you MUST implement one of the best practices for it to work. Not sure if this is true, but I can tell you that I never got it to work without using one of the best practices. Also, lets be honest, when using signInWithRedirect, you should really be using one of the best practices anyway. My recommendation would be the reverse proxy with nginx - I think it's the easiest to implement and most practical.

2. Firebase has a bug that will impact your local testing!

This bug becomes clear when implementing a reverse proxy solution, but I wouldn't be surprised if it impacts other solutions too. Basically during the redirect flow when you are running your app on localhost (and thus setting authDomain="localhost"), Firebase builds the redirect link using HTTPS when localhost uses HTTP. This is enough to break it.

This Redit post basically describes the symptoms and this logged issue on Github explains it and is proof that it exists.

The only solution for this appears to be using signInWithPopup() when you are building and running the app locally. Otherwise, when you are publishing your app to a server that has it's own publicly accessible domain name, you can use that domain name for authDomain and just trust that the redirect flow will work (assuming you added it as an authorized domain and added the appropriate redirect url to the sign-in provider (e.g. google, facebook, etc.).

Obviously this is not ideal in a production environment, so you might need to create a second, pre-production environment that is also hosted somewhere so that you can confirm you got it working. Then you can just replace the pre-production domain names with production domain names.

Best of luck!