CODEWITHSUNDEEP
javascriptreactjsfirebasereact-nativefirebase-authentication
Oliver D
Oliver D

Reputation: 2889

How to use email and phone to authentication in Firebase?

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"

Auth

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');
    }
  };

Upvotes: 1

Views: 2021

Answers (1)

Peter Haddad
Peter Haddad

Reputation: 80914

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

Upvotes: 4

Related Questions