Cannot read property 'RecaptchaVerifier' of undefined

user_4481095 0
Viewed 4588

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.component.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",

firebase-authentication angular javascript
5 Answers

This works for me:

import firebase from 'firebase/app';
import 'firebase/auth';
user_148861880

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')
user_83514930

You can either do:

import { auth } from 'firebase';

Or:

import * as firebase from 'firebase/app';
import 'firebase/auth';

And then: new firebase.auth.RecaptchaVerifier

user_2091030

Change the import to:

import * as firebase from 'firebase';

and then:

this.windowRef.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container');
user_52649950

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:

  1. Bring your recaptha to angular lifecycle hooks which goes last (AfterContentInit, AfterContentChecked, or you could try with another hooks)

    ngAfterContentChecked() { // recaptcha }

  2. For ionic i had page hook ionViewDidEnter

    ionViewDidEnter() { // recaptcha }

  3. 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');
}
user_131963360
Related