Uncaught auth error

When I use useAuthState with signInWithPopup and close the popup without authenticating, the error state is not reached.

After a second these two errors appear in the console:

Uncaught: {code: "auth/popup-closed-by-user", message: "The popup has been closed by the user before finalizing the operation."}

Uncaught Error: The error you provided does not contain a stack trace.

I was expecting this error to cause useAuthState to reach the error state. Is this behavior expected?

The following code dropped into the CreateReactApp boilerplate will reproduce this error. In fact, all errors seem to cause the aforementioned result.

import React from 'react'

import * as firebase from 'firebase/app'
import 'firebase/auth'

import { useAuthState } from 'react-firebase-hooks/auth'

const firebaseConfig = {
  // copied from firebase console
}

firebase.initializeApp(firebaseConfig)

const provider = new firebase.auth.GoogleAuthProvider()

const login = () => {
  firebase.auth().signInWithPopup(provider)
}

export const logout = () => {
  firebase.auth().signOut()
}

export const App = () => {
  const [user, initialising, error] = useAuthState(
    firebase.auth(),
  )

  if (initialising) {
    return (
      <div>
        <p>Initialising User...</p>
      </div>
    )
  }
  if (error) {
    return (
      <div>
        <p>Error: {error}</p>
      </div>
    )
  }
  if (user) {
    return (
      <div>
        <p>Current User: {user.email}</p>
        <button onClick={logout}>Log out</button>
      </div>
    )
  }

  return <button onClick={login}>Log in</button>
}

My package versions:

{
  "firebase": "^6.6.2",
  "react": "^16.9.0",
  "react-firebase-hooks": "^2.1.0",
}

Thanks for the great library!

[lorstenoplo]

No guys, you can use the hook and its loading param after the user signs in, you are not using the hook to sign in the users right. You are using the firebase sdk so, you will have to handle auth errors during login and sign up yourself.

Check this solution: https://github.com/CSFrequency/react-firebase-hooks/issues/85#issuecomment-754084044

[NixBiks]

Just tried the example you provided

import { useAuthState } from 'react-firebase-hooks/auth';

const CurrentUser = () => {
  const [user, initialising, error] = useAuthState(firebase.auth());
  const login = () => {
    firebase.auth().signInWithEmailAndPassword('[e-mail]', 'password');
  };
  const logout = () => {
    firebase.auth().signOut();
  };

  if (initialising) {
    return (
      <div>
        <p>Initialising User...</p>
      </div>
    );
  }
  if (error) {
    return (
      <div>
        <p>Error: {error}</p>
      </div>
    );
  }
  if (user) {
    return (
      <div>
        <p>Current User: {user.email}</p>
        <button onClick={logout}>Log out</button>
      </div>
    );
  }
  return <button onClick={login}>Log in</button>;
};

Same result. Uncaught error. Using v2.1.0