useFirestoreDocData creates 'Uncaught FirebaseError: Missing or insufficient permissions' vs useFirestoreDocDataOnce

[16oh4]

Version info

React:
"react": "^0.0.0-experimental-235a6c4af",
"react-dom": "^0.0.0-experimental-235a6c4af",

Firebase: 7.8.2

ReactFire: ^2.01

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

Browser:
Google Chrome | 80.0.3987.132 (Official Build) (64-bit) (cohort: 80_Win_132)
Revision | fcea73228632975e052eb90fcf6cd1752d3b42b4-refs/branch-heads/3987@{#974}
OS | Windows 10 OS Version 1903 (Build 18362.267)
JavaScript | V8 8.0.426.26

Test case

Steps to reproduce

I have a protected route in App.js using Suspense and AuthCheck

<App>
<BrowserRouter>
<Suspense fallback={<p>Loading</p>}>
                  <AuthCheck 
                    fallback={<p>Please login</p>}
                  >
                    <Route exact path="/home">
                        <Home/>
                    </Route>    
                  </AuthCheck>
                </Suspense> 
</BrowserRouter>
</App> 

When the user logs in, by clicking a button, the handler executes the following:

auth.signInWithEmailAndPassword(email, password)
        .then(userCredential => {
            //TODO FIX REDIRECT TO HOME
            // console.log(JSON.stringify(userCredential));
            history.push('/home')
        })

Using "react-router-dom": "^5.1.2", history.push('/home') redirects to the Protected route upon the userCredential promise.

In the Home component, I am merely listening to a document based on the user's uid and displaying the results on screen. I have tried defining startsWithValue options to no avail (for the userDocData)

const user = useUser();

    const userDocRef = useFirestore().collection('users').doc(user.uid);
    const userDocData = useFirestoreDocData(userDocRef);

For further information, I have a firestore security rule to allow only authenticated reads on the user document:

match /users/{document} {
      allow read: if (request.auth.uid != null); // Allow logged in users to see data

Expected behavior

The user is redirected to the Home page and the document data is loaded with no issues.

Actual behavior

Upon clicking login in the Login page, the user is redirected to a white screen with the following console error:

Chrome javascript Console

Uncaught FirebaseError: Missing or insufficient permissions.
    at new FirestoreError (http://localhost:3000/static/js/2.chunk.js:419:24)
    at JsonProtoSerializer.fromRpcStatus (http://localhost:3000/static/js/2.chunk.js:18823:12)
    at JsonProtoSerializer.fromWatchChange (http://localhost:3000/static/js/2.chunk.js:19376:38)
    at PersistentListenStream.onMessage (http://localhost:3000/static/js/2.chunk.js:15347:39)
    at http://localhost:3000/static/js/2.chunk.js:15258:22
    at http://localhost:3000/static/js/2.chunk.js:15308:18
    at http://localhost:3000/static/js/2.chunk.js:2012:14

Workarounds:
What is peculiar here is that using useFirestoreDocDataOnce effectively removes the error
Rewriting the firestore rule to allow read: if true also removes the error.

[jhuleatt]

@16oh4 this will be a tough one to diagnose without a more complete sample. Any chance you can create a minimal version of your app in StackBlitz or CodeSandbox so that we can see the full app code needed to reproduce the problem?

[16oh4]

@16oh4 this will be a tough one to diagnose without a more complete sample. Any chance you can create a minimal version of your app in StackBlitz or CodeSandbox so that we can see the full app code needed to reproduce the problem?

I apologize but I am working on an enterprise application.

This error is caused in every file I try to use it in. I've noticed the error only happens with listener functions like useFirestoreDocData and useFirestoreCollectionData, but using useFirestoreDocDataOnce and useFirestoreCollectionDataOnce both work under the same conditions.

The error only occurs when navigating to the page using history.push (PAGE LINK HERE) provided by React Router. When refreshing the page with the useFirestoreCollectionData or DocData call, there are no errors.

[montasaurus]

@jhuleatt I am having a similar issue, there seems to be an issue making a firestore request that requires authentication immediately after signing in. Seems like the token isn't getting sent the first time. If you reload the page after signing in, it works fine.

I made a sample that exhibits it. The repo is here: https://github.com/howitzer-industries/reactfire-auth . Here's a link to a code sandbox: https://codesandbox.io/s/wizardly-wing-s5eme . You can use +1 555 555 5555 as the phone number and 123456 as the code. To recreate it, sign in and then it should error saying "missing or insufficient permissions". If you reload, it will work fine. You can sign out again and see it happen again when you sign back in. It errors right after sign in ~70% of the time, in my testing.

[montasaurus]

Digging into it further, seems like the react-firebaseui callbacks aren't firing either. Maybe it's getting unloaded by AuthCheck before firing or it doesn't play nice with async rendering? Going to switch back to plain firebase, but would be curious to hear if anyone figures out what the issue is.

[mrmckeb]

I can confirm this happens on the second sign-in of any account - but doesn't happen if you sign in with a different account.

Sign-in User A > Sign Out > Sign-in User B > Sign Out > Sign-in User A > Error

@jhuleatt I can share my code with you too if you'd like?

[mrmckeb]

I actually think this may be related to #256.

Locally, I added preloadedObservables.delete(observableId) in the cleanup function of useObservable and this stopped the error... although I'm not saying that this is the fix.

reactfire/reactfire/useObservable/index.ts

Line 44 in 68cfc79

return () => subscription.unsubscribe();

[nelreina]

I have similar issue with sign-out as @mrmckeb the difference is I get this error with the same user. To prevent this error users needs to refresh their browser. The other thing is I am not using the useObservable hook neither. Just useFirestoreCollectionData and the Authcheck component.

The only workaround I found in our case is when the user sign's out they need to refresh their browser before sign-in back if they did not close the Tab. In al other cases this works fine.

Our app was build without using reactfire by creating our own hooks to handle firebase and firestore. By implementing this reactfire library our code is more elegant and scalable.

It seems like when the user sign's-out it does not cleanup everything, and when the user sign-in again without refreshing the browser the old token or session is still in memory.

[mrmckeb]

@nelreina the useObservable hook is also used inside of useFirestoreCollectionData which is why you hit this.

I found a very temporary workaround, which might help you. I run it after logout.

export const clearFirestoreCache = () => {
  const map = globalThis['_reactFirePreloadedObservables'];
  Array.from(map.keys()).forEach(
    (key) => key.includes('firestore') && map.delete(key),
  );
};

It may cause more problems for you though, depending on how your app is built - but for me, it works as logged out users don't see anything from the database.

[stargazingdave]

Worked for me too. Saved me, TNX!

[nelreina]

@mrmckeb Yes it works !! Many thanks. I added this code to my template with a big TODO for future cleanup if needed. Again many many thanks

[jhuleatt]

Thanks for the repros and additional information!

AuthCheck only renders children when a user object is returned from useUser, so I thought useUser might be the culprit, but after taking a look it seems to be working correctly. I'm wondering if a Firestore query (cached in the _reactFirePreloadedObservables cache) initiated by one user can't be continued by another user. Maybe ReactFire needs to wipe out the cache (or at least parts of it) on auth state changes, similar to @mrmckeb's workaround.

I wasn't able to dig into this any more today, but I'll take another look tomorrow!

[jhuleatt]

Thoughts from @jamesdaniels : maybe we handle permission denied errors as a special case, if we encounter, clear the current value out of the cache and retry once

Or we can look into subscribing to Auth state on a deeper level

[mrmckeb]

Interesting @jhuleatt - I guess the other case that would need to be handled there is when you you might expect permission denied? However, I think most applications would be developed in a way where that shouldn't be an issue.

[jhuleatt]

Agreed, we still need to surface permission denied when it is accurate.

I'm also wondering if this issue might be related to #249

[andria-dev]

Is this going to be fixed soon? I'm planning on trying @mrmckeb's workaround for now.

[hubgit]

we still need to surface permission denied when it is accurate.

Is there an issue open for this, in general? It was a bit surprising to get an Uncaught FirebaseError when accessing a document without permission.

[thammerl]

I also faced this issue today. Created this minimal demo using the firebase emulators before I found this discussion. Maybe it can help to further analyze the problem cause:

https://github.com/SemanticlabsGmbH/reactfire-missing-privileges-demo
https://reactfire-missing-privileges.web.app/

[ItayElgazar]

Any news on this one?

[andria-dev]

Probably not. For my project, I just migrated away from this library to using the actual Firebase API and writing my own hooks when I need them. This also allowed me to write all my hooks with support for Suspense.

[bookchris]

Is the source available for this by any chance? I found it difficult to do custom firebase hooks + suspense.

[n-sviridenko]

Up

[epodol]

I am also having this problem. Here is my code:

  const featuredBooksRef = useFirestore()
    .collection('books')
    .where('featured', '==', true);
  const featured = useFirestoreCollectionData(featuredBooksRef, {
    idField: 'id',
  }).data;

When signing out, then signing back in, this will always result in this error: FirebaseError: Missing or insufficient permissions.

@thammerl created a good example to show this: #228 (comment)

https://github.com/SemanticlabsGmbH/reactfire-missing-privileges-demo
https://reactfire-missing-privileges.web.app/

Here is my current solution:

                        auth.signOut().then(() => {
                          history.push('.');
                          window.location.reload();
                        });

This works, but is not ideal.

Can we please convert this to an issue @jhuleatt?
Thank you

[AlbertSanIza]

This worked like a charm for me... and since my app is really small, cant really notice reload.

[rafaelsilva81]

This worked for me! Thank you

[thiagokassabian]

this isn't an elegant solution but it works.

[darlanRaimundo]

this works to me, but with one change
history.pushState('.', '')

[jbaldassari]

I recently came across this discussion while trying to figure out the origin of this mysterious "Missing or insufficient permissions error." Thanks to everyone who has posted the helpful workarounds! I wanted to share a slight variation on the cache clearing workaround for TypeScript users in case it saves anyone else a couple of minutes of type wrangling:

    const reactFirePreloadedObservables = (globalThis as Record<string, unknown>)['_reactFirePreloadedObservables'] as
      | Map<string, unknown>
      | undefined;
    if (reactFirePreloadedObservables) {
      Array.from(reactFirePreloadedObservables.keys())
        .filter((key) => key.includes('firestore'))
        .forEach((key) =>
          reactFirePreloadedObservables.delete(key)
        );
    }

I also came across this issue which sounds like the same problem: #485

I'm kind of surprised this bug has been around for so long. Doesn't this affect every reactfire user? If not, I wonder what is different about the way we're using reactfire that triggers it...

[gungle96]

Hi I am facing this exact issue using signInAnonymously(auth). I have tried the cache clearing technique within useObservable.ts within the react firepackage. I am struggling as most of these solutions are leveraging the signout() function, I am not calling this. The white blank screen appears when a user loads the app for the FIRST time, and subsequent requests are then valid. So it seems to me that there is a race condition with signing in and the useFirestoreCollectionData hook being called. Any help would be greatly appreciated. Cheers.

[toppsdown]

Been banging our heads against this issue for the past few hours. Any updates?

[gungle96]

Yep, the solution I found was to use useSigninCheck from reactfire and wait for the signedIn status == true.

[bookchris]

This did not work for me. The above "clearing cache" solutions worked, but this seems pretty broken.

[jbaldassari]

I just found another scenario in which this bug causes problems. When your Firebase app is open in multiple tabs with the same login session you might have a scenario like the following:

1. The user is logged into the app, and 2 tabs are open with a shared auth session
2. The user logs out of your app from Tab 1. Tab 2 is now also logged out since its shared auth session is no longer active. Both tabs may now be showing the login screen for example.
3. The user logs back in via the first tab. Once the login is complete in Tab 1, Tab 2 should also be logged back in. Both tabs should now be rendering a private route that displays data from firestore.
4. One or both of the tabs will blow up with the "Missing or insufficient permissions" error

The good news is that the same "clear cache" strategy works here as well. In my case I just had to move where the cache clearing happens. Previously I was only clearing cache when the user clicked the login button, but in the case of the 2nd tab where it passively becomes logged in without user interaction, that wasn't sufficient. Instead I now clear cache in my app's component that initializes firestore so that the cache will be cleared before any child components render that might actually fetch a firestore document.

If it's not possible to fix the underlying issue, it would be nice if reactfire could at least automatically clear the cache when the login state changes.

[jbaldassari]

Actually I spoke too soon. I thought the multi-tab issue was fixed, but I eventually started getting the FirebaseError: [code=permission-denied]: Missing or insufficient permissions. errors again. Has anyone else had issues with multiple tabs? It seems to be some kind of race condition where logging in from one tab causes one or both tabs to hit the permission denied error. I might start a separate discussion on that as it seems related, but the workaround must be different.

[jbaldassari]

#574

[enesien]

This seems to be working well using @mrmckeb's clearFirestoreCache(), although again...not ideal.

_app.ts

useEffect(() => {
  const unsub = auth.beforeAuthStateChanged((user) => {
    if (!user) {
      clearFirestoreCache();
    }
  });
  return () => unsub();
}, []);