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

Question

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.

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

responseType: 'code',

2. 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.

Answer 1

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.