How to login with "username" instead of "email address" in react app using firebase?

Question

I am working on a react app and implemented a firebase auth method for login with email address or password. It works fine But now I don't need to login with an email address, I need to login with a username and password ?

export const signinUserInFirebase = (user, history) => (dispatch) => {
   dispatch({ type: LOGIN_USER });
   console.log('data', user.email, user.password)
   firebase.auth()
      .signInWithEmailAndPassword(user.email, user.password)

  .then((user) => {
     localStorage.setItem("user_id", "user-id");
     dispatch({ type: LOGIN_USER_SUCCESS, payload: localStorage.getItem('user_id') });
     history.push('/');
     NotificationManager.success('User Login Successfully!');
  })
  .catch((error) => {
     dispatch({ type: LOGIN_USER_FAILURE });
     NotificationManager.error(error.message);
  });
}

There is no built-in username+password provider in Firebase Authentication, but there's a sample for this on the `functions-samples` repo: https://github.com/firebase/functions-samples/tree/Node-8/username-password-auth. Also see https://stackoverflow.com/questions/35120939/username-authentication-instead-of-email — Frank van Puffelen, Feb 19 '19 at 14:52

score 0 · Answer 1 · answered Feb 19 '19 at 14:37

I don't think you can do it using straight firebase authentication. But, you can create a separate ref in firebase where you store basic user data (such as displayName, userId, emailAddress). In your function then, fetch the user emailAddress from your users ref and use it in signInWithEmailAndPassword(email, password)

How to login with "username" instead of "email address" in react app using firebase?

1 Answers1