PKCE Code verifier seems to be wrong with latestet version and Angular 12 production build

[loeri]

I have have updated my angular project to the latest angular 12 version and to the latest angular-oauth2-oidc version.
Since then the code flow does not work anymore. My Auth Provider (zaikio.com) sends me an error, when the library wants to read the user token:
PKCE is active for this access grant but code_verifier is not valid
The interesting point is, this only happens, if the app is build with production configuration.
Running with ng serve or building the default configuration everything works ok.
my dependencies are:

"dependencies": {
    "@angular/animations": "^12.1.1",
    "@angular/cdk": "^12.1.1",
    "@angular/common": "^12.1.1",
    "@angular/compiler": "^12.1.1",
    "@angular/core": "^12.1.1",
    "@angular/forms": "^12.1.1",
    "@angular/material": "^12.1.1",
    "@angular/platform-browser": "^12.1.1",
    "@angular/platform-browser-dynamic": "^12.1.1",
    "@angular/router": "^12.1.1",
    "@heidelberg/hdmui-angular": "^1.0.19",
    "@ngx-translate/core": "~13.0.0",
    "@ngx-translate/http-loader": "^6.0.0",
    "angular-oauth2-oidc": "^12.0.2",
    "angular-split": "~5.0.0",
    "bootstrap": "^5.0.2",
    "core-js": "^2.5.4",
    "luxon": "^2.0.1",
    "mime": "^2.5.2",
    "moment": "^2.29.1",
    "moment-timezone": "^0.5.33",
    "ngx-avatar": "^4.1.0",
    "rxjs": "^6.6.7",
    "tslib": "^2.2.0",
    "uuid": "^8.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^12.1.1",
    "@angular/cli": "^12.1.1",
    "@angular/compiler-cli": "^12.1.1",
    "@angular/language-service": "^12.1.1",
    "@types/jasmine": "^3.6.10",
    "@types/jasminewd2": "^2.0.8",
    "codelyzer": "^6.0.2",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.4",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "karma-junit-reporter": "^2.0.1",
    "karma-sabarivka-reporter": "^3.2.4",
    "karma-spec-reporter": "0.0.32",
    "npm-audit-ci-wrapper": "^3.0.1",
    "protractor": "~7.0.0",
    "tslint": "~6.1.0",
    "typescript": "~4.3.5"
  }

[loeri]

The problem was in my angular.json or typescript settings. After adjusting to the latest Angular 12 settings, the production build was ok.

[FleischerJan]

@loeri Can you describe a bit more, what you have changed in your angular.json and in the typescript settings? I have the same issue and no idea where the issue comes from.

[Sebastian-G]

@loeri / @manfredsteyer Please reopen this issue.

We are currently facing the same issue after upgrading Angular 12.0.5 to 12.2.1.
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.

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

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

Angular json

{
...
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
...
}

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