Auth not working properly in Safari: AbortError in indexeddb.ts

[vthommeret]

Operating System

macOS 14.2

Browser Version

Safari 17.2

Firebase SDK Version

10.7.1

Firebase SDK Product:

Auth

Describe your project's tooling

Next.JS 14.0.4

Describe the problem

I'm running into an issue where neither authStateReady nor onAuthStateChanged is working consistently in Safari (i.e. 90% of the time authStateReady never resolves or onAuthStateChanged isn't called). It's a challenging bug because:

1. It only seems to happen in production
2. It doesn't occur in private browsing
3. It doesn't occur in Chrome
4. Sometimes I get an AbortError which calls out specific IndexedDB issues.
5. Sometimes I don't, but it still doesn't work.

I was able to track down when one of the errors occurred:

"Firebase: Error thrown when reading from IndexedDB. Original error: Error looking up record in object store by key range. (app/idb-get).
Unhandled Promise Rejection: AbortError: AbortError

I set a breakpoint and it appears that the error is coming from line 68 in indexeddb.ts:

https://github.com/firebase/firebase-js-sdk/blob/f854abe5b9be5fa2edf0df9bea971e1cbf9a3746/packages/app/src/indexeddb.ts#L68C29-L68C29

One thing I've noticed is that in tabs where the page isn't working, if I look at IndexedDB there's no data in firebase-heartbeat-storage or firebaseLocalStorageDb but on the pages where it is working, there is data.

I have a theory that there's a bug / some interaction with Safari's IndexedDB support, but I'm not sure what exactly. As you can imagine this bug is somewhat a showstopper since users can't log in :-)

Steps and code to reproduce issue

This is what I have for a minimal repro:

useEffect(() => {
  // Initialize Firebase
  initializeApp(firebaseConfig)

  const auth = getAuth();

  (async () => {
    console.log('calling authStateReady')
    try {
      await auth.authStateReady()
    } catch (error) {
      console.log('Unable to call authStateReady', error)
    }
    console.log('called authStateReady')
    setUser(auth.currentUser)
  })()

}, [])

When auth works, called authStateReady is called, otherwise not. I have a live demo here: https://repro.easiestcourses.com/minimal

If it says User: pending then the bug is present. If it switched to User: signed out then it's working as expected. As I mentioned earlier, one challenging thing is that this doesn't happen consistently so that page may or may not work in Safari if you load it.

[vthommeret]

I was looking through some old issues and it seems very similar to #6871 and #7272

Is it possible that a non-critical error for platform logging is is causing authentication to fail? cc @hsubox76 @dwyfrequency

[looptheloop88]

Thanks for bringing this issue to our attention @vthommeret. Let me check with the team if this issue is also related to #7829.

[hsubox76]

"Firebase: Error thrown when reading from IndexedDB. Original error: Error looking up record in object store by key range. (app/idb-get).
Unhandled Promise Rejection: AbortError: AbortError

Is this a warning or an error? Are they both in the same log or are these two separate logs? I'm asking because the line of code you're referring to should result in a console.warn as it's wrapped in a try/catch that does that, and the message should look like the first line (see line 81 in your link). Is the second line part of that warning string or is it a separate thrown error?

[vthommeret]

Hi @hsubox76, thanks for the reply! They are two separate logs. I'm no longer seeing the error so it's possible it was a separate issue. I'm going to close this issue for now and will reopen if it reoccurs and I can get additional detail. Thanks!