Limit SPA page access based on user group

Questions
1

Forgive me if this has been asked already but i cannot seem to find what i’m looking for.

I have created a React SPA that contains different pages; Home, Profile and Admin.

I’ve implemented a secure route to Profile and Admin, where everyone is able to access the profile page where it pulls the current user Info and displays it.

What i’m trying to do is block access to the admin page unless they’re assigned as admins in the directory. So once authenticated, if they click on the Admin page they’ll see some sort of access denied message if they’re not admins, and if they are then they’ll see a welcome admin message.

What do i need to do on OKTAS side to achieve this ? any documentation or help is greatly appreciated.

Thank you

2

You shouldn’t need to do anything on the Okta side to achieve this. It sounds like you need a conditional of some kind in your application code. You could use the Users API, get the users role and then display an error /prevent access if the logged in user doesn’t have the admin role.

3

Another option available is to use group membership information for the user, stored within a token claim, to capture the user’s role/permissions in your application. So, say, if user is NOT a member of the App-Admin group, they should not be able to access the admin route of the app.

This technique is a little more common with middleware libraries (see the following blog posts about Spring Security for reference: Spring Method Security with PreAuthorize | Okta Developer and Add Role-Based Access Control to Your App with Spring Security and Thymeleaf | Okta Developer), but should be doable as long as you can get this group membership information available within user’s token.