How to Filter Links in MUI Drawer within layout.tsx by User roles

[nocturne zealot]

I have a MUI AppBar and a Drawer in my layout.tsx. There are various Links within the Drawer. Each link should be shown, or not, based on the user roles.

The user roles are stored within my Firestore DB. I have access to the Firebase User, but the roles are not on that entity, they are stored by ID within my Firestore.

So, I need to be able to take my Firebase user, look up my Firestore user roles, and then filter the Links in the Drawer based on those roles.

This would all be really easy if I could use useEffect hook within the layout.tsx file, but that is not allowed. Interestingly useState hook seems to work just fine within the layout.tsx (I've set 'use client' on it).

How are others making state information available, and async updated states bound to items within layout.tsx?

[rapid edge]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[nocturne zealot]

I tried creating a "ProtectedLink" component that made the call to Firestore for the roles, but the useEffect in there was still within the context of the layout.tsx and through the runtime error.

[nocturne zealot]

Alright, I think I figured out what my real issue was. I was calling a firestore hook (useCollectionOnce) from within a useEffect. That's a no-no.

If fixed this by waiting for the rerender by protecting the useCollectionOnce with the loading from the useAuthState.

Anyhow, solved.