Recaptcha Visually Broken on Firebase Phone Auth App in the Browser

Question

I really like Firebase phone authentication. I wrote a project in February 2017 using

<script src="https://cdn.firebase.com/libs/firebaseui/2.3.0/firebaseui.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/2.3.0/firebaseui.css" />

Pretty good results:

I'm trying to create a new similar product. Thought I'd go ahead and use the latest releases for Firebase Auth stuff. firebaseui.js and .css version 3.4.1 Unfortunately the new Recaptcha totally kills the project.

...and here is phase two. You can't navigate too far off screen. This is unusable in current form.

I'm looking closely at the iframe stuff, including all pertinent CSS settings. At first glance nothing seems amiss, but the new stuff looks terrible and is totally non functional.

Its not clear exactly which version of recaptcha is involved for each UI version. For the simple check the box initial area, the old 2.3.0 version uses an iframe that starts: https://www.google.com/recaptcha/api2/anchor?ar=2&k=... . The newer, unreadable version (from firebaseui 3.4.1) uses an iframe that starts https://www.google.com/recaptcha/api2/anchor?ar=1&k=...

I've now been testing so long, that I'm getting a ReCaptcha error, sigh.

Your computer or network may be sending automated queries. To protect our users, we can't process your request right now. For more details visit our help page link

This website is only intended for use via mobile phone. With the existing state, no user will understand that they have to click in the box to get to the next reCaptcha phase...

Any workarounds for cleaning this up? From what I can tell, if you use phone authentication with Firebase Auth, you MUST use reCaptcha.

How can I clean up phase one recaptcha, "Check the box". How can I clean up phase two recaptcha "Select the square with the crosswalk / bus / orange aligators" .

(For that phase, I'm dying to try...)

@media (max-width:320px) {
    .firebaseui-recaptcha-container>div>div {
        transform: scale(.7);
        -webkit-transform: scale(.7);
        transform-origin: 0 0;
        -webkit-transform-origin: 0 0
    }
}

Answer 1

Ouch, Ouch...

So I'm still playing around with this... The work done above was using Chrome with the developer tools (Right Click --> Inspect), then selecting mobile devices for display. The images are screen prints from my laptop.

I thought I'd give this another attempt, this time using real mobile phone using my local home network. Node server running on laptop local host, port 8000. Phone linked in via the laptop's local ip address (e.g. 192.168.1.19:8000)

Wow. The display is totally normal and readable as intended on my phone. Now I can't directly troubleshoot my client code / javascript stuff there, but I can certainly make this work. The recaptcha display looks fine in full screen mode. I can troubleshoot code on the laptop, verify on mobile phone. It's not clear if this is a modification of CSS somewhere, or a disconnect in the chrome dev tools rendering?

Normally I'd just delete this entire question, but I suspect perhaps someone else could hit this silly dilemma. I've just wasted three hours of my life, I'll never get back.

The answer here is, what you see in your dev tools browser (in mobile device display mode) may not reflect what you see on an actual mobile device. Check both before wasting time.