prescottprue / react-redux-firebase

Redux bindings for Firebase. Includes React Hooks and Higher Order Components.
https://react-redux-firebase.com
MIT License
2.55k stars 559 forks source link

firebase.login() Promise does not resolve once Redux Store is updated #972

Open ghost opened 4 years ago

ghost commented 4 years ago

Do you want to request a feature or report a bug?

bug

What is the current behavior?

firebase.login() returns a Promise with the user object but does not update the Redux Store so that the auth can be immediately acted upon in the .then() statement.

Login Method in Login Component

firebase.login(credentials).then(() => {
  props.history.push("/dashboard"); // Private Route
});

Private Route (Auth returns { isEmpty: true, isLoaded: true } and redirects back to login before Redux store updated)

const PrivateRoute: React.FC<PrivateRouteProps> = ({ children, ...rest }) => {
  const auth = useSelector((state: RootState) => state.firebase.auth);
  console.log(auth); // Returns { isEmpty: true, isLoaded: true }
  if (!isLoaded(auth)) return <LoadingDashboard />;
  return (
    <Route
      {...rest}
      render={(): React.ReactNode =>
        !isEmpty(auth) ? children : <Redirect to="/login" />
      }
    />
  );
};

Ugly Current Workaround

firebase.login(credentials).then(() => {
  firebase.reloadAuth().then(() => {
    props.history.push("/dashboard"); // Private Route
  });
});

What is the expected behavior?

When the Promise resolves, the Redux Store is already updated or at least updates the Redux store to make sure that isLoaded is false so that a loading display can be made until the auth goes through.

Which versions of dependencies, and which browser and OS are affected by this issue? Did this work in previous versions or setups?

prescottprue commented 4 years ago

The way that auth updates are happening currently is through onAuthStateChanged - because some auth functionality such as redirect required it (not sure whether or not this is the case anymore). Agreed though that it should only resolve after the state update has been made. Open to PRs if you get a chance, but thinking this might be a breaking change that needs a new major version

ashfaqnisar commented 3 years ago

Thanks for the workaround @zachlyoung buddy

Do you want to request a feature or report a bug?

bug

What is the current behavior?

firebase.login() returns a Promise with the user object but does not update the Redux Store so that the auth can be immediately acted upon in the .then() statement.

Login Method in Login Component

firebase.login(credentials).then(() => {
  props.history.push("/dashboard"); // Private Route
});

Private Route (Auth returns { isEmpty: true, isLoaded: true } and redirects back to login before Redux store updated)

const PrivateRoute: React.FC<PrivateRouteProps> = ({ children, ...rest }) => {
  const auth = useSelector((state: RootState) => state.firebase.auth);
  console.log(auth); // Returns { isEmpty: true, isLoaded: true }
  if (!isLoaded(auth)) return <LoadingDashboard />;
  return (
    <Route
      {...rest}
      render={(): React.ReactNode =>
        !isEmpty(auth) ? children : <Redirect to="/login" />
      }
    />
  );
};

Ugly Current Workaround

firebase.login(credentials).then(() => {
  firebase.reloadAuth().then(() => {
    props.history.push("/dashboard"); // Private Route
  });
});

What is the expected behavior?

When the Promise resolves, the Redux Store is already updated or at least updates the Redux store to make sure that isLoaded is false so that a loading display can be made until the auth goes through.

Which versions of dependencies, and which browser and OS are affected by this issue? Did this work in previous versions or setups?