How to use email and phone to authentication in Firebase?

Question

I am looking for a way in react-native to make user sign up with his phone number then add his email and password. But when a user logs in, he logs in only with email and password.

The phone number is only for security reasons.

I do a signInWithPhoneNumber() after user verify his number i call a createUserWithEmailAndPassword() but that's made in console Auth Two separate authentication in the same time "Email" & "Phone Number"

code

// I just pass the result into separate screen then use it to confirm all stuff is work :D

...
auth()
        .signInWithPhoneNumber(phoneWithAreaCode, true)
        .then(confirmResult => {
          console.log('2', phoneWithAreaCode);
          console.log('confirmResult', confirmResult);
          this.setState({
            confirmResult,
            loading: false,
          });
        })
...

confirmCode = codeInput => {
    const {confirmResult, email, password} = this.state;
    console.log('codeInput Is:', codeInput.length);
    if (confirmResult && codeInput.length) {
      confirmResult
        .confirm(codeInput)
        .then(async () => {
          clearInterval(this.interval);
          const {params} = this.props.navigation.state;
          await auth()
            .createUserWithEmailAndPassword(email, password)
            .then(({user}) => {
              console.log('hey u');
              let uid = user.uid;
              params.createUser(uid);
            })
            .catch(error => {
              // Handle Errors here.
              var errorCode = error.code;
              switch (errorCode) {
                case 'auth/email-already-in-use':
                  this.setState({loading: false, password: ''});
                  break;
                case 'auth/invalid-email':
                  this.setState({loading: false, password: ''});
                  break;
                case 'auth/operation-not-allowed':
                  this.setState({loading: false, password: ''});
                  break;
                case 'auth/weak-password':
                  this.setState({loading: false, password: ''});
                  break;
                default:
                  this.setState({loading: false, password: ''});
                  break;
              }
            });
          //Check if any users exist
          // database()
          //   .ref(`users`)
          //   .limitToFirst(1)
          //   .once('value', async snapshot => {
          //     if (snapshot.exists()) {
          //       console.log('exists!');
          //       return true;
          //     } else {
          //       // params.createUser(user.uid);
          //       console.log('No user found Hah');
          //     }
          //   });
          this.setState({
            timer: 0,
            isValid: true,
          });
        })
        .catch(error => {
          let errorCode = error.code;
          let errorMessage = error.message;
          console.log(errorCode);
          switch (errorCode) {
            case 'auth/invalid-verification-code':
              this.setState({codeInput: ''});
              this.refs.codeInputRef2.clear();
              break;
            default:
              break;
          }
          console.log(errorMessage);
        });
    } else {
      console.log('Not here');
    }
  };

EDIT

 confirmCode = codeInput => {
    const {confirmResult, password, email} = this.state;
    console.log('codeInput Is:', codeInput.length);
    if (confirmResult && codeInput.length) {
      confirmResult
        .confirm(codeInput)
        .then(user => {
          console.log(user);
          let userE = auth().currentUser;
          // userE.updateEmail(email); 

          auth().createUserWithEmailAndPassword(email, password);

          clearInterval(this.interval);
          const {params} = this.props.navigation.state;
          params.createUser(user.uid);
          this.setState({
            timer: 0,
            isValid: true,
          });
        })
        .catch(error => {
          let errorCode = error.code;
          let errorMessage = error.message;
          switch (errorCode) {
            case 'auth/invalid-verification-code':
              this.refs.codeInputRef2.clear();
              break;
            default:
              break;
          }
          console.log(errorMessage);
        });
    } else {
      console.log('Not here');
    }
  };

Hey dude @Dupocas why you delete firebase-auth Tags? my question relate in them — Oliver D
Only removed react-native since it doesn't directly relate to it. Thanks for warning — Dupocas

Peter Haddad Peter Haddad · Accepted Answer · 2019-11-28T14:05:28

If you want to use multiple auth providers for the same user, then you need to link them to prevent creating separate users. To link them you can use linkWithCredential() for example:

var credential = firebase.auth.EmailAuthProvider.credential(email, password);

Here you pass the email and password to the EmailAuthProvider.credential method, then you can pass the AuthCredential object to the signed-in user's linkWithCredential method:

firebase.auth().currentUser.linkWithCredential(credential).then(function(usercred) {
  var user = usercred.user;
  console.log("Account linking success", user);
}, function(error) {
  console.log("Account linking error", error);
});

You can check the docs for other ways to link multiple providers :

https://firebase.google.com/docs/auth/web/account-linking

https://firebase.google.com/docs/auth/web/account-linking#link-email-address-and-password-credentials-to-a-user-account

How to use email and phone to authentication in Firebase?

EDIT

1 Answers