Long loading time of api.js in Safari using Firebase authentication

Operating System

Sonoma 14.4.1

Browser Version

Safari version 17.4.1

Firebase SDK Version

10.10.0

Firebase SDK Product:

Auth

Describe your project's tooling

React web app build using Vite, hosted with Simply

Describe the problem

I have a login page which uses firebase authentication for logging in with email and password and also setting the current user when logged in. It works perfectly fine in chromium based browsers but not in safari, where if the user havent been on the login page for some time, or they close their browser and opens the login page, the page will be blank for 3-4 minutes. Using dev tools and monitoring network, i can see that a request to api.js is loading for a long time with a reference to apis.google.com. Below is what it looks like before page is loaded in the request: GET /js/api.js Accept: / Referer: https://app.airplate.dk/ Sec-Fetch-Dest: script Sec-Fetch-Mode: no-cors Sec-Fetch-Site: cross-site User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.4.1 Safari/605.1.15

And this is what it looks like after, i have just inserted the text since its in danish else. First is request :method: GET :scheme: https :authority: apis.google.com :path: /js/api.js?onload=__iframefcb268872 Accept: / Sec-Fetch-Site: cross-site Sec-Fetch-Dest: script Accept-Language: da-DK,da;q=0.9 Sec-Fetch-Mode: no-cors Host: apis.google.com User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.4.1 Safari/605.1.15 Referer: https://app.airplate.dk/ Accept-Encoding: gzip, deflate, br Connection: keep-alive

Second is answer: :status: 200 Access-Control-Allow-Origin: Content-Type: text/javascript Content-Security-Policy: require-trusted-types-for 'script'; report-uri https://csp.withgoogle.com/csp/gapi-team Content-Encoding: gzip X-XSS-Protection: 0 Cross-Origin-Resource-Policy: cross-origin Report-To: {"group":"gapi-team","max_age":2592000,"endpoints":[{"url":"https://csp.withgoogle.com/csp/report-to/gapi-team"}]} Timing-Allow-Origin: Expires: Mon, 06 May 2024 13:05:10 GMT Cache-Control: private, max-age=1800, stale-while-revalidate=1800 Date: Mon, 06 May 2024 13:05:10 GMT Content-Length: 5908 Cross-Origin-Opener-Policy: same-origin; report-to="gapi-team" X-Content-Type-Options: nosniff Accept-Ranges: bytes Vary: Accept-Encoding ETag: "0203c9413fdc0e81" Alt-Svc: h3=":443"; ma=2592000,h3-29=":443"; ma=2592000 Server: sffe

What can might be the issue to a long loading time in Safari of this api file? I cant quite figure it out myself.

Steps and code to reproduce issue

Go to app.airplate.dk/login using Safari and open developer tab to see the network call loading for a extended period of time

Hi @woidthevoid, thank you for filing this issue. I'm currently unable to reproduce the behavior that you've mentioned. I tried signInWithEmailAndPassword() using the ff:

In the src/App.jsx:

const goSignInWithEmailAndPassword = async (e) => {
  const email = "user@abcd.com";
  const password = "111111";
  signInWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed in 
    const user = userCredential.user;
    console.log(user);
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    console.log(error);
  });
}

function App() {

  return (
    <>
      <div>
      <button onClick={goSignInWithEmailAndPassword}>Sign-In User</button>
      </div>
    </>
  )
}

export default App;

To get a better understanding of what’s causing the long load time of api.js, could you provide the following:

Code snippets of the functions you’re trying to run
Latest HAR file generated by the browser
Additional details on your project’s setup

Could you also try reproducing the behavior in your localhost or Firebase Hosting to narrow down the possible cause.

This is the related code snippets that uses firebase functions:

useEffect(() => {
    async function authenticate() {
      onAuthStateChanged(FIREBASE_AUTH, (user) => {
        if (user) {
          if (location.state && 'imei' in location.state) {
            createAirplate(user.uid);
          } else {
            navigate('/');
          }
        } else {
          setLoading(false);
        }
      });
    }
    authenticate();
  }, []);

  const handleSubmit = async (event: FormEvent) => {
    event.preventDefault();
    setErrorMessage('');
    try {
      await signInWithEmailAndPassword(FIREBASE_AUTH, username, password);
    } catch (e: any) {
      console.log(e.code);
      if (e.code === 'auth/invalid-credential') {
        setErrorMessage('Incorrect email or password');
      } else if (e.code) {
        setErrorMessage(e.code);
      } else if (e.message) {
        setErrorMessage(e.message);
      } else {
        setErrorMessage('Something went wrong. Please try again');
      }
    }
  };

It doesnt seem like Github allows me to upload a HAR file here when i try to do it.

My project is, as said, made in React with Vite, with a Node.js backend. The build version is hosted through simply.com, if that matters. Ive noticed that i have no issues when i try to access the page if i share my internet to my computer from my phone. Its just on the wifi. The issue is still there though wherever i use a localhost or the website itself when i use wifi.

This is the related code snippets that uses firebase functions:
useEffect(() => {
    async function authenticate() {
      onAuthStateChanged(FIREBASE_AUTH, (user) => {
        if (user) {
          if (location.state && 'imei' in location.state) {
            createAirplate(user.uid);
          } else {
            navigate('/');
          }
        } else {
          setLoading(false);
        }
      });
    }
    authenticate();
  }, []);
  const handleSubmit = async (event: FormEvent) => {
    event.preventDefault();
    setErrorMessage('');
    try {
      await signInWithEmailAndPassword(FIREBASE_AUTH, username, password);
    } catch (e: any) {
      console.log(e.code);
      if (e.code === 'auth/invalid-credential') {
        setErrorMessage('Incorrect email or password');
      } else if (e.code) {
        setErrorMessage(e.code);
      } else if (e.message) {
        setErrorMessage(e.message);
      } else {
        setErrorMessage('Something went wrong. Please try again');
      }
    }
  };
It doesnt seem like Github allows me to upload a HAR file here when i try to do it.

My project is, as said, made in React with Vite, with a Node.js backend. The build version is hosted through simply.com, if that matters. Ive noticed that i have no issues when i try to access the page if i share my internet to my computer from my phone. Its just on the wifi. The issue is still there though wherever i use a localhost or the website itself when i use wifi.

Hi @woidthevoid, I've tried reproducing this but have not been able to.

When you 'share' the internet to your computer from your phone, what do you mean exactly? Are you connecting to a personal hotspot on your phone? If the issue is only reproducible with your WiFi, could you provide any other information that would help me reproduce the error to help identify a solution?

Hey @woidthevoid. We need more information to resolve this issue but there hasn't been an update in 5 weekdays. I'm marking the issue as stale and if there are no new updates in the next 5 days I will close it automatically.

If you have more information that will help us get to the bottom of this, just add a comment!

firebase / firebase-js-sdk