How I do Remove reCAPTCHA box Firebase Phone Auth

A reCAPTCHA box doesn’t make sense in an installable app.

Here is my Home.html

<ion-content text-center>
  <img src="./../../assets/img/logo.png" alt="Logo">
<div id="recaptcha-container"></div> 

 <ion-input text-center type="text" [(ngModel)]="phoneNumber" placeholder="ENTER YOUR PHONE NUMBER (+1-000-000-00)"></ion-input>

  <button text-center ion-button id="sign-in-button" (click)="signIn(phoneNumber)">
    Sign In


Here is my Home.ts

import { Component } from '@angular/core';
import { NavController, AlertController } from 'ionic-angular';
import { NewUserPage } from '../new-user/new-user';

import firebase from 'firebase';

  selector: 'page-home',
  templateUrl: 'home.html'
export class HomePage {

  public recaptchaVerifier:firebase.auth.RecaptchaVerifier;

  constructor(public navCtrl: NavController, public alertCtrl:AlertController) {


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

  signIn(phoneNumber: number){
    const appVerifier = this.recaptchaVerifier;
    const phoneNumberString = "+" + phoneNumber;
    firebase.auth().signInWithPhoneNumber(phoneNumberString, appVerifier)
      .then( confirmationResult => {
        // SMS sent. Prompt user to type the code from the message, then sign the
        // user in with confirmationResult.confirm(code).
        let prompt = this.alertCtrl.create({
        title: 'Enter the Confirmation code',
        inputs: [{ name: 'confirmationCode', placeholder: 'Confirmation Code' }],
        buttons: [
          { text: 'Cancel',
            handler: data => { console.log('Cancel clicked'); }
          { text: 'Send',
            handler: data => {
              .then(function (result) {
                // User signed in successfully.
              }).catch(function (error) {
                // User couldn't sign in (bad verification code?)
    .catch(function (error) {
      console.error("SMS not sent", error);


How Do I manipulate or remove reCaptcha?

You can do a check to see if the code is running in a browser or as an installed app with this:

this.isApp = !document.URL.startsWith('http');

Then in your markup you can use *ngIf="!isApp" to show the recaptcha
And in your controller you can wrap the captcha verification in an if (!this.isApp) {

do you have it running now

It still doesn’t work

you can use invisible firebase recaptcha : see the link bellow: