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

bmcbarron commented 2 years ago

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

Sign In (I used GoogleAuthProvider), or be already signed-in.
Read from a collection.
Sign Out
Sign In
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 commented 2 years ago

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

webbertakken commented 2 years ago

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 commented 2 years ago

Thanks that fixed the problem for me as well.

jbaldassari commented 2 years ago

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.

FirebaseExtended / reactfire