In Firebase Auth, using "Redirect Best Practices" prevents testing with localhost because it always uses HTTPS

[aryehsanders]

Operating System

Windows

Browser Version

Firefox 113

Firebase SDK Version

9.22.1

Firebase SDK Product:

Auth

Describe your project's tooling

Vue with Vite

Describe the problem

Following https://firebase.google.com/docs/auth/web/redirect-best-practices, it appears that our app should supply the current host as the authDomain. For development, we want to use localhost:3000. In bug #7233, it appeared that this should now support a value of localhost:3000, but when I tried it, it fails with an error because it tries to redirect to http*s*://localhost:3000/....

This appears to be because in packages/auth/src/core/util/handler.ts in getHandlerBase there is a hard-coded https in the URL, but localhost requires http.

Steps and code to reproduce issue

Use signInWithRedirect with an authDomain of localhost:3000. It will redirect to HTTPS.

[bhparijat]

Hi, could you try setting emulator flag to do testing with localhost and let us know if you still encounter the problem

[aryehsanders]

Thanks for responding; sorry I didn't notice sooner. This isn't a substitute for using our development code with real Firebase; now that some browsers have disabled third-party cookies, it has become difficult to be sure that our flows will work for real, and the hard-coded 'https:' in the client auth code prevents us from running a local test (with the local part acting as the developer's server) against the non-emulated real Firebase remote servers.

[aryehsanders]

Just to be thorough, I did test with the emulator anyway, and sure enough, it doesn't work for auth in Firefox because of the third-party cookie partitioning change that lead to the Redirect Best Practices document. It does work on Chrome, which has not yet limited third-party cookies, but that's not helpful for testing what will happen to our Firefox and Safari users.

[aryehsanders]

If code would make the issue clearer - a small patch (untested!) in handler.ts would fix this:
Instead of:

    return `https://${config.authDomain}/${WIDGET_PATH}`;

Replace with:

    const isLocalhost = config.authDomain.split(':')[0] === 'localhost';
    return  (isLocalhost ? 'http' : 'https') + `://${config.authDomain}/${WIDGET_PATH}`;