[React] Login with signInWithRedirect does not work with option 4

[sumitsahoo]

Operating System

macOS 15.0.1

Environment (if applicable)

Chrome 130, Edge 130, Firefox,

Firebase SDK Version

10.14.1 & 11.0.1

Firebase SDK Product(s)

Auth

Project Tooling

React app with webpack

Detailed Problem Description

As per the Firebase documentation on self hosted helper files for signInWithRedirect, we have added the files to proper directories i.e. /__/auth/ and /__/firebase/ as seen below. We have added to the public directory as a build process is involved for the React app.

For the deployed version to work and fix files being downloaded without being processed we have to update nginx config.

But it never works, the redirect does happen but the result inside getRedirectResult is always null

// Handle redirect and get user details
    const getUserDetails = async () => {
      try {
        const userCred = await getRedirectResult(auth);
        console.log("userCred", userCred);
      }
      catch (error) {
        console.log("error", error);
      }
    };

To test it locally we used mkcert to enable HTTPS but still, the result was the same. Steps to enable HTTPS are below:

1. Install mkcert

npm install -g mkcert

2. Create CA

mkcert create-ca

3. Create Cert

mkcert create-cert

4. Install the certificate and trust it in the system (macOS & Windows)
5. Update the run script in package.json

HTTPS=true SSL_CRT_FILE=cert.crt SSL_KEY_FILE=cert.key react-scripts start

To make the redirect work, we had to rename handler to handler.html and iframe to iframe.html. However, there are no clear instructions on how to test this login locally from Firebase, which I find disappointing.

With these also the result is the same. This is such a big issue and I want to know why there is no traction on this from Firebase. This is a dealbreaker for the Enterprise use case. Related issue: #8329

Steps and code to reproduce issue

Below is the code for initiating the signInWithRedirect

const auth = getAuth(app);
const result = await signInWithRedirect(auth, provider);

And in App.js we are observing the redirect response

// Handle redirect and get user details
    const getUserDetails = async () => {
      try {
        const userCred = await getRedirectResult(auth);
        console.log("userCred", userCred);
      }
      catch (error) {
        console.log("error", error);
      }
    };

The result is always null.

[google-oss-bot]

I couldn't figure out how to label this issue, so I've labeled it for a human to triage. Hang tight.

[jbalidiong]

Hi @sumitsahoo, thank you for reaching out to us and apologies for the delayed response. Upon checking, we would be needing additional information to check if you've properly implemented the Option 4:

Using the self host helper code step, could you share the link of the following:

<your-domain>/__/auth/handler
<your-domain>/__/auth/handler.js
<your-domain>/__/auth/experiments.js
<your-domain>/__/auth/iframe
<your-domain>/__/auth/iframe.js
<your-domain>/__/firebase/init.json 

We would like to check if the contents in those files are the same as your https://<project>.firebaseapp.com/__/auth/handler, etc. Also make sure that you've done step 3 update authorized redirect_uri and your authDomain.

Please file a ticket via our support channel and provide the needed information to help us further investigate the issue. You can also include this Github issue link for reference.

We are currently tracking this internally in b/375588284.

[sumitsahoo]

@jbalidiong Sure I will share the details in the support ticket. I had created one from GCP but it got closed.

[sumitsahoo]

@jbalidiong I forgot to mention that firebase/init.json is not downloadable from https://<project>.firebaseapp.com/__/firebase/init.json since they do not exist. We had to create it manually and give below details:

{
    "apiKey": "<key>",
    "authDomain": "<custom_domain>"
}

The documentation needs to be updated since the file is no longer maintained at app url.