angular-oauth2-oidc: PKCE Code verifier is incorrect for Angular 12 production build

Description

The bug was found in version angular-oauth2-oidc:12.0.2 in combination with Angular 12.2.1. It has only been reported since the update of angular version from 12.0.5 -> 12.2.1. (It is probably duplicate of #1117 )

ERROR

We are unable to login with PKCE Code.

POST https://login.microsoftonline.com/XXXX-YYYYY-42d2-a01a-13edff7f5fe7/oauth2/v2.0/token
[400 Bad Request]

---------

error   | "invalid_grant"
msg     | "AADSTS501481: The Code_Verifier does not match the code_challenge supplied in the authorization request."

Context & Approach

If we run the project with ng serve the SPA is able to connect to our Azure AD, also if we build the application with --configuration development. Only if we build the application in production mode, we are not able to login anymore. To further narrow down the problem, we turned off the optimization flags:

{
  // angular.json ...
  "configurations": {
    "fake-prod": {
      "buildOptimizer": false,
      "optimization": false
      // ...
    },
    "development": {
      "buildOptimizer": false,
      "optimization": false,
      "vendorChunk": true,
      "extractLicenses": false,
      "sourceMap": true,
      "namedChunks": true
    }
  }
}

With this setting you can log in again!

System information

Full system information 
npx envinfo --system --binaries --browsers --npmPackages --duplicates --npmGlobalPackages

System:
OS: macOS 11.5.2
CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
Memory: 31.76 MB / 32.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 14.15.3 - ~/.nvm/versions/node/v14.15.3/bin/node
Yarn: 1.22.10 - ~/.nvm/versions/node/v14.15.3/bin/yarn
npm: 7.16.0 - ~/.nvm/versions/node/v14.15.3/bin/npm
Browsers:
Chrome: 92.0.4515.159
Chrome Canary: 95.0.4612.2
Firefox: 90.0.2
Firefox Developer Edition: 92.0
Safari: 14.1.2
npmPackages:
@angular-devkit/build-angular: ~12.2.1 => 12.2.1
@angular-devkit/build-webpack: ^0.1202.1 => 0.1202.1
@angular-eslint/builder: ~12.2.1 => 12.2.2
@angular-eslint/eslint-plugin: ~12.2.1 => 12.2.2
@angular-eslint/eslint-plugin-template: ~12.2.1 => 12.2.2
@angular-eslint/schematics: ~12.2.1 => 12.2.2
@angular-eslint/template-parser: ~12.2.1 => 12.2.2
@angular/animations: ~12.2.1 => 12.2.1
@angular/animations/browser:  undefined ()
@angular/animations/browser/testing:  undefined ()
@angular/cdk: ~12.2.1 => 12.2.1
@angular/cdk/a11y:  undefined ()
@angular/cdk/accordion:  undefined ()
@angular/cdk/bidi:  undefined ()
@angular/cdk/clipboard:  undefined ()
@angular/cdk/coercion:  undefined ()
@angular/cdk/collections:  undefined ()
@angular/cdk/drag-drop:  undefined ()
@angular/cdk/keycodes:  undefined ()
@angular/cdk/layout:  undefined ()
@angular/cdk/observers:  undefined ()
@angular/cdk/overlay:  undefined ()
@angular/cdk/platform:  undefined ()
@angular/cdk/portal:  undefined ()
@angular/cdk/scrolling:  undefined ()
@angular/cdk/stepper:  undefined ()
@angular/cdk/table:  undefined ()
@angular/cdk/testing:  undefined ()
@angular/cdk/testing/protractor:  undefined ()
@angular/cdk/testing/selenium-webdriver:  undefined ()
@angular/cdk/testing/testbed:  undefined ()
@angular/cdk/text-field:  undefined ()
@angular/cdk/tree:  undefined ()
@angular/cli: ~12.2.1 => 12.2.1
@angular/common: ~12.2.1 => 12.2.1
@angular/common/http:  undefined ()
@angular/common/http/testing:  undefined ()
@angular/common/testing:  undefined ()
@angular/common/upgrade:  undefined ()
@angular/compiler: ~12.2.1 => 12.2.1
@angular/compiler-cli: ~12.2.1 => 12.2.1
@angular/compiler/testing:  undefined ()
@angular/core: ~12.2.1 => 12.2.1
@angular/core/testing:  undefined ()
@angular/flex-layout: ^12.0.0-beta.34 => 12.0.0-beta.34
@angular/flex-layout/core:  undefined ()
@angular/flex-layout/extended:  undefined ()
@angular/flex-layout/flex:  undefined ()
@angular/flex-layout/grid:  undefined ()
@angular/flex-layout/server:  undefined ()
@angular/forms: ~12.2.1 => 12.2.1
@angular/localize: ^12.2.1 => 12.2.1
@angular/localize/init:  undefined ()
@angular/platform-browser: ~12.2.1 => 12.2.1
@angular/platform-browser-dynamic: ~12.2.1 => 12.2.1
@angular/platform-browser-dynamic/testing:  undefined ()
@angular/platform-browser/animations:  undefined ()
@angular/platform-browser/testing:  undefined ()
@angular/router: ~12.2.1 => 12.2.1
@angular/router/testing:  undefined ()
@angular/router/upgrade:  undefined ()
@ngneat/until-destroy: ^8.0.4 => 8.0.4
@ngx-translate/core: ^13.0.0 => 13.0.0
@ngx-translate/http-loader: ^6.0.0 => 6.0.0
@ngxs/store: ^3.7.2 => 3.7.2
@ngxs/store/internals:  undefined ()
@ngxs/store/operators:  undefined ()
@types/jest: ^27.0.1 => 27.0.1
@types/node: ^12.11.1 => 12.20.15 (14.17.4)
@typescript-eslint/eslint-plugin: ^4.23.0 => 4.23.0
@typescript-eslint/parser: ^4.23.0 => 4.23.0 (3.10.1)
angular-oauth2-oidc: ^12.0.2 => 12.0.2
angular-svg-icon: ^12.0.0 => 12.0.0
compodoc: ^0.0.41 => 0.0.41
cypress: 7.6.0 => 7.6.0
eslint: ^7.26.0 => 7.29.0
eslint-config-prettier: ^8.3.0 => 8.3.0
eslint-plugin-prettier: ^3.4.0 => 3.4.0
fake-basic-project:  1.0.0
fake-project:  1.0.0
husky: ^7.0.0 => 7.0.0
jest: ^27.0.6 => 27.0.6
jest-preset-angular: ^9.0.6 => 9.0.6
jwt-decode: ^3.1.2 => 3.1.2
lib:  0.0.1
ng-mocks: ^12.4.0 => 12.4.0
ngx-permissions: ^8.1.1 => 8.1.1
normalize.css: ^8.0.1 => 8.0.1
prettier: ^2.3.2 => 2.3.2
prettier-eslint: ^12.0.0 => 12.0.0
rxjs: ~6.6.0 => 6.6.7 (7.3.0)
rxjs/ajax:  undefined ()
rxjs/fetch:  undefined ()
rxjs/internal-compatibility:  undefined ()
rxjs/operators:  undefined ()
rxjs/testing:  undefined ()
rxjs/webSocket:  undefined ()
sonarqube-scanner: ^2.8.1 => 2.8.1
start-server-and-test: ^1.12.5 => 1.12.5
tippy-headless:  0.1.0
tippy.js: ^6.3.1 => 6.3.1
tslib: ^2.1.0 => 2.3.0 (1.14.1, 2.1.0)
typescript: ~4.2.3 => 4.2.4 (4.3.5, 3.9.10, 2.2.0)
zone-mix:  undefined ()
zone-node:  undefined ()
zone-testing:  undefined ()
zone.js: ~0.11.4 => 0.11.4
zone.js/async-test:  undefined ()
zone.js/async-test.min:  undefined ()
zone.js/fake-async-test:  undefined ()
zone.js/fake-async-test.min:  undefined ()
zone.js/jasmine-patch:  undefined ()
zone.js/jasmine-patch.min:  undefined ()
zone.js/long-stack-trace-zone:  undefined ()
zone.js/long-stack-trace-zone.min:  undefined ()
zone.js/mocha-patch:  undefined ()
zone.js/mocha-patch.min:  undefined ()
zone.js/proxy:  undefined ()
zone.js/proxy.min:  undefined ()
zone.js/sync-test:  undefined ()
zone.js/sync-test.min:  undefined ()
zone.js/task-tracking:  undefined ()
zone.js/task-tracking.min:  undefined ()
zone.js/webapis-media-query:  undefined ()
zone.js/webapis-media-query.min:  undefined ()
zone.js/webapis-notification:  undefined ()
zone.js/webapis-notification.min:  undefined ()
zone.js/webapis-rtc-peer-connection:  undefined ()
zone.js/webapis-rtc-peer-connection.min:  undefined ()
zone.js/webapis-shadydom:  undefined ()
zone.js/webapis-shadydom.min:  undefined ()
zone.js/wtf:  undefined ()
zone.js/wtf.min:  undefined ()
zone.js/zone-bluebird:  undefined ()
zone.js/zone-bluebird.min:  undefined ()
zone.js/zone-error:  undefined ()
zone.js/zone-error.min:  undefined ()
zone.js/zone-legacy:  undefined ()
zone.js/zone-legacy.min:  undefined ()
zone.js/zone-patch-canvas:  undefined ()
zone.js/zone-patch-canvas.min:  undefined ()
zone.js/zone-patch-cordova:  undefined ()
zone.js/zone-patch-cordova.min:  undefined ()
zone.js/zone-patch-electron:  undefined ()
zone.js/zone-patch-electron.min:  undefined ()
zone.js/zone-patch-fetch:  undefined ()
zone.js/zone-patch-fetch.min:  undefined ()
zone.js/zone-patch-jsonp:  undefined ()
zone.js/zone-patch-jsonp.min:  undefined ()
zone.js/zone-patch-message-port:  undefined ()
zone.js/zone-patch-message-port.min:  undefined ()
zone.js/zone-patch-promise-test:  undefined ()
zone.js/zone-patch-promise-test.min:  undefined ()
zone.js/zone-patch-resize-observer:  undefined ()
zone.js/zone-patch-resize-observer.min:  undefined ()
zone.js/zone-patch-rxjs:  undefined ()
zone.js/zone-patch-rxjs-fake-async:  undefined ()
zone.js/zone-patch-rxjs-fake-async.min:  undefined ()
zone.js/zone-patch-rxjs.min:  undefined ()
zone.js/zone-patch-socket-io:  undefined ()
zone.js/zone-patch-socket-io.min:  undefined ()
zone.js/zone-patch-user-media:  undefined ()
zone.js/zone-patch-user-media.min:  undefined ()
npmGlobalPackages:
npm: 7.16.0
yarn: 1.22.10

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Reactions: 8
  • Comments: 16 (6 by maintainers)

Commits related to this issue

Most upvoted comments

Awesome. Thanks for your help with this. Will release it as 12.1 very soon.

+9
manfredsteyer on Aug 24, 2021

Seems like the optimizer used by the CLI is destroying this. The lib for calculating sha256 is still using plain javascript and commonjs. Seems like the optimizer has issues with it.

I’ve completely switched it out now. Can you please give this version a try:

12.0.2-issue.1120.2

Best wishes, Manfred

+9
manfredsteyer on Aug 24, 2021
Read more comments on GitHub
← angular-oauth2-oidc: OAuthService config is null after the page is reloaded
angular-oauth2-oidc: Refresh token not working. →