How to implement Firebase phone authentication with Ionic 4?

Question

Is it possible to use phone authentication with Firebase and Ionic 4 in mobile apps?

I have seen some old tutorials implementing phone authorization with Ionic 3, but these seem to be outdated.

The firebaseui-web project does not support phone authentication for cordova apps, but I am unsure if that implies that Firebase phone authentication is impossible with ionic apps.

If you cannot use Firebase's phone authentication with Ionic 4, is there an alternative phone authentication service that does work with Ionic 4?

Answer 1

Yes. You can do it with Firebase's Javascript SDK, it will need the user to pass a CAPTCHA and then send the phone number a verification code which you can login and auth with, the process is explained here:

https://firebase.google.com/docs/auth/web/phone-auth#send-a-verification-code-to-the-users-phone

Answer 2

The problem is that the firebase auth sms service will only send messages when the app is in production mode (uploaded to the store). But to be able to test the methods from test mode, it is adding a test number in the white list of firebase.

In my case, I try these:

sms-verification.page.ts

sendSmsVerification(phoneNumber): Promise <firebase.auth.UserCredential> {
    return new Promise((resolve, reject) => {

        firebase.auth().useDeviceLanguage();
        var verificationId;
        var code;
        const timeOutDuration = 60;
        const tell = '+54' + phoneNumber;
        this.FireBase.verifyPhoneNumber(tell, timeOutDuration).then(async (credential) => {
            // alert(credential.instantVerification);
            if (credential.verificationId) {
                console.log("Android credential: ", credential);
                verificationId = credential.verificationId;
            } else {
                console.log("iOS credential: ", credential);
                verificationId = credential;
            }
            if (credential.instantVerification) {
                code = credential.code;
                this.verifySms(verificationId, code)
                .then( resp => {
                    resolve(resp);
                })
                .catch( err => {
                    reject(err);
                });
            } else {
                let prompt = await this.alertCtrl.create({
                    backdropDismiss: false,
                    header: 'Ingrese el codigo de confirmación del SMS.',
                    inputs: [{ name: 'confirmationCode', placeholder: 'Código de confirmación' }],
                    buttons: [
                        { text: 'Cancelar',
                        handler: data => { 
                            console.log('Cancel clicked');
                            resolve(data);
                        }
                        },
                        { text: 'Verificar',
                        handler: data => {
                            code = data.confirmationCode; 
                            this.verifySms(verificationId,code)
                            .then( resp => {
                                resolve(resp);
                            })
                            .catch( err => {
                                reject(err);
                            });                            }
                        }
                    ]
                });
                prompt.present();
            }
        }).catch(error => {
            console.log('Error! Catch SMSVerificacion', error);
            reject(error);
        });
    })
}


verifySms(verificationId, code): Promise <any> {
    console.log('parametros de verifySms ', verificationId +' ', code);
    const signInCredential = firebase.auth.PhoneAuthProvider.credential(verificationId,code);
    return firebase.auth().signInAndRetrieveDataWithCredential(signInCredential);
}

Answer 3

Yes, it's possible to use firebase phone authentication using Cordova plugin,

cordova-plugin-firebase-authentication

Add this plugin to your ionic 4 project

cordova plugin add cordova-plugin-firebase-authentication --save

With this we can verify phone without using reCaptcha. Note that this only work on real android device, not emulator or browser. Function implementation

verifyPhoneNumber(phoneNumber, timeout)

cordova.plugins.firebase.auth.verifyPhoneNumber("[phone]", 30000)
.then(function(verificationId) {
        // pass verificationId to signInWithVerificationId
});

or AngularFire (With reCaptcha)

https://github.com/angular/angularfire

First, install angularfire lib into your project

npm install firebase @angular/fire --save

then import this lib into your class

import * as firebase from 'firebase/app';

code example:

firebase.auth().signInWithPhoneNumber(phoneNumber,recaptchaVerifier)
        .then(confirmationResult => {
          this.windowRef.confirmationResult = confirmationResult;
    })