Reactjs Firebase Auth Phone sign up flow?

Question

I'm transitioning from Email+Password & integrating Firebase Auth signInWithPhoneNumber into my React web app & I'm confused on how to go from:
1. submit phone #
to 2. submit code verification.

It seems to me that the firebase function .signInWithPhoneNumber wants the phone # + verification code all at once, which as we know isn't how real life works.

So, how do you implement prompting the user for the verification code?

handleSignUp = event => {
    event.preventDefault();
    window.appVerifier = new firebase.auth.RecaptchaVerifier(
      "recaptcha-container",
      {
        size: "invisible"
      }
    );
    const appVerifier = window.appVerifier;
    firebase
      .auth()
      .signInWithPhoneNumber(this.state.phoneNumber, appVerifier)
      .then(function(confirmationResult) {
        console.log("Success");
        // SMS sent. Prompt user to type the code from the message, then confirm
        return confirmationResult.confirm(verificationId);
      })
      .catch(function(error) {
        console.log("Error:" + error.code);
      });
  };

Sign up form:

                  <TextField
                  name="First name"
                  value={this.state.firstName}
                />
                <TextField
                 name="lastName"
                 value={this.state.lastName}
                   />
                <TextField
                  name="Username"
                  value={this.state.handle}
                   />
                <TextField
                 name="tel"
                  value={this.state.phoneNumber}
                  />
                <TextField
                   name="confirm"
                  value={this.state.confirm}
                />

                <Button
                  type="submit"
                >
                  Sign Up
                </Button>

Any help will be greatly appreciated!

ExoPlanet100 ExoPlanet100 · Accepted Answer · 2019-10-15T02:31:44

Solution: Followed Firebase's quickstart example + Form = 2 text fields & buttons: 1 for phone #, 1 for verification code.

 handleSignUp = event => {
 event.preventDefault();
 window.appVerifier = new firebase.auth.RecaptchaVerifier(
  "recaptcha-container",
  {
    size: "invisible"
   }
);
const appVerifier = window.appVerifier;
firebase
  .auth()
  .signInWithPhoneNumber(this.state.phoneNumber, appVerifier)
  .then(function(confirmationResult) {
    console.log("Success");
    // SMS sent. Prompt user to type the code from the message, then sign the
    // user in with confirmationResult.confirm(code).
    window.confirmationResult = confirmationResult;
  })
  .catch(function(error) {
    console.log("Error:" + error.code);
  });
};
 onVerifyCodeSubmit = event => {
event.preventDefault();
const verificationId = this.state.verifyNumber;
window.confirmationResult
  .confirm(verificationId)
  .then(function(result) {
    // User signed in successfully.
    var user = result.user;
    user.getIdToken().then(idToken => {
         console.log(idToken);
      });
  })
  .catch(function(error) {
    // User couldn't sign in (bad verification code?)
    console.error("Error while checking the verification code", error);
    window.alert(
      "Error while checking the verification code:\n\n" +
        error.code +
        "\n\n" +
        error.message
    );
  });

};

Reactjs Firebase Auth Phone sign up flow?

1 Answers