signInWithRedirect Returns null response

Question

I'm new for firebase, and tried a simple sign-in button, running on a local React.js app (with node.js).

firebase credentials are loaded in 'firebase.js'. This code is of a component with login button, and a listener for redirection

import React, { useState, useEffect } from 'react';
import { auth } from './firebase'; // Ensure this file exports your initialized Firebase auth
import { GoogleAuthProvider, signInWithRedirect, getRedirectResult, onAuthStateChanged, signInWithPopup } from 'firebase/auth';

function App() {
  const [user, setUser] = useState(null);

  // Handle sign-in
  const handleSignIn = async () => {
    try {
      const provider = new GoogleAuthProvider();
      await signInWithRedirect(auth, provider);
    } catch (error) {
      console.error("Error signing in: ", error);
    }
  };


  // Check redirect result
  useEffect(() => {
    const fetchRedirectResult = async () => {
      try {
        const result = await getRedirectResult(auth);
        console.log("fetch redirected, result:", result);

        if (result) {
          setUser(result.user);
        }
      } catch (error) {
        console.error('Error getting redirect result:', error);
      }
    };

    fetchRedirectResult();
  }, []);

  // Monitor auth state changes
  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      console.log("auth changed, user:", user);
      if (user) {
        setUser(user);
      } else {
        setUser(null);
      }
    });

    return () => unsubscribe();
  }, []);

  return (
    <div>
      {user ? (
        <div>
          <p>Welcome, {user.displayName}!</p>
          <button onClick={handleSignOut} style={buttonStyle}>Sign Out</button>
        </div>
      ) : (
        <button onClick={handleSignIn} style={buttonStyle}>Sign In with Google</button>
      )}
    </div>
  );
}

const buttonStyle = {display: 'flex',alignItems: 'center',backgroundColor: '#4285F4',color: '#fff',padding: '10px 20px',border: 'none',borderRadius: '4px',cursor: 'pointer',fontSize: '16px',};

export default App;

Running the exact same code with signInWithPopup works OK. I saw that authorized domains may be an issue, but i'm running on localhost which is already in there.

I checked the console logs, and no errror found, only null users showed:

fetch redirected, result: null

auth changed, user: null

Is it anything bad in the code?

Answer 1

There are some browser behavior changes in 2024, related to 3rd parties cookies.
You can try follow the guide provided by Google.

To make the signInWithRedirect() flow seamless for you and your users, the Firebase Authentication JavaScript SDK uses a cross-origin iframe that connects to your app's Firebase Hosting domain. However, this mechanism doesn't work with browsers that block third-party storage access.

https://cloud.google.com/identity-platform/docs/web/redirect-best-practices