Permission error when accessing a cached firestore collection after logout/login

[bmcbarron]

Version info

React: 17.0.2

Firebase: 9.4.0

ReactFire: 4.2.0

Other (e.g. Node, browser, operating system) (if applicable): Chrome, Windows 10

Test case

Test cases seem challenging to produce since a firebase instance is involved.

Steps to reproduce

1. Sign In (I used GoogleAuthProvider), or be already signed-in.
2. Read from a collection.
3. Sign Out
4. Sign In
5. Read from the same collection.

Expected behavior

The same data is read.

Actual behavior

Uncaught FirebaseError: Missing or insufficient permissions. is thrown.

This seems to be caused by the global cache of collections. The problem can be mitigated by:

• Refreshing the page after sign out
• Changing the idField passed to useFirestoreCollectionData. Any easy way to test this is to use id-${auth.stsTokenManager.expirationTime} as your idField, since expirationTime changes on every Sign Out/In cycle.

Note that waiting more than 30 seconds does not fix the problem. So, the cache resetting of the collection is insufficient to resolve the issue. I suspect that the collection is associated with the stale auth token which has been disabled due to logout.

A possible resolution might be to purge the cache on sign out.

[kerrmarin]

I've also encountered this issue, thanks for pointing me in the right direction for a workaround @bmcbarron !

[webbertakken]

I stumbled upon that issue too, also thanks from my side!

Here's what the solution looks like in Reactfire 4.2.1

  const { data: user } = useUser();
  const firestore = useFirestore();
  const categoriesCollection = collection(firestore, Inventory.getCategoriesPath(user.uid));
  const categoriesQuery = query(categoriesCollection, orderBy('id', 'asc'));
  const { data: categories } = useFirestoreCollectionData(categoriesQuery, {
    // @ts-ignore
    idField: `id-${user.stsTokenManager.expirationTime}`,
  });

[schmidty1913]

Thanks that fixed the problem for me as well.

[jbaldassari]

I think this is the same issue as described in this discussion: https://github.com/FirebaseExtended/reactfire/discussions/228 . Another workaround, as mentioned here, is to clear the preloaded observables cache. I'm kind of leaning toward that workaround, although none of them seems particularly good.

FWIW I don't see this issue with Google auth, only with email/password. The difference may be that I'm using signInWithRedirect for Google, and I think that the redirect after login basically has the same effect as the page reload workaround, but there's no redirect with email/password login.