*oktaHasAnyGroup and this._oktaStateService.hasAnyGroups return 401

[jnowlin]

Implemented okta auth via signin widget in angular 17 app. Signin works well and from the this._oktaStateService.authState$ I can see isAuthenticated: true and “Groups”: [ “Everyone”, “readOnly” ].

But <li *oktaHasAnyGroup="['admin']" and this._oktaStateService.hasAnyGroups['canEdit'] generates a 401 error.

In the response headers I see

www-authenticate
	Bearer authorization_uri="http://dev-02808097.okta.com/oauth2/v1/authorize", realm="http://dev-02808097.okta.com", scope="openid", error="invalid_token", error_description="The access token is invalid.", resource="/oauth2/default/v1/userinfo"

The authorization_uri is missing the default. I have the following in app.module.ts

const oktaAuth = new OktaAuth({
  issuer: 'https://dev-02808097.okta.com/oauth2/default',
  clientId: 'xxx',
  redirectUri: window.location.origin + '/login/callback',
  authorizeUrl: 'https://dev-02808097.okta.com/oauth2/default/v1/authorize',
});

So I am not sure where to proceed from here. I could pick apart the authstate$ to look for groups but it would be better if the hasAnyGroup functions did not get a 401.

This appears to be very similar to 401 on /userinfo but not really.

[jnowlin]

Problem appears resolved. When I added groups to the claims, I named it ‘Groups’. After following in debug your js code I changed it to ‘groups’. No more 401s. Pretty subtle.

[alisaduncan]

Hey @jnowlin !

Welcome to the community!

I’m glad you got it working and thanks for posting your resolution. I agree, it is pretty subtle. I’ll make a PR change to update the docs. You’re also welcome to do so if you’d like-we take community contributions to our SDKs.

Let us know if you run into any more trouble.

Happy coding!