User can still log into the dashboard with invalid login credentials

[theDeji]

Hey Kyle, I did the same thing you did on this project and I noticed that the moment I add the history.push('/') line beneath the login function, it allows users login even if the login credential is invalid.

async function handleSubmit(e) {
e.preventDefault()

try {
  setError("")
  setLoading(true)
  await login(emailRef.current.value, passwordRef.current.value)
  history.push("/") --> problem here, it logs in the user with invalid credentials. Even at the sign up component.
} catch {
  setError("Failed to log in")
}

setLoading(false)

}

[pea-nut-z]

Hey Kyle, I did the same thing you did on this project and I noticed that the moment I add the history.push('/') line beneath the login function, it allows users login even if the login credential is invalid.

async function handleSubmit(e) {
e.preventDefault()

try {
  setError("")
  setLoading(true)
  await login(emailRef.current.value, passwordRef.current.value)
  history.push("/") --> problem here, it logs in the user with invalid credentials. Even at the sign up component.
} catch {
  setError("Failed to log in")
}

setLoading(false)

}

I am wondering if you added "exact " for the "/" route
<PrivateRoute exact path="/" component={Dashboard} />

[theDeji]

Yeah, I did.

Does it not show the alert which says 'Failed to login' or something similar? Because I do not get the alert, and there's an uncaught Promise that is logged to the console which is an error. But I still get redirected to the '/' route [Homepage route].

It looks like the err is not getting caught in the try-catch block, and it throws the below error about an uncaught promise, but still redirects to the homepage.

I've figured out a solution here, it's basically to add the then() and catch() in our AuthContextProvider login() function and return the error and loading states from within the context provider, rather than using it up in the Login component.

Here's my AuthContext.js file:

import { createContext, useState, useEffect } from 'react';
import { auth } from '../firebaseConfig';

export const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const [currentUser, setCurrentUser] = useState();
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((user) => {
      setCurrentUser(user);
      setLoading(false);
    });

    return unsubscribe;
  }, []);

  const signup = (email, password) => {
    auth.createUserWithEmailAndPassword(email, password);
  };
  const login = (email, password) => {
    auth
      .signInWithEmailAndPassword(email, password)
      .then((userCredential) => {
        //signed in!
        setLoading(false);
      })
      .catch((err) => {
        //error
        setLoading(false);
        setError(err.message);
      });
  };

  const value = {
    currentUser,
    loading,
    error,
    signup,
    login,
  };
  return (
    <AuthContext.Provider value={value}>
      {!loading && children}
    </AuthContext.Provider>
  );
};

Here's a snippet of the submit event on the form:

  const { login, error, loading } = useContext(AuthContext);
  const history = useHistory();

  const handleSubmit = async (e) => {
    e.preventDefault();
    await login(emailRef.current.value, passwordRef.current.value);
    if (!loading && !error) {
      history.push('/');
    }
  };

This displays the error that firebase sends in case we enter a wrong password during login, thus prevent the user to route to the homepage. It also prevents the user from routing to the homepage if there are multiple invalid password attempts! All this info is shown in the Alert within the Login component based on the error value received from login() function, from the AuthContextProvider.

Edit: I believe this should be done with all other async firebase functions as well, i.e, for sign-up, logout, etc.

Does it not show the alert which says 'Failed to login' or something similar? Because I do not get the alert, and there's an uncaught Promise that is logged to the console which is an error. But I still get redirected to the '/' route [Homepage route].

It looks like the err is not getting caught in the try-catch block, and it throws the below error about an uncaught promise, but still redirects to the homepage.

I had made a silly mistake, I'd forgotten to return the Promise from the AuthProvider login() function. Seems to be working fine now.

  const login = (email, password) => {
    return auth.signInWithEmailAndPassword(email, password);
  };