React PWA is handling auth redirect for custom domain instead of Firebase

I am trying to enable Firebase Google authentication in my React PWA, specifically the sigInWithPopup method. It works fine when I use the default URLs provided by Firebase (e.g., my-project.firebaseapp.com or my-project.web.app), but it's not working when I connect a custom domain. With this setup, I get a pop-up window that seems to be immediately handled by my own PWA rather than the Firebase auth server.

My custom domain is purchased from Cloudflare, and I am hosting my app through Firebase Hosting (not App Hosting). I've updated my app's Firebase config to use my custom domain. I've updated my Google Client ID to have my custom domain in the "Authorized JavaScript origins" and I've added https://my-custom-domain.app/__/auth/handler to the list of "Authorized redirect URIs". I've added my custom domain to the "Authorized Domains" section of my Firebase project as well. My authDomain Firebase config has also been updated to match my custom domain.

On the Cloudflare side, I've added the following config:

My Firebase project says that the custom domain is successfully connected. I've spent the past few days troubleshooting this, even having an entire debug session with Gemini in Firebase. So far, no luck, but I think I've been able to narrow down areas I need to focus on.

Since the app works perfectly fine when I use the default Firebase URLs, I'm fairly confident the issue is either in my PWA config or my Cloudflare DNS config. I've tried tweaking the "rewrites" parameter in my firebase.json, but it still looks like the Firebase auth handler is not being called correctly. Instead, my PWA catches the request, and since I do not have any defined paths for the auth handler, it defaults to the app's Page Not Found message. Is there any extra handling I have to add in the app to account for this? I would assume no, since the app works with default Firebase URLs.

So, what else can I try to enable Firebase Google auth using my custom domain (and sub-domains)?

Other potentially useful info:

• Here is a snippet of my React Router configuration if it helps:

const router = createBrowserRouter([
    {
        element: <Entrypoint />,
        errorElement: <PageNotFound />,
        children: [
            {
                path: '/',
                element: <Landing />
            },
            {
                path: 'settings',
                element: <Settings />
            }
        ]
    },
    {
        path: 'login',
        element: <Login />
    },
    {
        path: 'unauthorized',
        element: <Unauthorized />
    },
    {
        path: 'feedback',
        element: <Feedback />
    }
])

return ( <RouterProvider router={router} /> )

• Here is the code used to call the Firebase auth:

const handleLogin = async () => {
    if ( !firebaseContext ) {
        console.error("No Firebase context provided")
        return
    }

    // Trigger Firebase login flow
    const user = await signInWithPopup(firebaseContext.auth, firebaseContext.authProvider)

    // Update session storage
    updateUserProfile(user, userContext.setProfile)

    // Navigate to main page         
    navigate("/")                                           
}

This is called when a user clicks a button:

<button onClick={handleLogin}>Log in</button>

• I'm using React Context to store the Firebase app initialization:

export type FirebaseContextType = {
    authProvider:GoogleAuthProvider,
    app:FirebaseApp,
    analytics:Analytics,
    auth:Auth,
    db:Firestore
}

// Firebase setup
const firebaseApp = initializeApp(firebaseConfig)
const firebaseContext:FirebaseContextType = {
    authProvider: new GoogleAuthProvider(),
    app: firebaseApp,
    analytics: getAnalytics(firebaseApp),
    auth: getAuth(firebaseApp),
    db: getFirestore(firebaseApp)
}

• I currently use env variables to set firebaseConfig. I've tried hardcoding this, but that didn't help

• I have two Firebase projects, a prod and staging version of the same app, which are connected to my Cloudflare domain. Prod is linked to my-custom-domain.app and staging is linked to staging.my-custom-domain.app. I'm wondering if having this setup is potentially causing issues.

• Updating the "rewrites" property in my firebase.json to make my app less aggressive in redirecting requests to index.html

• Test setup using just one environment (staging) and not the production environment

• Tried creating a new subdomain called auth.my-custom-domain.app and linking it to Firebase and adding it to the Google client ID auth

• I'm not seeing any error messages in the console when I click the pop-up. Some time after closing the popup, I do get the error FirebaseError: Firebase: Error (auth/popup-closed-by-user)