Uncaught auth error

[jacksteamdev]

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!

[NixBiks]

I am having a similar issue using signInWithEmailAndPassword.

auth.esm.js:873 
Uncaught M {code: "auth/user-not-found", message: "There is no user record corresponding to this identifier. The user may have been deleted."}

The error is correct but it should be handled into the error variable, right?

[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('test@test.com', '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

[eeeeeeeeeee555]

Same result. Uncaught error. Using v2.1.0

[brianr482]

Same result. Uncaught error. Using v2.1.0

[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: #85 (comment)