Getting custom scope in access token

[ajmg]

I’m trying to get a custom scope returned in the access token that our Angular app requests. The Angular app is using version 3.0.1 of @okta/okta-angular.
I’ve configured a custom scope and set this scope in the rule used by the Access Policy.
We’re using the default custom authorization server.
When I test in the TokenPreview tab the access token looks fine (i.e., the custom scope is present), however, the Angular app does not return the custom scope in the access token. I’m configuring okta-angular as follows:

oidc: {
clientId: ‘’,
issuer: ‘https:///oauth2/default’,
redirectUri: ‘http://localhost:8080/implicit/callback’,
postLogoutRedirectUri: ‘http://localhost:8080/login’,
scope: ‘embark’,
testing: {
disableHttpsCheck: false
}
},

Would there be anything I’m missing?

[Lijia]

@ajmg Hi Did you include “openid” in the scopes

okta/okta-auth-js

[ajmg]

Hi @Lijia yes I’ve just added ‘openid’ back to the Access Policy and changed the config for okta-angular to:

oidc: {
clientId: ‘’,
issuer: ‘https:///oauth2/default’,
redirectUri: ‘http://localhost:8080/implicit/callback’,
postLogoutRedirectUri: ‘http://localhost:8080/login’,
scope: [‘embark, openid’],
testing: {
disableHttpsCheck: false
}
},

Still no joy - interestingly the following 3 scopes always return in the access token: openid, email, profile (I guess these are default scopes returned), but still can’t get the custom scope to be returned.

[Lijia]

@ajmg How did you setup your custom scopes in Okta configuration, do you have a screenshot?
Also, in your code, how do you retrieve token? Here is a simple way.

[ajmg]

Hi Lijia

I set up the custom scope this way (see screenshot)

I then added the custom scope to the rule in the Access Policy for the Angular app. There’s also appears to be a default access policy so I added the scope to that too.

I think we’re retrieving the token in the same way demonstrated in your link, i.e.,

import { OktaAuthService } from '@okta/okta-angular';
...
@Injectable()
export class IdentityMetaAuthInterceptor implements HttpInterceptor {
  constructor(
    private oktaService: OktaAuthService
  ) { }
...
const token = this.oktaService.getAccessToken();
return next.handle(this.setBearerToken(req, token));
... etc

[Lijia]

@ajmg Can you show me the page of the scope list?
Click Security → API → Authorization Server → default auth sever → Scopes.
Also, the reason you see the 3 scopes (openid, email, profile) always returned is they are set as default which means It will be returned in an access token when the client omits the scope parameter in a token request.
If you are good to test, try to select metadata and default boxes for your customized scope and see if this scope is returned with the other three.

[ajmg]

Hi @Lijia I selected metadata and default boxes for the customized scope as you suggested. Here’s the scope list:

I also removed the default scopes from the okta-angular config; relevant part of config is now:

...
redirectUri: 'http://localhost:8080/implicit/callback',
    postLogoutRedirectUri: 'http://localhost:8080/login',
    scope: 'embark',
... etc

Still only getting the default scopes:

 "scp": [
        "profile",
        "email",
        "openid"
    ],

returned from the access token when we do

const token = this.oktaService.getAccessToken();

At the bottom of the link you referred to previously it says that to get custom scopes in token you need to refresh the idToken which will mint a new token with all scope attributes. Would this be correct - and also does that mean that the scope would be in the idToken rather than the access token? I’ve tried amending the code but methods are not recognised so perhaps this comment is referring to a different version of okta-angular?

[Lijia]

@ajmg It sounds like the 3 default scopes are set as default in your code. In order to help you review the code, could you please open a support ticket through an email to support@okta.com. One of our dev support engineers will help.