Firebase auth verify phone with email/password

register.vue

<template>
  <div>
    <v-container align-content-center>
      <v-layout class="px-4 pt-4 pt-2">
        <v-flex>
          <v-form v-model="valid">
            <div class="py-1">
              <v-text-field
                v-model="name"
                :rules="nameRules"
                prepend-icon="people"
                label="Name*"
                required
                color="white"
                placeholder="Your name"
              ></v-text-field>
            </div>
            <div class="py-1">
              <v-text-field
                v-model="email"
                :rules="emailRules"
                prepend-icon="email"
                label="Email*"
                required
                color="white"
                placeholder="Your email"
              ></v-text-field>
            </div>
            <div class="py-1">
              <v-text-field
                v-model="phone"
                :rules="phoneRules"
                prepend-icon="stay_current_portrait"
                label="Phone*"
                type="number"
                required
                color="white"
                placeholder="Your phone"
              ></v-text-field>
            </div>
            <div class="py-1">
              <v-text-field
                v-model="password"
                :rules="passwordRules"
                prepend-icon="lock"
                label="Password*"
                type="password"
                required
                color="white"
                placeholder="Your password"
              ></v-text-field>
            </div>
            <div class="py-1">
              <v-text-field
                v-model="confirmPassword"
                :rules="confirmPasswordRules()"
                prepend-icon="lock"
                label="Confirm Password*"
                type="password"
                required
                color="white"
                placeholder="Your password"
              ></v-text-field>
            </div>
            <div class="py-1">
              <v-text-field
                v-model="beta_code"
                :rules="betaCodeRules"
                prepend-icon="attach_money"
                label="Beta Code*"
                required
                color="white"
                placeholder="Your beta code"
              ></v-text-field>
            </div>
          </v-form>
        </v-flex>
      </v-layout>
      <v-layout class="px-4 py-1">
        <v-btn block color="error" @click="register()">Register</v-btn>
      </v-layout>
      <div id="recaptcha-container"></div>
      <v-dialog
        v-model="dialog"
        max-width="290"
      >
      <v-card>
        <v-card-title class="headline">Enter OTP Number</v-card-title>

        <v-card-text>
          <v-text-field
            v-model="otp"
            label="OPT Number"
          ></v-text-field>
        </v-card-text>

        <v-card-actions>
          <v-spacer></v-spacer>

          <v-btn
            color="green darken-1"
            flat="flat"
            @click="verifyOtp()"
          >
            Verify
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
      <!-- <p class="login-or-element">or</p>
      <v-layout class="px-4 py-1">
        <v-btn block color="error" @click="signin()">Sign In</v-btn>
      </v-layout> -->
    </v-container>
  </div>
</template>

<script>
import firebase from 'firebase';

export default {
  name: 'Register',
  data: () => ({
    valid: false,
    name: '',
    nameRules: [
      v => !!v || 'Name is required',
    ],
    email: '',
    emailRules: [
      v => !!v || 'E-mail is required',
      v => /.+@.+/.test(v) || 'E-mail must be valid',
    ],
    phone: '',
    phoneRules: [
      v => !!v || 'Phone number is required',
      v => /^[0-9]{8,15}$/.test(v) || 'Must be a valid number',
      v => v.length > 8 || 'Must have at least 9 number',
    ],
    password: '',
    passwordRules: [
      v => !!v || 'Password is required',
    ],
    confirmPassword: '',
    beta_code: '',
    betaCodeRules: [
      v => !!v || 'Beta code is required',
    ],
    appVerifier: '',
    dialog: false,
    otp: '',
  }),
  methods: {
    confirmPasswordRules() {
      return this.password === this.confirmPassword ? [true] : ['Passwords do not match'];
    },
    register() {
      this.$store.commit('set_name', this.name);
      this.$store.commit('set_email', this.email);
      this.$store.commit('set_phone', this.phone);
      this.$store.commit('set_beta_code', this.beta_code);
      if (!this.checkIsBetaCodeUsed()) {
        this.sendOtp();
      } else {
        this.$toasted.show('Code is already in used!');
      }
    },
    checkIsBetaCodeUsed() {
      let isBetaCodeUsed = '';
      firebase.database().ref(`beta_code/${this.betaCode}`).on('value', (snapshot) => {
        isBetaCodeUsed = snapshot.val().used;
      });
      return isBetaCodeUsed;
    },
    sendOtp() {
      const countryCode = '+95';
      const phoneNumber = `${countryCode}${this.phone.substr(1)}`;
      console.log(phoneNumber);
      /* eslint-disable */
      let self = this;
      firebase.auth().signInWithPhoneNumber(phoneNumber, window.recaptchaVerifier)
        .then(function (confirmationResult) {
          window.confirmationResult = confirmationResult;
              self.$toasted.show('SMS sent');
              self.dialog = true;
          }).catch(function (error) {
          // Error; SMS not sent
            self.$toasted.show('Error ! SMS not sent');
          });
      /* eslint-disable */    
    },
    verifyOtp(){
      let vm = this;
      let code = this.otp;
      window.confirmationResult.confirm(code).then(function (result) {
        // User signed in successfully.
        var user = result.user;
        firebase.auth().createUserWithEmailAndPassword(vm.email, vm.password)
        .then((response) => {
          const database = firebase.database();
          database.ref('user').push({
            name: vm.$store.state.name,
            email: vm.$store.state.email,
            phone: vm.$store.state.phone,
            beta_code: vm.$store.state.beta_code,
          }).then(() => {
            if (result.key !== '') {
              databas.ref(`beta_code/${vm.betaCode}`).update({
                used: true
              })
              .then(() => {
                vm.$store.commit('set_is_logged_in', true);
                vm.$store.commit('set_nav', true);
                vm.$store.commit('set_bottom_nav', true);
                vm.$router.push({
                  path: '/profile',
                });
              });
            } else {
              console.log('Yes');
            }
          });
        });
        // .catch((error) => {
        //   let errorCode = error.code;
        //   let errorMessage = error.Message;
        //   if (errorCode = 'auth/weak-password') {
        //     vm.dialog = false;
        //     vm.$toasted.show('Account already exits');
        //   } else {
        //     alert(errorMessage);
        //   }
        // });
      }).catch(function (error) {
        // User couldn't sign in (bad verification code?)
        // ...
      });
    },
    initReCaptcha() {
      setTimeout(() => {
        /* eslint-disable */
        let vm = this;
        window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container', {
          'size': 'invisible',
          'callback': function(response) {
            // reCAPTCHA solved, allow signInWithPhoneNumber.
            console.log('reCAPTCHA solved');
          },
          'expired-callback': function() {
            // Response expired. Ask user to solve reCAPTCHA again.
            // ...
          }
        });

        window.recaptchaVerifier.render().then((widgetId) => {
          window.recaptchaWidgetId = widgetId;
        });
      }, 1000);
        /* eslint-disable */
    },
  },
  created() {
    this.$store.commit('set_nav', false);
    this.$store.commit('set_bottom_nav', false);
  },
  mounted() {
  this.initReCaptcha();
},
};
</script>

<style lang="scss" scoped>
.login-form--wrap {
  min-height: 300px;
}

.login-or-element {
    width: calc(100% - 40px);
    margin: 10px auto;
    position: relative;
    text-align: center;
    color: #fff;
    font-weight: 500;
}

.login-or-element:after, .login-or-element:before {
    width: 40%;
    height: 1px;
    background: #bbb;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 0;
    content: " ";
}

.login-or-element:after {
    right: auto;
    left: 0;
}
</style>