recently I’ve been trying to familiarize myself with Firebase authentication, and I made a simple React app that allows for a Google sign in and sign out (displaying the account name in the console upon successful sign in.) Everything works fine, but if I close out of the Google sign in popup at any time, I get this error in the console: “FirebaseError: Firebase: Error (auth/popup-closed-by-user)”. The error is self explanatory, but I’m new to web dev and wondering how I would actually handle this “error” in my code? I honestly would’ve figured closing out of the popup would do absolutely nothing. I have a try/catch to console log the error but how on earth am I supposed to handle this to prevent the console from filling up with error messages? It seems like closing out of a sign in popup is a pretty common thing for a user to do..
Do errors like this normally flood the console and we just ignore them do to already having a try/catch in our source code? I’m OCD and having a console full of red makes me feel like I’m already making wrong development choices, lol. I’ve attached a screenshot of my console showing that error, along with COOP errors/cookie warnings that are being presented. Are these various errors/warnings all just Firebase specific things? Thanks in advance to anyone who can offer me some support!
My main component code:
import { GoogleLoginButton } from "react-social-login-buttons";
import { auth, googleProvider } from "../config/firebase.js";
import { signInWithPopup, signOut } from "firebase/auth";
export const Auth = () => {
const signInWithGoogle = async () => {
try {
await signInWithPopup(auth, googleProvider);
} catch (err) {
console.log(err);
}
console.log(auth?.currentUser?.displayName); // display Google account name
}
const userLogout = async () => {
console.log("logout clicked");
try {
await signOut(auth);
} catch (err) {
console.log(err);
}
console.log(auth?.currentUser?.displayName); // (should always be undefined)
}
return (
<div>
<GoogleLoginButton onClick={ signInWithGoogle }>
<span>Sign in with Google</span>
</GoogleLoginButton>
<button onClick = { userLogout }>Sign Out</button>
</div>
)
}