Firebase Authentication using a custom domain - Blank page after selecting my google account

Question

I'm using Firebase Authentication for my web app, and customizing the redirect domain for Firebase Authentication's Google Sign-In feature so that Google's authentication page will show Continue to: mydomain.io,

I followed Firebase's documentation:

1. Domain Hosting

Firebase Hosting

Cloudflare config

2. Add auth.mydomain.io to the list of authorized domains in the Firebase console

Firebase console authorized domains

3. In the Google OAuth setup page, whitelist the URL of the redirect page which is https://auth.mydomain.io/__/auth/handler

Google OAuth client

4. Edit my app's JavaScript code:

const firebaseConfig = {
 ...
 authDomain: "auth.mydomain.io",
 ...
}

Running my app locally, I can see my domain is properly linked to my app.

Login: Continue to mydomain.io

But, when I select a Google account to connect to, nothing happens. In the popup, I am redirected to auth.mydomain.io with a blank page & an infinite loading bar at the top

EDIT: I also have the same problem using Facebook OAuth

After selecting the account

After maybe 10 seconds the popup closes by itself and I get the following error in my local app console:

FirebaseError: Firebase: Error (auth/popup-closed-by-user).
    at createErrorInternal (assert.ts:122:1)
    at _createError (assert.ts:83:1)
    at popup.ts:283:1

When I change the app's JavaScript configuration to myapp.firebaseapp.com for the authDomain property, it works fine and I can login with my google account

const firebaseConfig = {
 ...
 authDomain: "myApp.firebaseapp.com",
 ...
}

Answer 1

Coming back with some good news. It now works perfectly, though I haven't changed anything. Give it 24h-48h if you are in the same situation I was.