Skip to content

loading and error not working on Auth Hook #85

@slk333

Description

@slk333

"react-firebase-hooks": "^2.2.0",

You provided a sample code that I used as a component. Here's the component:

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



export default function CurrentUser({firebase}){
  const login = () => {
    firebase.auth().signInWithEmailAndPassword('[email protected]', 'password');
  };
  const logout = () => {
    firebase.auth().signOut();
  };


  const [user, loading, error] = useAuthState(firebase.auth());

  if (loading) {
    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>;
};

I get the following error
Uncaught Error: The error you provided does not contain a stack trace. at S (index.js:1) at V (index.js:1) at index.js:1 at index.js:1 at u (index.js:1)

the UI is supposed to display the error, as a <p>Error: {error}</p>, but the UI is not showing the error message.
the UI is also supposed to display the loading, but it does not. The only thing it does is displaying <p>Current User: {user.email}</p> correctly

It seems that more than 5 different people took the time to come on this repo to talk about this issue.
Maybe the problem lies somewhere not obvious? But again, I just used the sample code, and this is on a project that works when I don't use your hook.

Hope you can sort it out, GL

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions