Firebase-js-sdk: Firebase Invisible ReCaptcha callback not being fired

Created on 27 Jun 2020 · 5Comments · Source: firebase/firebase-js-sdk

Environment

Operating System version: macOS Catalina 10.15.5 (19F101)
Browser version: Version 83.0.4103.116 (Official Build) (64-bit)
Firebase SDK version: ^7.15.1
Firebase Product: auth

Problem

Callback is not being fired using invisible reCaptcha for phone number authentication.

Steps to reproduce:

Click on the submit button and you'll notice that the callback is not being fired with the console statement.

Relevant Code:

import React from 'react';

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

const firebaseConfig = {
  apiKey: 'xxx',
  authDomain: 'xxx',
  databaseURL: 'xxx',
  projectId: 'xxx',
  storageBucket: 'xxx',
  messagingSenderId: 'xxx',
  appId: 'xxx',
  measurementId: 'xxx',
};

firebase.initializeApp(firebaseConfig);

function App() {
  const handleSubmit = event => {
    event.preventDefault();

    window.reCaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-in-button', {
      size: 'invisible',
      callback: function (response) {
        // callback is not being fired
        console.log(''I am not being logged in console);
      },
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input />
      <button id="sign-in-button">Submit</button>
    </form>
  );
}

export default App;

auth internal-bug-filed

Source