Proof Key for Code Exchange for LinkedIn is not working

[ghost]

Make sure to check the demo app(s) for sample usage

Make sure to check the existing issues in this repository

If the demo apps cannot help and there is no issue for your problem, tell us about it

An initial angular nativescript project with nativescript-oauth2 as a dependency. Have configured Facebook, Google, and LinkedIn Oauth2 login. Facebook and Google both work as LinkedIn receives the following error after successfully logging in to LinkedIn through the WebView.

JS: 403 ERROR Occurred
JS: there was an error logging in.
JS: Error: 403 ERROR Occurred

I have discovered that it has to do with the code verifier. When I comment out the code_verifier param right before it makes the POST request to the token endpoint, it works. I am going to dig a bit deeper.

Which platform(s) does your issue occur on?

Currently, only tested on Android using an emulator.

Please, provide the following version numbers that your issue occurs with:

tns --version
6.8.0

node_modules/tns-core-modules/package.json
"version": "7.0.0-rc.32"

package.json
...
"tns-android": {
  "version": "6.5.3"
}
...
  "dependencies": {
    "@angular/animations": "~10.0.14",
    "@angular/common": "~10.0.14",
    "@angular/compiler": "~10.0.14",
    "@angular/core": "~10.0.14",
    "@angular/forms": "~10.0.14",
    "@angular/platform-browser": "~10.0.14",
    "@angular/platform-browser-dynamic": "~10.0.14",
    "@angular/router": "~10.0.14",
    "@nativescript/angular": "~10.0.3",
    "@nativescript/core": "rc",
    "@nativescript/theme": "~2.3.3",
    "core-js": "^3.6.5",
    "nativescript-oauth2": "^2.4.3",
    "ngx-cookie-service": "^10.0.1",
    "ngx-webstorage": "^6.0.0",
    "reflect-metadata": "~0.1.13",
    "rxjs": "~6.6.2",
    "tslib": "2.0.1",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1000.8",
    "@angular-devkit/schematics": "^10.0.8",
    "@angular/cli": "~10.0.8",
    "@angular/compiler-cli": "~10.0.14",
    "@nativescript/tslint-rules": "~0.0.5",
    "@nativescript/webpack": "~2.0.2",
    "@types/jasmine": "~3.5.14",
    "@types/jasminewd2": "~2.0.8",
    "@types/node": "^14.6.2",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.2",
    "karma": "~5.1.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.3",
    "karma-jasmine": "~4.0.1",
    "karma-jasmine-html-reporter": "^1.5.4",
    "node-sass": "^4.14.1",
    "protractor": "~7.0.0",
    "ts-node": "~9.0.0",
    "tslint": "~5.16.0",
    "typescript": "~3.9.7"
  }
...

Please, tell us how to recreate the issue in as much detail as possible.

Configure linkedIn:

  configureOAuthProviderLinkedIn(): TnsOaProviderLinkedIn {
    const linkedInProviderOptions: TnsOaProviderOptionsLinkedIn = {
      openIdSupport: 'oid-none',
      clientId: '',
      clientSecret: '',
      redirectUri: 'https://www.linkedin.com/connect/login_success.html',
      scopes: [
        'r_emailaddress',
        'r_liteprofile'
      ]
    };

    return new TnsOaProviderLinkedIn(linkedInProviderOptions);
  }

Start app and trigger login:

  login(provider: { name: string, type: string, url: string }): void {
    this.client = new TnsOAuthClient(provider.type);
    this.client.loginWithCompletion((tokenResult: ITnsOAuthTokenResult, error) => {
      if (error) {
        console.error('there was an error logging in.');
        console.error(error);
      } else {
        console.log('logged in sucessfully.');
        console.log(tokenResult);
      }
    });
  }

Login with LinkedIn and watch logs for the error.

Is there any code involved?

See above.

[ghost]

@alexziskind1 I have updated to initial comment.

[ghost]

Just discovered I can disable pkce when creating the client.

this.client = new TnsOAuthClient(provider.type, false);

I assume LinkedIn should support pkce. Maybe worth looking into.