firebase-phone-check.html

<ion-card>
  <ng-container *ngIf="verificationId === '';else showSmsCode">

    <ion-card-header>
      Número de telefone com DDD
    </ion-card-header>
    <ion-card-content>
      <ion-row>

        <ion-col col-6>
          <select-countries-code [(countryCode)]="countryCode"></select-countries-code>
        </ion-col>
        <ion-col col-6>
          <ion-item no-padding>
            <ion-input type="number" placeholder="Número de telefone" [(ngModel)]="phoneNumber" class="phone-number"></ion-input>
          </ion-item>
        </ion-col>
      </ion-row>

      <button style="margin-top: 10px" type="button" item-start full ion-button color="petro" (click)="verifyPhoneNumber()">Verificar</button>


    </ion-card-content>
  </ng-container>

  <ng-template #showSmsCode>

    <ion-card-header>
      Confirmar seu número de telefone
    </ion-card-header>
    <ion-card-content>
      <p>Insira o código de 6 dígitos enviado para<br>
        <strong>{{fullPhoneNumber}}</strong>
      </p>
      <ion-item style="margin-top: 10px">
        <ion-input type="number" [(ngModel)]="smsCode" placeholder="Código SMS"></ion-input>
      </ion-item>

      <ion-grid>
        <ion-row>
          <ion-col>
            <button  type="button" ion-button color="light" (click)="cancel()">Cancelar</button>
          </ion-col>
          <ion-col col-6>
            <button smalltype="button" block item-end ion-button color="petro" (click)="signInWithVerificationId()">Continuar</button>
          </ion-col>
        </ion-row>

      </ion-grid>

      <ion-item style="margin-top: 10px">
      <a  href="javascript:void(0)" (click)="resendSmsCode()">Reenviar código</a>
      </ion-item>
    </ion-card-content>

  </ng-template>

</ion-card>

firebase-phone-check.ts

import {Component, EventEmitter, Output, ViewChild} from '@angular/core';
import {AlertController, Platform, ToastController} from "ionic-angular";
import {FirebaseAuthProvider} from "../../providers/auth/firebase-auth";

declare const cordova;
/**
 * Generated class for the FirebasePhoneCheckComponent component.
 *
 * See https://angular.io/api/core/Component for more info on Angular
 * Components.
 */
@Component({
  selector: 'firebase-phone-check',
  templateUrl: 'firebase-phone-check.html'
})
export class FirebasePhoneCheckComponent {

  countryCode = "55";
  phoneNumber = '';
  verificationId = "";
  smsCode = '';

  @Output() onAuth: EventEmitter<any> = new EventEmitter<any>();


  constructor(private platform: Platform,
              private toastCtrl: ToastController,
              private alert: AlertController,
              private firebaseAuth: FirebaseAuthProvider) {
    console.log('Hello FirebasePhoneCheckComponent Component');
  }

  resendSmsCode(){
      this.verifyPhoneNumber()
          .then(() => this.showToast('SMS enviado.'))
  }

  verifyPhoneNumber(): Promise<any> {
    return new Promise((resolve, reject) => {

        this.platform.ready().then(()=> {
            cordova.plugins.firebase.auth.verifyPhoneNumber(this.fullPhoneNumber, 0)
                .then(
                    verificationId => {
                        resolve(this.verificationId = verificationId)
                    },
                    error => {
                        console.log(error);
                        reject(error);
                        this.showToast(error)
                    }
                )
        })

    })
        .then((verification) => console.log('código e verificao foi recebido.'))
  }

  signInWithVerificationId(){

      cordova.plugins.firebase.auth.onAuthStateChanged((userInfo) =>{
          this.showToast(userInfo);
          if (userInfo && userInfo.uid) {
              console.log('userInfo from Cordova',userInfo);
              this.showToast(userInfo);
              const fbCredential = this.firebaseAuth.firebase.auth.PhoneAuthProvider.credential(this.verificationId, this.smsCode)
              this.firebaseAuth.firebase.auth()
                  .signInAndRetrieveDataWithCredential(fbCredential)
                  .then(
                      (user) => {
                          this.showToast('User authenticated');
                          console.log('User authenticated',user);
                          this.onAuth.emit(user);
                      },
                      (error) => {
                          console.log('User not authenticated',error);
                          let alert = this.alert.create({
                            title: 'error',
                            message: error,
                            buttons: ['OK']
                          });
                          alert.present();
                      }
                  );
          } else {
              this.showToast(userInfo);
              this.showToast('user was signed out');
          }
      });


      // cordova.plugins.firebase.auth
      //     .signInWithVerificationId(this.verificationId, this.smsCode)
      //     .then(
      //         (userInfo) => {
      //             console.log(userInfo)
      //             this.firebaseAuth.firebase.auth().signInAndRetrieveDataWithCredential(this.fbCredential)
      //                 .then(
      //                     (user) => {
      //                         console.log(user)
      //                         this.onAuth.emit(user);
      //                     },
      //                     (error) => {
      //                       console.log(error);
      //                       let alert = this.alert.create({
      //                           title: 'firebaseAuth',
      //                           message: error,
      //                           buttons: ['OK']
      //                       });
      //                         alert.present();
      //                       //this.showToast('Não foi possível autenticar o telefone.')
      //                     }
      //                 )
      //         },
      //         (error) => {
      //             console.log(error);
      //             let alert = this.alert.create({
      //                 title: 'sem userInfo',
      //                 message: error,
      //                 buttons: ['OK']
      //             });
      //             alert.present();
      //             //this.showToast('Não foi possível verificar o código SMS.')
      //         }
      //     )
  }

  get fbCredential(){
      return this.firebaseAuth
          .firebase
          .auth
          .PhoneAuthProvider
          .credential(this.verificationId, this.smsCode)
  }

  showToast(message){
    const toast = this.toastCtrl.create({
        message,
        duration: 3000
    });
    toast.present();
  }

  cancel(){
      this.verificationId = '';
  }

  get fullPhoneNumber(){
      const countryCode =  this.countryCode.replace(/[^0-9]/g, '');
      return `+${countryCode}${this.phoneNumber}`;
  }

}