admin管理员组文章数量:1326674
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');
}
本文标签: javascriptCannot read property 39RecaptchaVerifier39 of undefinedStack Overflow
版权声明:本文标题:javascript - Cannot read property 'RecaptchaVerifier' of undefined - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742204071a2432489.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论