Firebase onAuthStateChanged user returns null when on localhost #7716
Description
Operating System
macOS 13.6 on arm64
Browser Version
Chrome/118.0.5993.88,118.0.5993.96 Firefox/118.0.2, Safari 17.0 (18616.1.27.111.22, 18616)
Firebase SDK Version
9.12.0,9.22.0-9.22.2,9.23.0,10.5.0
Firebase SDK Product:
Auth
Describe your project's tooling
React and Vite, use firebase hosting and .web.app domains
We specified auth domain is like develop-hoge.web.app on localhost
Describe the problem
As stated on this URL, we're facing an issue where authentication doesn't work when using signInWithRedirect on localhost, causing significant development hurdles. After trying various solutions, it appears to be related to third-party cookie restrictions. Disabling this restriction in Firefox seemed to allow development as before, but unfortunately, it didn't work in Chrome.
https://stackoverflow.com/questions/77270210/firebase-onauthstatechanged-user-returns-null-when-on-localhost
Steps and code to reproduce issue
const handleGoogleSignIn = async () => {
await signInWithRedirect(auth, provider);
};
onAuthStateChanged(auth, async (user) => {
console.log({ user }) // always be null
if (user) {
const result = await getRedirectResult(auth);
if (result) {
const credential = GoogleAuthProvider.credentialFromResult(result);
const token = credential.accessToken;
const user = result.user;
const expirationTime = user.stsTokenManager.expirationTime;
const photo = user.photoURL;
const userName = user.displayName;
const email = user.email;
}
}
});
return (
<Button variant='contained' onClick={handleGoogleSignIn}>
Log In
</Button>
);