NextJS - show/hide component in front end based on permission

I’m using the @auth0/nextjs-auth0 package in a regular web application, so the access token with permissions to call my api is only on the server I think.

I need to customise some of the UI in a component based on the permissions, for example if the logged in user has permission, “users.write” then I want to show a button for them to update. If they do not have the permission then they should still be able to see the page, but not the button. (The api will block the requests if the user doesn’t have permission, but it’s not a great UX to have a button that you can’t use)

What’s the best/recommended way to do this? I’d have thought it would be a fairly common requirement to customise the UI based on a user’s permissions but couldn’t find anything on how to do so in this scenario.



Hi @NeilNeo, Did you managed to find a way for this. Even I’ve the same requirement and looking for a solution but unable to find one. It will be a great help if you can share your experience here.