Search code examples
angularoauth-2.0pkceangular-oauth2-oidcauthenticationchallenge

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


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


Solution

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