"No Code In URL" Error During Authorization

[tasimpson]

I am using Quickstart | Angular Auth OIDC Client Docs to help me with my OIDC with Okta and Angular.

I have the following set up:

app.module.ts

const appRoutes: Routes = [
 { path: '', pathMatch: 'full', redirectTo: 'home' },
  { path: 'home', component: HomeComponent },
  { path: 'login/callback', component: CallbackComponent },
  { path: 'unauthorized', component: UnauthorizedComponent }
];

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    CallbackComponent,
    UnauthorizedComponent
  ],
  imports: [
    BrowserModule,
    ApiModule.forRoot(configurationFactory),
    RouterModule.forRoot(appRoutes),
    AuthModule.forRoot({
      config : {
        authority: 'https://myurl.com/oauth2/###', 
        redirectUrl: window.location.origin, 
        postLogoutRedirectUri: window.location.origin,
        clientId: 'myclientid',
        scope: 'openid',
        responseType: 'code',
        silentRenew: true,
        useRefreshToken: true,
        autoUserInfo: false,
        renewTimeBeforeTokenExpiresInSeconds: 30,
        logLevel: LogLevel.Debug
      }
    })
  ],
  providers: [],
  bootstrap: [AppComponent],
  exports: [AuthModule]
})

export class AppModule {}

home.component.ts

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss'],
})
export class HomeComponent implements OnInit {
  constructor(public oidcSecurityService: OidcSecurityService, private oauthService: OAuthService) {}

  ngOnInit() {
    this.oidcSecurityService.checkAuth().subscribe(({ isAuthenticated, userData, accessToken, idToken }) => {
      console.log('app authenticated', isAuthenticated);
      console.log(`Current access token is '${accessToken}'`);
    });
  }

  login() {
    console.log('start login');
    // this.oauthService.initImplicitFlow();
    this.oidcSecurityService.authorize();
  }

  refreshSession() {
    console.log('start refreshSession');
    this.oidcSecurityService.authorize();
  }

  logout() {
    console.log('start logoff');
    this.oidcSecurityService.logoff();
  }

  getToken() {
    //Example of getting token and placing it on headers 
    const token = this.oidcSecurityService.getAccessToken().subscribe((token) => {
      const httpOptions = {
        headers: new HttpHeaders({
          Authorization: 'Bearer ' + token,
        }),
      };
    });

    console.log('Current token: ', token);
  }  
}

In my home component I have a login button that calls login() seen above. I never see the okta login screen, and I continuously get the below error and I am just redirected to my Unauthorized component which just tells me I need to login. So I’m in a loop I cant get out of. If I need to include more code let me know, but this is basically what I have! Nothing in the authorize component, except for it to say “not authorized”

LOGIN:

ERROR after clicking and hitting login() on homecomponent:

I want to be able to hit the Okta Login screen when I hit login() via my button, put in my credentials in and get an auth response back.

THANK YOU IN ADVANCED for dealing with my question!

[andrea]

First, if you already have an Okta session in your browser, you won’t get prompted to authenticate. You will also not be prompted to authenticate if the request is invalid (like when the redirect_uri you pass doesn’t match one known to Okta).

It kind of looks like you’re encountering an error when you make the /authorize request

This looks like the error you get if you are requesting scopes that don’t exist for the authorization server you are trying to use (see this thread that has the full text of the error).

If that is the full error you are seeing as well, what scopes are you currently requesting and are you using a custom authorization server for which that scope is valid?