Single Page App authZ based on group membership

[beeza650]

I’m (very) new to the Okta tech and wanted to check something before I get started.
If I want to restrict access to a component (page) of my Vue app so that it’s only accessible by members of a certain Okta group the correct pattern is to add ‘groups’ to the scopes of the OIDC provider for the SPA and then to parse the ID Token JWT to see if the group particular group is returned as a claim?
Does that sound about right please?

[mraible]

Yes. This is the approach I recommend.

[beeza650]

So I can call
https://dev-549097.okta.com/oauth2/default/v1/authorize?client_id=0oa23nwavwliKpeiH357&response_type=id_token&scope=openid&redirect_uri=http%3A%2F%2Flocalhost:8080/implicit/callback&state=myState&nonce=12345
and it works as expected but as soon as I add %20groups to the scope parameter I get
http://localhost:8080/implicit/callback#state=myState&error=invalid_scope&error_description=One+or+more+scopes+are+not+configured+for+the+authorization+server+resource.

I’ve configured the groups claims filter - I can’t see from the Okta documentation I’ve read that I’m missing anything.

Any ideads what the issue could be please?

Just to add - if I call https://dev-549097.okta.com/.well-known/openid-configuration then you can see groups listed as scope

[dragos]

Hi @beeza650

The configuration screen that you posted applies to Okta authorization server (eg. https://dev-549097.okta.com/oauth2/v1/authorize).

In order to use the groups claim in a custom authorization server, please navigate in your administrative panel to Security >> API (or start from API directly if using the developer interface) >> Authorization Servers >> default >> Claims and add the groups claim in order to be displayed in the id token.

[beeza650]

Thanks @dragos …some caching issues I think but we’re there now. groups is a claim in the ID token.