How to fix auth/user-cancelled in Firebase

Wrap your Firebase authentication calls in a try-catch block to handle the cancellation gracefully:

try {
  const result = await signInWithPopup(auth, googleProvider);
  // Handle successful sign-in
} catch (error) {
  if (error.code === "auth/user-cancelled") {
    // User cancelled the operation - handle gracefully
    console.log("Sign-in cancelled by user");
  } else {
    // Handle other authentication errors
    console.error("Sign-in failed:", error.message);
  }
}

Avoid showing alarming error messages for user cancellation. Instead, provide neutral feedback:

if (error.code === "auth/user-cancelled") {
  // Optional: Show a subtle message or simply return to login
  setMessage("Sign-in cancelled");
  // Or silently return without showing an error
} else {
  setError(`Sign-in failed: ${error.message}`);
}

Firebase may throw similar but distinct error codes depending on the platform and method:

- auth/popup-closed-by-user: User closed the popup window
- auth/cancelled-popup-request: Another popup was opened before this one completed
- auth/redirect-cancelled-by-user: OAuth redirect was cancelled

Handle all of these the same way as auth/user-cancelled:

The user-cancelled error may behave differently across platforms:

- Web (Chrome, Firefox, Safari): Most common with popup-based sign-in
- iOS: May occur after dismissing a modal or pressing back
- Android: Common when user closes a dialog or navigates away

Test your error handling in each target environment to ensure graceful fallback behavior.