Front end architecture guidance

Discussions
1

I’ve spent a lot of time working on backend systems (PostgreSQL, Django, Python) but more recently have been working on a full stack Supabase/Nextjs app (google/supabase auth).

I’m using the Supabase SSR stuff so that data access/validation is all happening on the server. I’m also using the custom_access_token_hook in Supabase to additional user info (app role, config etc) into the JWT token used for authentication.

In my current design, I have a sidebar and menu bar that should change as a user’s app role or other user config changes. However, with the 1 hour default expiry in the access token in the JWT, the sidebar/navbars will often show an obsolete rendering relative to the user’s current app role/config. I generally understand why this is happening and as an interim solution am relying more on getUser() rather than getClaims() to check the DB rather than the JWT token for the user’s current app role and config. This isn’t a data security issue as any data ops are always validated on the server; this is a usability issue as the UI doesn’t always reflect what the backend will ultimately allow a user to do.

My question is whether there’s a better approach? Are there good architecture guides someone can point me to? Should I be trying to figure out a UI design that doesn’t vary with user role/config? Should I be using realtime messaging to let the client know that the user’s JWT has obsolete data and needs to be refreshed (and should I use websockets, supabase realtime, …)? Or, is there some other better standard way to approach this sort of thing?

4

Hi, @cpnet!

If I’m understanding correctly: you’re trying to find a way to keep the UI updated when roles change?

I.e. you have a UI that shows or hides things based on a user’s role. But their role lives in a JWT, and the JWT does not magically update by itself after login. So if roles change in the database while the user is still on the page, the UI might not reflect the new role until the token expires or refreshes.

1) Client side fixes

These are things you can do in the browser.

Periodic token refresh
You pull fresh user info every X minutes or when the user does something (like click). This forces the app to always have the newest data.

Realtime
Supabase has a thing called Realtime that can notify the client whenever something in the database changes. So when a user’s role changes, your frontend gets an event and can immediately update the UI.

Optimistic UI
If the user triggers their own role change through the UI, you can just update the UI immediately without waiting for the backend. This makes it feel instant.

2) Server side approach

Use server side calls to get the current user data. This is more reliable, because it fetches the current truth from the backend. You can cache it so it is not slow.

3) Hybrid

Use JWT claims for simple UI changes that do not really matter, and fetch fresh data from the server for more important role-based decisions.

I hope that helps!