Authorization Code Flow with PKCE in Angular with angular-oauth2-oidc

Question

I want to use the code flow with PKCE in my Angular SPA and for convenience I use this library: angular-oauth2-oidc

If you click on the link, it says that with this configuration you will use the code flow with PKCE:

let authConfig: AuthConfig = {
      issuer: 'https://myIssuerURL.com',
      redirectUri: 'https://myRedirectURI.com',
      clientId: environment.myclientId,
      scope: 'openid',
      responseType: 'code',
      showDebugInformation: true,
    };

I init the flow with this command when the user clicks on login:

this.oauthService.initCodeFlow();

This works and I receive the access and the ID token, but how can I be sure that I'm using code flow with PKCE and not just the normal code flow without PKCE? Is the creation and storage of the code challenge and verifier all handled by the library for me? Is there a way to stop the process and see the Authorization code or the code challenge?

It's maybe a weird question, but I just want to be sure that it's using PKCE...

Outrelief

Answer 1

I'm pretty certain it does - the way to be sure is to trace the network messages and look for code_challenge and code_challenge_method parameters in the authorization redirect. See steps 4 and 8 of my OAuth SPA Messages Page for how this should look.

Agrobiology

Answer 2

another way is based on your identity issuer config. If it sets require pkce to be true you are in the clear

Ml

Answer 3

import { NgModule } from '@angular/core';
import { AuthModule } from 'angular-auth-oidc-client';


@NgModule({
    imports: [AuthModule.forRoot({
        config: {
            authority: 'https://login.microsoftonline.com/v2.0',
            //authWellknownEndpoint: 'https://login.microsoftonline.com/common/v2.0',
            redirectUrl: window.location.origin,
            clientId: '',
            scope: 'openid profile offline_access email', // 'openid profile offline_access ' + your scopes
            responseType: 'code',
            silentRenew: true,
            useRefreshToken: true,
            maxIdTokenIatOffsetAllowedInSeconds: 600,
            issValidationOff: false,
            autoUserInfo: false,
            customParamsAuthRequest: {
              prompt: 'consent', // login, consent
            },
    }
      })],
    exports: [AuthModule],
})
export class AuthConfigModule {}

Expansion

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Mineral