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

score 2 · Accepted Answer · answered Feb 08 '21 at 20:12

2

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.

answered Feb 08 '21 at 20:12

Gary Archer

22,534
2
12
24

score 0 · Answer 2 · answered Aug 27 '21 at 05:49

0

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

answered Aug 27 '21 at 05:49

leGIT-bot

1

score -1 · Answer 3 · answered Feb 03 '22 at 22:49

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 {}

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](/help/how-to-answer). — Community, Feb 04 '22 at 06:02

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

3 Answers3