Can't get Auth Code from Auth0 or Okta in Angular app using angular-oauth2-oidc

Question

I see an /authorize? call but no /code? message is ever received from auth0 or OKTA.

OK, let me start at the beginning.

Our typical login flow:

1. The user access our site at localhost:4200/ (just an example URL for this post)
2. an auth-guard is called, notes the user is not logged in, and reroutes to /login
3. on our login page, the user selects an organization code they need before we can log them in
4. The user selects 'next'
5. The user is presented with a login page by Auth0 and enters their credentials
6. Auth0 receives the message and calls the redirect URL, which is /callback

At this point I expect auth0 to return an auth code, then the library to request the access token, BUT NOTHING HAPPENS.

All the online examples seem to take the user from step 1 directly to step 5

We want to switch our angular app to use a generic library like angular-oauth2-oidc, but I should note that the flow works when we use auth0's angular library.

Currently, our callback page just presents the user with a spinner - it doesn't execute any code. I suspect this might be the issue, but not sure, and not sure what it needs to do.

I also have not turned on silent refresh yet.

auth config (including defaults):

checkOrigin:false
clearHashAfterLogin:true
clientId:"<private>"
customQueryParams
: {identityProviders: '[{"connectionId":"google-oauth2","name":"Google Account"}]'}
customTokenParameters:[]
decreaseExpirationBySec:0
disableAtHashCheck:false
disableIdTokenTimer:false
disablePKCE:false
dummyClientSecret:""
issuer:"https://<private>.us.auth0.com/"
jwks:null
loginUrl:""
logoutUrl:""
nonceStateSeparator:";"
oidc:true
openUri:uri => { location.href = uri; }
options:null
postLogoutRedirectUri:""
preserveRequestedRoute:false
redirectUri:"http://localhost:4200/callback"
redirectUriAsPostLogoutRedirectUriFallback:true
requestAccessToken:true
requireHttps:"remoteOnly"
resource:""
responseType:"code"
revocationEndpoint:null
rngUrl:""
scope:"openid email profile"
sessionCheckIFrameName:"angular-oauth-oidc-check-session-iframe"
sessionCheckIFrameUrl:null
sessionCheckIntervall:3000
sessionChecksEnabled:false
showDebugInformation:true
silentRefreshIFrameName:"angular-oauth-oidc-silent-refresh-iframe"
silentRefreshMessagePrefix:""
silentRefreshRedirectUri:""
silentRefreshShowIFrame:false
silentRefreshTimeout:20000
siletRefreshTimeout:20000
skipIssuerCheck:false
skipSubjectCheck:false
strictDiscoveryDocumentValidation:false
timeoutFactor:0.75
tokenEndpoint:null
useHttpBasicAuth:false
useIdTokenHintForSilentRefresh:false
userinfoEndpoint:null
waitForTokenInMsec:0

auth guard:

  canActivate(next, state) {
    if (
      this.oauthService.hasValidAccessToken() &&
      this.oauthService.hasValidIdToken()
    ) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }  }

and my login code:

  loginWithRedirect(state?: any): Promise<boolean> {
    const oauthConfig: AuthConfig = this.getAuthConfig(state);

    this.oauthService.configure(oauthConfig);
    return this.oauthService.loadDiscoveryDocumentAndLogin();
  }

Answer 1

instead of using loadDiscoveryDocumentAndLogin, we can use the initImplicitFlow method provided by the oauthService to redirect the user to Auth0 for authentication.

so please try the following

loginWithRedirect(state?: any): Promise<boolean> {
  const oauthConfig: AuthConfig = this.getAuthConfig(state);

  this.oauthService.configure(oauthConfig);
  return this.oauthService.initImplicitFlow();
}

here by using initImplicitFlow, the code should redirect the user to Auth0 for authentication and handle the retrieval of the access token automatically.

try this and let us know.