I have created a login page with a login button. Now I want to make it such that whenever login button is clicked, it calls the authentication system of firebase and checks if the user exists, and if yes, navigate to the homepage. How can I make that?

I have set up the firestore, I just want to make it such that it navigates to another page only if the user exists, otherwise throw an error.

The login function of firebase looks like this

const logInWithEmailAndPassword = async (email, password) => {
  try {  
    await signInWithEmailAndPassword(auth, email, password);
  } catch (err) {
    console.error(err);
    alert("Email or Password not Registered!");
  }
};

This is the login button

<button 
  onClick={async () => {
    await logInWithEmailAndPassword(email, password);
    navigate('/Login/HomePage)};
  }}
>
  Login
</button>

Now no matter what the email and password is, it still navigates to the homepage. How to do this setup so that it only navigates if and only if the user exists in firestore?

CodePudding user response：

Issue

The logInWithEmailAndPassword function is catching and swallowing any Promise rejections and thrown errors and so is effectively returning to the runtime scope of the button element's onClick callback which then issues the imperative navigation action.

Solution

Return the Promise object from signInWithEmailAndPassword in logInWithEmailAndPassword and handle the happy/sad path in the button element's onClick handler.

Example:

const logInWithEmailAndPassword = async (email, password) => {
  return signInWithEmailAndPassword(auth, email, password);
};

...

<button 
  onClick={async () => {
    try {
      await logInWithEmailAndPassword(email, password);
      navigate("/Login/HomePage");
    } catch(error) {
      console.error(error);
      alert("Email or Password not Registered!");
    }
  }}
>
  Login
</button>

Alternative Solution

Alternatively you could pass the navigate function to logInWithEmailAndPassword and navigate when authenticated.

Example:

const logInWithEmailAndPassword = async (email, password, navigate, target = "/") => {
  try {  
    await signInWithEmailAndPassword(auth, email, password);
    navigate(target);
  } catch (err) {
    console.error(err);
    alert("Email or Password not Registered!");
  }
};

...

<button 
  onClick={() => {
    logInWithEmailAndPassword(email, password, navigate, "/Login/HomePage");
  }}
>
  Login
</button>

CodePudding user response：

Do something like that

const logInWithEmailAndPassword = async (email, password) => {
 try {  
  await signInWithEmailAndPassword(auth, email, password);
  navigate('/Login/HomePage');
 } catch (err) {
  console.error(err);
  alert("Email or Password not Registered!");
 }
};