Get full access token from Auth0 using angular-oauth2-oidc library

Question

I have the angular-oauth2-oidc library set up to use with Auth0. However, Auth0 keeps sending me a really short access token, e.g. mSNhEfdDHK6t-kT5QweRtgec-FPGAsdfEw9, instead of a full JWT token. Here's how to reproduce the issue:

Create a sample "API" in Auth0 that you want access to as a resource.
Create a SPA application set up for implicit flow in Auth0.
Follow the quick start from angular-oauth2-oidc or clone my sample repo.

Configure it along these lines:

export const authConfig: AuthConfig = {
  issuer: 'https://your-tenant-name.eu.auth0.com/',
  clientId: 'your-spa-client-id-here',
  redirectUri: window.location.origin + '/index.html',
  scope: 'openid profile email',
};

Trigger the initImplicitFlow() call by clicking the login button on your application.

When you do so:

Result: full JWT IdToken, but short AccessToken.
Expected: both tokens full JWT tokens.

There is this thread on the Auth0 community forums that explains why you get such an "opaque string" for an access token. The top, accepted answer mentions things that I'm already doing (sope as I did, calling /authorize, etc). However, lower in that thread it mentions setting the audience when calling /authorize is the solution, which seems like a good thing anyways.

But how do you send along the audience? There is no such property on the AuthConfig type to set it, and looking at the initImplicitFlow() source it just straight up changes location.href so there's no interception there either.

Jeroen Jeroen · Accepted Answer · 2018-08-26T09:46:13

You were almost there. Although it might be nice to have audience as a specific property on the AuthConfig type, there is already a way to configure it: use the customQueryParams for this:

export const authConfig: AuthConfig = {
  issuer: 'https://your-tenant-name.eu.auth0.com/',
  clientId: 'your-spa-client-id-here',
  redirectUri: window.location.origin + '/index.html',
  scope: 'openid profile email',
  customQueryParams: {
    audience: 'https://your-api-audience-id.example.com',
  },
};

The audience is the identifier you've configured in Auth0. Here's a screenshot from the management interface:

Get full access token from Auth0 using angular-oauth2-oidc library

1 Answers