ionic firebase phone authentication The SMS code has expired. Please re-send the verification code to try again

user_7628381 0
Viewed 2361

I am using this plugin for phone authentication.https://ionicframework.com/docs/native/firebase-authentication

I have successfully sent the top to mobile numbers, but while retrieving I am getting following error every time

The SMS code has expired. Please re-send the verification code to try again

I also want to auto verify otp(without letting the user to manually enter otp).

I think both issues are interconnected

Here is my code 

import { AngularFireAuth } from '@angular/fire/auth';
import * as firebase from 'firebase/app';
import { FirebaseAuthentication } from '@ionic-native/firebase-authentication/ngx';

constructor(private router: Router,private fireAuth: AngularFireAuth,public firebaseAuthentication : FirebaseAuthentication) {}

send(){


      this.firebaseAuthentication.verifyPhoneNumber("+91xxxxxxxxxx", 30000).then(credential => {
        alert("code sent")

        console.log(credential)

        if(credential) {

          this.verificationid = credential

          const smsCode = prompt("Enter SMS verification code");

          let cred = firebase.auth.PhoneAuthProvider.credential(this.verificationid,smsCode)

          this.fireAuth.signInWithCredential(cred).then(val => {
            console.log(val)
            console.log("successs")
          }).catch(err => console.log(err))

        }
      })
    }
ionic4 angularfire ionic-framework firebase-authentication firebase
1 Answers

It turns out to be very simple.

All latest android phones support auto-verify OTP. verifyPhoneNumber method auto verifies otp. Thus when we ask the user to enter OTP it gives an error "code expired".

So the solution is on android devices listen to onAuthStateChanged method to redirect users after successful phone authentication and for old devices or ios enter otp manually works.

Here is full code

html

<div [hidden]="display_otp">

  <ion-item>
    <ion-label position="floating"> Enter your mobile number </ion-label>
    <ion-input type="tel" [formControl] = "mobile_no" ></ion-input>

  </ion-item>
  <ion-button [disabled] = "mobile_no.invalid" (click)="Send(mobile_no.value)">Continue</ion-button>
</div>

<div *ngIf="display_otp">
  <ion-item>
    <ion-label position="floating"> Enter your OTP  </ion-label>
    <ion-input type="tel" [formControl] = "otp" ></ion-input>

  </ion-item>

  <ion-button [disabled] = "otp.invalid" (click)="enter_otp(otp.value)">Submit</ion-button>
</div>

.ts 

constructor(){


this.firebaseAuthentication.onAuthStateChanged().subscribe(user =>{

        if(user) {
          console.log(user)

          console.log("success")
          // OTP verifired. Do success operation
        }
        else {
          console.log("state not changed")
       // wrong otp
        }
      })

}


    Send(mobile_no){
        console.log(mobile_no) 
        let mobile ="+91" + mobile_no
        console.log(mobile)


        this.firebaseAuthentication.verifyPhoneNumber(mobile, 30000).then(credential =>{
          if(credential){

            console.log(credential)
            this.verificationid = credential
            this.display_otp = true

          }
        })


       }  

       enter_otp(otp){
         console.log(otp)

         this.firebaseAuthentication.signInWithVerificationId(this.verificationid, otp).then(user =>{
          if(user) {
            console.log(user)

          }
          else {
            console.log("no user")
          }
        })

       }
user_76283810
Related