The reCAPTCHA container is either not found or already contains internal elements

Question

I get an error in angular 4 when I try to authenticate the phone.

I got this error in the console

The reCAPTCHA container is either not found or already contains internal elements!

I do not see the reCAPTCHA container on my network and cannot click on it.

for login-page.ts

import { Component, OnInit } from '@angular/core'; // tslint:disable-next-line:quotemark import { Router } from "@angular/router"; // tslint:disable-next-line:quotemark import { AuthService } from "../../core/auth.service"; import { ReactiveFormsModule } from '@angular/forms'; import * as firebase from 'firebase'; export class PhoneNumber { country: string; area: string; prefix: string; line: string; // format phone numbers as E.164 get e164() { const num = this.country + this.area + this.prefix + this.line return `+${num}` } } @Component({ // tslint:disable-next-line:component-selector selector: 'user-login', templateUrl: './user-login.component.html', styleUrls: ['./user-login.component.scss'] }) export class UserLoginComponent implements OnInit { // phone auth windowRef: any; phoneNumber = new PhoneNumber(); verificationCode: string; user: any; constructor(public auth: AuthService, private router: Router) { } ngOnInit() { this.windowRef = this.auth.windowRef this.windowRef.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container') this.windowRef.recaptchaVerifier.render() } // phone auth sendLoginCode() { const appVerifier = this.windowRef.recaptchaVerifier; const num = this.phoneNumber.e164; console.log(num); firebase.auth().signInWithPhoneNumber(num, appVerifier) .then(result => { this.windowRef.confirmationResult = result; }) .catch( error => console.log(error) ); } verifyLoginCode() { this.windowRef.confirmationResult .confirm(this.verificationCode) .then( result => { this.user = result.user; }) .catch( error => console.log(error, 'Incorrect code entered?')); } } 

html code

  <div *ngIf="!auth.currentUser; else alreadyLoggedIn"> <h3>Social Login</h3> <button (click)="signInWithGoogle()" class="button btn-social btn-google"> <i class="fa fa-google-plus fa-lg"></i> Connect Google </button> <button (click)="signInWithGithub()" class="button btn-social btn-github"> <i class="fa fa-github fa-lg"></i> Connect GitHub </button> <button (click)="signInWithFacebook()" class="button btn-social btn-facebook"> <i class="fa fa-facebook fa-lg"></i> Connect Facebook </button> <button (click)="signInWithTwitter()" class="button btn-social btn-twitter"> <i class="fa fa-twitter fa-lg"></i> Connect Twitter </button> <hr> <h3>Anonymous Login</h3> <button (click)="signInAnonymously()" class="button button-info"> <i class="fa fa-user-secret fa-lg"></i> Connect Anonymously </button> <hr> <h1>Sign In with Your Phone Number</h1> <label for="phone">Phone Number</label><br> <input type="text" [(ngModel)]="phoneNumber.country" class="input" placeholder="1" maxlength="2"> <input type="text" [(ngModel)]="phoneNumber.area" class="input" placeholder="949" maxlength="3"> <input type="text" [(ngModel)]="phoneNumber.prefix" class="input" placeholder="555" maxlength="4"> <div id="recaptcha-container"></div> <button (click)="sendLoginCode()">SMS Text Login Code</button> <div *ngIf="windowRef.confirmationResult"> <hr> <label for="code">Enter your Verification Code Here</label><br> <input type="text" name="code" [(ngModel)]="verificationCode"> <button (click)="verifyLoginCode()">Verify</button> </div> </div> <ng-template #alreadyLoggedIn> <p class="text-success"> Already logged in! </p> </ng-template> 

Auth service

 import { Injectable } from '@angular/core'; import { AngularFireDatabaseModule, AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database'; import { AngularFireAuth } from 'angularfire2/auth'; import { Router } from "@angular/router"; import * as firebase from 'firebase'; @Injectable() export class AuthService { authState: any = null; constructor(private afAuth: AngularFireAuth, private db: AngularFireDatabase, private router:Router) { this.afAuth.authState.subscribe((auth) => { this.authState = auth }); } // Returns true if user is logged in get authenticated(): boolean { return this.authState !== null; } // Returns current user data get currentUser(): any { return this.authenticated ? this.authState : null; } // Returns get currentUserObservable(): any { return this.afAuth.authState } // Returns current user UID get currentUserId(): string { return this.authenticated ? this.authState.uid : ''; } get windowRef(){ return window } } 

Answer 1

Here is your reliable source! https://developers.google.com/recaptcha/docs/invisible

It seems that div <div id="recaptcha-container"></div> has not yet been added to your DOM, which is in your class constructor.

Also, Angular 2 does not want you to directly modify the DOM. You must change the DOM with ElementRef or ViewChild! Good luck

UPDATE: Here's how to add it to dom. Run the command

 iElement.html('<div id="recaptcha-container"></div>'); 

in angular2.

This command adds this element to dom!

UPDATE # 2: Try adding the following:

First install recaptcha from npm by doing

 npm install angular2-recaptcha 

Add the following to your SystemJS configuration:

 System.config({ map: { 'angular2-recaptcha': 'node_modules/angular2-recaptcha' }, packages: { app: { format: 'register', defaultExtension: 'js' }, 'angular2-recaptcha': {defaultExtension: 'js', main:'index'} } }); 

Then add this module:

 ... import { ReCaptchaModule } from 'angular2-recaptcha'; ... ... @NgModule({ imports: [...,ReCaptchaModule] }) ... 

Then add this to your html:

  <re-captcha site_key="<GOOGLE_RECAPTCHA_KEY>"></re-captcha> 

Replace GOOGLE_RECAPTCHA_KEY with your Google reCaptcha public key

Answer 2

Try html search

 <script type="text/javascript" src="angular-recaptcha.js"></script> <script src="https://www.google.com/recaptcha/api.js" async defer></script> <div class="g-recaptcha" data-sitekey="your_site_key"></div>