Error: reCAPTCHA container is either not found or already contains inner elements

Question

I am trying Phone number authentication using Ionic2/typescript and initialising the recaptcha verifier like this:

.ts file

    import firebase from 'firebase';

     @IonicPage()
     @Component({
       selector: 'page-login',
       templateUrl: 'login.html',
     })

     export class LoginPage {

    public recaptchaVerifier:firebase.auth.RecaptchaVerifier;
           constructor(afAuth: AngularFireAuth, public authData: AuthProvider, public alertController: AlertController, formBuilder: FormBuilder, public navCtrl: NavController, public navParams: NavParams) {
             this.loginForm = formBuilder.group({
               phone: ['', Validators.compose([Validators.required, 
                 Validator.isValidPhone])]
             });
             try {
               this.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container');
             }catch(e){
               console.log("There was a problem in initializing the recapctha verifier: " + e);
             }
             this.authData.recaptchaVerifier = this.recaptchaVerifier;
           }
}

.html file

<ion-content padding>
  <div id="recaptcha-container"></div>
  <form [formGroup]="loginForm" (submit)="loginUser()" novalidate>

    <ion-item>
      <ion-label stacked>Phone Number</ion-label>
      <ion-input #phone formControlName="phone" type="phone" placeholder="10 digit mobile number"
        [class.invalid]="!loginForm.controls.phone.valid &&
          loginForm.controls.phone.dirty"></ion-input>
    </ion-item>
    <ion-item class="error-message" *ngIf="!loginForm.controls.phone.valid  &&
      loginForm.controls.phone.dirty">
      <p>Please enter a valid 10 digit mobile number.</p>
    </ion-item>

    <button ion-button block type="submit">
      Next
    </button>

  </form>

</ion-content>

However when I run the code I get:

Error: reCAPTCHA container is either not found or already contains inner elements

Exploring the world of ionic and firebase for the first time, I find it difficult to understand the problem. Anyone encountered and solved this problem before? Any insight will be helpful.

Solution 1

you should call it after view init "ionViewDidEnter"

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

Solution 2

I think that the problem is that

<div id="recaptcha-container"></div>

has not been added to the DOM yet (in the constructor of your class). You have to wait for it to do this.

One thing is that Angular 2 expect you to not access/manipulate the DOM directly. You should do this 'the Angular way', either with ElementRef (here is an example, you have to wait for the ngAfterContentInit lifecycle event) or ViewChild.

Solution 3

You can also add a delay to load the captcha. It did the trick for me.

JS :

  var defaultApp = firebase.initializeApp(config);
  setTimeout(function() {
    window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container', {
        'size': 'normal',
        'callback': function(response) {
            console.log("success", response);
        },
        'expired-callback': function() {
            console.log("expired-callback");
        }
    });

    recaptchaVerifier.render().then(function(widgetId) {
        window.recaptchaWidgetId = widgetId;
    });
  },2000);

HTML :

<div id="recaptcha-container"></div>

Solution 4

Well, the problem is, you have written the recaptcha verifying code before html rendition, either in constructor or oninit if using ionic4. Write it inside ionViewDidEnter. Html is rendered by then and that node can be found with given id in the html document by then.

View more solutions