I'm using Okta for user authentication of my SPA (+ Express backend).
How can I use the Okta API to show/hide content based on group membership?
e.g. if I want to show some menu items if the active user is a member of a specific group.
Is there anything in the Okta React SDK?
I'm coming up short, product seems great, docs seems less so.
I've found this API https://developer.okta.com/docs/api/resources/users.html#get-member-groups
I'm however unsure of how to best use this from my app. when and where should I call it, should I store group membership in some object and then pass that to all my sub components?
Any ideas and directions are welcome
By specifying the groups scope, you can return a list of active groups the user is assigned to. In your React app, use @okta/okta-react to overload the default params by passing the following into Security:
<Security issuer={config.issuer}
client_id={config.client_id}
redirect_uri={window.location.origin + '/implicit/callback'}
scope={['openid', 'email', 'profile', 'groups']}
onAuthRequired={({history}) => history.push('/login')} >
Sample code taken from the React Quickstart.
Next, use the getUser() method to return the full user object from the userInfo API.
this.props.auth.getUser().then(profile => {
const groups = profile.groups;
// Do your show/hide logic here
});
This requires extra configuration in your Okta OpenID Connect app to accept groups as a scope. More info on that here (Creating Token with Groups) and here (Okta Answers).
