Reactjs Firebase Auth Телефон зарегистрироваться поток?

Question

Я перехожу с Email + Password и интегрирую Firebase Auth signInWithPhoneNumber в свое веб-приложение React, и я не понимаю, как перейти от:
1. отправить телефон #
к 2. отправить проверку кода.

Мне кажется, что функция firebase .signInWithPhoneNumber хочет получить телефонный код подтверждения + + одновременно, что, как мы знаем, не так, как работает реальная жизнь.

Итак, как выреализовать запрос пользователя на ввод кода подтверждения?

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

Форма регистрации:

                  <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>

Любая помощь будет принята с благодарностью!

Answer 1

Решение: По примеру быстрого запуска Firebase + Форма = 2 текстовых поля и кнопки: 1 для телефона #, 1 для кода подтверждения.

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

};