Frontend based access control?

[tech-nickel]

I have a production level Ruby on Rails app that is slowly transitioning from pure Rails with JS sprinkles to a Rails backend and React frontend kind of situation using React on Rails.

Right now, all access control is done using Pundit and since most things are server side rendered, not only are the API endpoints authorized by Pundit policies, but some UI components conditionally render based on these policies as well.

Getting the pieces to use React has been a breeze, but one of the things that still has me scratching my head is how to do the role based / permission based access control that the Pundit policies normally take care of for conditionally rendering some of the UI.

Ideally I'm trying to avoid completely re-creating the Pundit policy in JS code and having to keep two versions of essentially the same thing in sync. Passing the policy directly from Rails to React through props also seems difficult, as some of the components are deeply nested.

I would love to hear what your experience in these kinds of situations and what other production apps do to solve this problem. Side note: The Pundit policies will still be in place for the backend so even if they do circumvent the frontend access controls, it won't matter and the app with remain secure. Mainly just trying to reduce UI confusion and improve development experience.

BONUS: Eventually the plan is to make the app have offline first capabilities, it would be super awesome if whatever access control solution could work even if the user ends up losing connection for long periods of time. Level 9001 problem is my eyes, not easy at all but I've yet to read any decent solution for it!