I am trying to implement phone auth using firebase. I was going through this guide -> /
Cannot read property 'RecaptchaVerifier' of undefined<
at PhoneLoginComponent.ngOnInit (phone-loginponent.ts:41)
at callHook (core.js:2922)
at callHooks (core.js:2892)
at executeInitAndCheckHooks (core.js:2844)
at refreshView (core.js:7213)
at refreshEmbeddedViews (core.js:8289)
at refreshView (core.js:7222)
at refreshComponent (core.js:8335)
at refreshChildComponents (core.js:6991)
at refreshView (core.js:7248)
I keep getting the above error
import { auth } from 'firebase/app';
ngOnInit(): void {
this.windowRef = this.win.windowRef;
this.windowRef.recaptchaVerifier = new auth.RecaptchaVerifier('recaptcha-container');
this.windowRef.recaptchaVerifier.render();
}
I have already initialized firebase app in app.module.ts
from package.json
"firebase": "^7.15.5"
"@angular/fire": "^6.0.2",
I am trying to implement phone auth using firebase. I was going through this guide -> https://fireship.io/lessons/firebase-phone-authentication-with-angular-4-tutorial/
Cannot read property 'RecaptchaVerifier' of undefined<
at PhoneLoginComponent.ngOnInit (phone-login.ponent.ts:41)
at callHook (core.js:2922)
at callHooks (core.js:2892)
at executeInitAndCheckHooks (core.js:2844)
at refreshView (core.js:7213)
at refreshEmbeddedViews (core.js:8289)
at refreshView (core.js:7222)
at refreshComponent (core.js:8335)
at refreshChildComponents (core.js:6991)
at refreshView (core.js:7248)
I keep getting the above error
import { auth } from 'firebase/app';
ngOnInit(): void {
this.windowRef = this.win.windowRef;
this.windowRef.recaptchaVerifier = new auth.RecaptchaVerifier('recaptcha-container');
this.windowRef.recaptchaVerifier.render();
}
I have already initialized firebase app in app.module.ts
from package.json
"firebase": "^7.15.5"
"@angular/fire": "^6.0.2",
5 Answers
Reset to default 6This works for me:
import firebase from 'firebase/app';
import 'firebase/auth';
First solution Try this import
import { auth } from 'firebase';
Second solution: if that doesn't work, try as it is done the link it is refered to see if that works
import * as firebase from 'firebase';
then use it like
new firebase.auth.RecaptchaVerifier('recaptcha-container')
You can either do:
import { auth } from 'firebase';
Or:
import * as firebase from 'firebase/app';
import 'firebase/auth';
And then: new firebase.auth.RecaptchaVerifier
Change the import to:
import * as firebase from 'firebase';
and then:
this.windowRef.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container');
Sometimes this error throwed when i reloaded page. I use Ionic + Angular. So the problem could be in ngOnInit. The method calls it too early, and to solute this you can do:
Bring your recaptha to angular lifecycle hooks which goes last (AfterContentInit, AfterContentChecked, or you could try with another hooks)
ngAfterContentChecked() { // recaptcha }
For ionic i had page hook ionViewDidEnter
ionViewDidEnter() { // recaptcha }
I can't place new RecaptchaVerifier with new
firebase.auth.RecaptchaVerifier('recaptcha-container');
window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container');
- does'nt work like that
the right way:
<!-- html -->
<div id="recaptcha-container"></div>
// ts
let recaptcha: any;
ngAfterContentChecked(): void {
this.recaptcha = new firebase.auth.RecaptchaVerifier('recaptcha-container');
}