How I do Remove reCAPTCHA box Firebase Phone Auth

Ionic Framework ionic-v3
1

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
  </button>

</ion-content>

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';

@Component({
  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 => {
              confirmationResult.confirm(data.confirmationCode)
              .then(function (result) {
                // User signed in successfully.
                console.log(result.user);
              }).catch(function (error) {
                // User couldn't sign in (bad verification code?)
              });
            }
          }
        ]
      });
      prompt.present();
    })
    .catch(function (error) {
      console.error("SMS not sent", error);
    });

  }
}

How Do I manipulate or remove reCaptcha?

2

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) {

3

Hi
do you have it running now

4

Hello,
It still doesn’t work

5

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