2

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

Roger Johansson
  • 22,764
  • 18
  • 97
  • 193

1 Answers1

3

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).

jmelberg
  • 381
  • 1
  • 4