Closed ghost closed 6 years ago
@team (AngularFire2) / (Firebase) is this true about Ionic or Cordova for Firebase phone Auth ?
https://stackoverflow.com/questions/44081040/ionic2-authentication-firebase
@davideast May I please request the team to comment on this one, please, anyone?
hi @Freelancersunil, you should have this
ionViewDidLoad() { this.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container'); }
after the constructor and also declare
public recaptchaVerifier:firebase.auth.RecaptchaVerifier;
before the constructor. hope this helps
Hi @freelancersunil ,, if you working with ionic, you should go to native implementation of firebase phone authentication
ionic cordova plugin add cordova-plugin-firebase
npm install --save @ionic-native/firebase
After Installation
import { Firebase } from '@ionic-native/firebase';
and provide it in providers array in app.module.ts
login.html
`
<ion-list>
<ion-item>
<ion-label stacked>Phone Number</ion-label>
<ion-input type="number" [(ngModel)]="phoneNumber"></ion-input>
<ion-input type="text" [(ngModel)]="code" placeholder="eg:123456" *ngIf="showCodeInput"></ion-input>
</ion-item>
<ion-item>
<button full ion-button (click)="signInWithPhoneNumber(phoneNumber)" *ngIf="!showCodeInput" icon-left>Login with Number</button>
<button full ion-button (click)="verify()" *ngIf="showCodeInput">Verify Code</button>
</ion-item>
</ion-list>
`
login.ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import * as firebase from 'firebase'
import { Firebase } from '@ionic-native/firebase';
@IonicPage({
name: "login"
})
@Component({
selector: 'page-login',
templateUrl: 'login.html',
})
export class LoginPage {
verificationId: any;
code = '';
showCodeInput = false;
constructor(public navCtrl: NavController, public navParams: NavParams, private FireBase: Firebase) { }
PhoneLoginNative(phoneNumber) {
console.log(phoneNumber);
this.FireBase.verifyPhoneNumber(`+${phoneNumber}`, 60)
.then((credential) => {
console.log(credential);
this.verificationId = credential.verificationId;
this.showCodeInput = true;
}).catch((error) => console.error(error));
}
verify() {
let signInCredential = firebase.auth.PhoneAuthProvider.credential(this.verificationId, this.code);
firebase.auth().signInWithCredential(signInCredential).then((success) => {
console.log(success);
})
}
}
I Hope This Will Help You ^^
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.
my code in de the service is the next:
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);
}
did Someone find any other way? I was unable to use "ionic cordova plugin add cordova-plugin-firebase" due android@0.0.9 is not supported
Version info
Angular: ionic-angular 3.9.2
AngularFire: 5.0.0-rc.11
Other (e.g. Ionic/Cordova, Node, browser, operating system):
(Cordova CLI) : 8.0.0
ionic (Ionic CLI) : 3.20.0
Android SDK Tools : 25.2.5 ios-deploy : 1.9.1 ios-sim : 5.0.8 Node : v8.11.3 npm : 6.1.0 OS : macOS High Sierra Xcode : Xcode 9.4
How to reproduce these conditions
Git Repo : https://github.com/freelancersunil/firebase-phone-auth-ionic3-otp
Steps to set up and reproduce Component HTML File:
TS file:
Debug output