[Fixed] Custom Scopes: Using angular-oauth2-oidc with Auth0 and Github

Issue

I am attempting to integrate the angular-oauth2-oidc library with Auth0 and Github. Feel free to keep in mind I have selected all scopes(just to be safe), from the Auth0/Github UI side of things.

Using Latest Features

I am using the latest features that angular-oauth2-oidc has to offer.

For instance, I am using code flow i.e.:

responseType: 'code',

In addition, I am using the proper audience for my customQueryParams e.g.

customQueryParams: {
    // API identifier configured in Auth0 - Put made up audience here
    audience: 'https://dev-51246k0z.us.auth0.com/api/v2/',
  },

Can see full auth.config.ts file here:

import { AuthConfig } from 'angular-oauth2-oidc';

export const authConfig: AuthConfig = {

  // Your Auth0 app's domain
  // Important: Don't forget to start with https://
  //  AND the trailing slash!
  issuer: 'https://id.company-name.com/',

  // The app's redirectUri configured in Auth0
  redirectUri: window.location.origin ,

  // URL of the SPA to redirect the user after silent refresh
  silentRefreshRedirectUri: window.location.origin,

  useSilentRefresh: true,

  // The app's clientId configured in Auth0 - example client id
  clientId: 'A0tLAYYSyGRtwyF4wlVh49jmLZCW8pVQ',

  // Scopes ("rights") the Angular application wants get delegated
  scope: 'openid profile email offline_access read:roles',

  // Using Authorization Code Flow
  // (PKCE is activated by default for authorization code flow)
  responseType: 'code',

  // Your Auth0 account's logout url
  // Derive it from your application's domain
  logoutUrl: 'https://id.company-name.com/logout',

  customQueryParams: {
    // API identifier configured in Auth0
    audience: 'https://dev-51246k0z.us.auth0.com/api/v2/',
  },

  silentRefreshTimeout: 5000, // For faster testing
  timeoutFactor: 0.25, // For faster testing
  sessionChecksEnabled: true,
  showDebugInformation: true, // Also requires enabling "Verbose" level in devtools
  clearHashAfterLogin: false, // https://github.com/manfredsteyer/angular-oauth2-oidc/issues/457#issuecomment-431807040,
  nonceStateSeparator : 'semicolon' // Real semicolon gets mangled by IdentityServer's URI encoding
};

Custom Scope Issue I am Coming Across

The issue I am coming across is that the custom scope I am specifying for roles is not coming through using the Auth0 Github Social Connection. My scope field looks like this:

// Scopes ("rights") the Angular application wants get delegated
scope: 'openid profile email offline_access read:roles',

, but the access_token will never include scopes beyond openid profile email offline_access. I.e. will not give the app the scope/permissions for read:roles causing the Auth0 roles API to fail.

My Github social login is working. The app re-directs me to Github, where it asks me to log in, and then specifies the scopes the Github app wants.
If this question is not clear enough, feel free to comment, and will tidy the question up.

Solution

Just to answer my own question. This is a non-frontend-related error. Auth0 intentionally only allows the front end to have limited scopes: https://auth0.com/docs/tokens/management-api-access-tokens/get-management-api-tokens-for-single-page-applications

^ If using Auth0, the only way to get these scopes is to wrap your own API, with the secret client id behind the scenes. This is not a front end related issue. Then depending on permissions granted to backend API, you might be able to grab custom scopes via the backend.

ErrorsFixing