Problem when find user groups in Angular

Hello.

I want to validate if a user belongs to a specific group. I’m writing in Angular 8 the next code:

this.user = await this.okta.getUser();
    const result = this.user.groups.find((group) => group === 'ContactAdmin');
    if (result) {
        return true;
    } else {
        alert('User is not authorized to perform this operation');
        return false; 
}

Part of the data in the payload of the token is the next:
“scp”: [
“openid”
],
“sub”: “jhon@trial.com”,
“groups”: [
“Everyone”,
“ContactAdmin”
]

But i am getting the next error in the console:

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'find' of undefined
TypeError: Cannot read property 'find' of undefined (admin.guard.ts:22) 

The line 22 is exactly the following::

const result = this.user.groups.find((group) => group === 'ContactAdmin');

Part of the package.json is the following:
“dependencies”: {
@angular/animations”: “~8.2.13”,
@angular/cdk”: “~8.2.3”,
@angular/common”: “~8.2.13”,
@angular/compiler”: “~8.2.13”,
@angular/core”: “~8.2.13”,
@angular/forms”: “~8.2.13”,
@angular/material”: “^8.2.3”,
@angular/platform-browser”: “~8.2.13”,
@angular/platform-browser-dynamic”: “~8.2.13”,
@angular/router”: “~8.2.13”,
@okta/okta-angular”: “^1.4.0”,
@okta/okta-auth-js”: “^2.10.1”,
@oktadev/schematics”: “^1.0.1”,
“hammerjs”: “^2.0.8”,
“rxjs”: “~6.4.0”,
“tslib”: “^1.10.0”,
“zone.js”: “~0.9.1”
},
“devDependencies”: {
@angular-devkit/build-angular”: “~0.803.18”,
@angular/cli”: “~8.3.18”,
@angular/compiler-cli”: “~8.2.13”,
@angular/language-service”: “~8.2.13”,
@types/node”: “~8.9.4”,
@types/jasmine”: “~3.3.8”,
@types/jasminewd2”: “~2.0.3”,
“codelyzer”: “^5.0.0”,
“jasmine-core”: “~3.4.0”,
“jasmine-spec-reporter”: “~4.2.1”,
“karma”: “~4.1.0”,
“karma-chrome-launcher”: “~2.2.0”,
“karma-coverage-istanbul-reporter”: “~2.0.1”,
“karma-jasmine”: “~2.0.1”,
“karma-jasmine-html-reporter”: “^1.4.0”,
“protractor”: “~5.4.0”,
“ts-node”: “~7.0.0”,
“tslint”: “~5.15.0”,
“typescript”: “~3.5.3”
}

How can i fix this?
If the problem is because of libraries version. ¿How can i update them?, ¿What version should they be?

Thanks.

The cause is that this.oktaAuth.getUser() for some reason returns undefined.
To get more data about the reason, i have printed in the console the AccessToken and the IdToken of the user just before to call getUser() method. The results in the payload part (decoded in jwt.io) were the following (some values have been edited for security):

IdToken:
{
“sub”: “0000000000000000”,
“ver”: 1,
“iss”: “https://dev-xxxxxx.okta.com/oauth2/default”,
“aud”: “xxxxxxxxxxxx”,
“iat”: 1588721882,
“exp”: 1588725482,
“jti”: “ID.erQIsnJUmAwxYcY71C2fGTuVelJqNiE02R1WmAQ6MNU”,
“amr”: [
“pwd”
],
“idp”: “kkkkkkkkkkkkkkk”,
“nonce”: “d0NlBxbeCuMa4lNTXAjzO82bfCniPk6ODLw7GEMeJvSzchWOoQO3CDQ3CKvkcqWc”,
“auth_time”: 1588717952,
“at_hash”: “pQU7VoaxOFTFk3WR2of5NQ”
}

AccessToken:
{
“ver”: 1,
“jti”: “AT.UKiVqAVDyjRHAQG1kbT2lyDCShuo898GkvGkheYchio”,
“iss”: “https://dev-xxxxxx.okta.com/oauth2/default”,
“aud”: “api://default”,
“iat”: 1588721881,
“exp”: 1588725481,
“cid”: “xxxxxxxxxxxx”,
“uid”: “wwwwwwwwwwwwww”,
“scp”: [
“openid”
],
“sub”: “jhon@trial.com”,
“groups”: [
“Everyone”,
“ContactAdmin”
]
}

This give you some clue about how to solve?

Make sure you have profile in your scopes in your Angular config.

I am facing same issue . Can you please share the solution

even after adding profile
group is not coming

Did you add a “groups” claim to your authorization server? You need to add it to the ID token in my experience. https://developer.okta.com/docs/guides/customize-tokens-groups-claim/add-groups-claim-org-as/

yes we have done that and i am getting group under decoded value
{
“ver”: 1,
“jti”: “AT.-Msm6r1n0a_2PYXvB1KLhZ_9aYp6_yLrD1Ypc5jXmN0”,
“iss”: “https://dev-988868.okta.com/oauth2/default”,
“aud”: “api://default”,
“iat”: 1600891992,
“exp”: 1600895592,
“cid”: “0oaw11hdo0cZqeajr4x6”,
“uid”: “00ux6euger6IiBH2n4x6”,
“scp”: [
“profile”,
“email”,
“groups”,
“openid”
],
“Group”: [
“Everyone”,
“ug_prt_admin”,
“ug_prt_users”
],
“sub”: “Swati.Goel@moodys.com”,
“groups”: [
“Everyone”,
“ug_prt_admin”,
“ug_prt_users”
],
“email”: “Swati.Goel@moodys.com
}
but when i use this code this.user = await this.okta.getUser();
const result = this.user.groups.find((group) => group === ‘ug_prt_admin’);
if (result) {
return true;
} else {
alert(‘User is not authorized to perform this operation’);
return false;
}
I am not able to retrieve groups :frowning:

Thanks for your quick reply mraible :slight_smile:

If you print out the user object that’s retrieved, are there any groups in there? If not, I’d suggest you send an email to developers@okta.com.

Hi All,

I am unable to retrieve logged in user group information in angular application

User Object

Decoded token using https://jwt.io/image002.jpg

I am not able to retrieve groups when ‘this.oktaAuth.getUser(****).groups’ is returning undefined.

Code snippet

this.user = await this.okta.getUser();
const result = this.user.groups.find((group) => group === ‘ug_prt_admin’);
if (result) {
return true;
} else {
alert(‘User is not authorized to perform this operation’);
return false;
}

Please help us in resolving this issue. This is high priority issue.

Thanks and Regards,

Swati

In user object i am getting below response

When you create the groups claim, there’s the option of putting it in the ID or access token. If you click on ID Token, the “Always” box will turn white, and then you can select Userinfo / id_token request in the dropdown list.

If you select Userinfo / id_token request it will show up in both. If it’s “ID token” and “Always”, then it will only be present in the id token.