Social sign-in not working with custom url scheme in Cordova

[WouterVDW12]

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

Angular

Amplify APIs

Authentication

Amplify Categories

auth

Environment information

System:
    OS: Windows 10 10.0.19044
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz
    Memory: 1.23 GB / 15.69 GB
  Binaries:
    Node: 14.15.4 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.15 - C:\Program Files (x86)\Yarn\bin\yarn.CMD   
    npm: 6.14.10 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 105.0.5195.53
    Edge: Spartan (44.19041.1266.0), Chromium (105.0.1343.27)  
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    @angular-devkit/build-angular: 0.1102.10 => 0.1102.10      
    @angular/animations: 11.2.11 => 11.2.11
    @angular/animations/browser:  undefined ()
    @angular/animations/browser/testing:  undefined ()
    @angular/cdk: 11.2.10 => 11.2.10
    @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/testbed:  undefined ()
    @angular/cdk/text-field:  undefined ()
    @angular/cdk/tree:  undefined ()
    @angular/cli: 11.2.10 => 11.2.10
    @angular/common: 11.2.11 => 11.2.11
    @angular/common/http:  undefined ()
    @angular/common/http/testing:  undefined ()
    @angular/common/testing:  undefined ()
    @angular/common/upgrade:  undefined ()
    @angular/compiler: 11.2.11 => 11.2.11 (9.0.0)
    @angular/compiler-cli: 11.2.11 => 11.2.11
    @angular/compiler/testing:  undefined ()
    @angular/core: 11.2.11 => 11.2.11 (9.0.0)
    @angular/core/testing:  undefined ()
    @angular/forms: 11.2.11 => 11.2.11
    @angular/language-service: 11.2.11 => 11.2.11
    @angular/localize: 11.2.11 => 11.2.11
    @angular/localize/init:  undefined ()
    @angular/platform-browser: 11.2.11 => 11.2.11
    @angular/platform-browser-dynamic: 11.2.11 => 11.2.11
    @angular/platform-browser-dynamic/testing:  undefined ()
    @angular/platform-browser/animations:  undefined ()
    @angular/platform-browser/testing:  undefined ()
    @angular/router: 11.2.11 => 11.2.11
    @angular/router/testing:  undefined ()
    @angular/router/upgrade:  undefined ()
    @aws-amplify/auth: 4.5.2 => 4.5.2
    @babel/core: 7.2.2 => 7.2.2 (7.12.10, 7.14.6, 7.8.3, 7.15.5, 7.12.9)
    @compodoc/compodoc: 1.1.15 => 1.1.15
    @progress/kendo-angular-buttons: 6.1.0 => 6.1.0
    @progress/kendo-angular-charts: 5.1.0 => 5.1.0
    @progress/kendo-angular-common: 2.0.0 => 2.0.0
    @progress/kendo-angular-dateinputs: 5.1.0 => 5.1.0
    @progress/kendo-angular-dialog: 5.0.0 => 5.0.0
    @progress/kendo-angular-dropdowns: 5.3.0 => 5.3.0
    @progress/kendo-angular-excel-export: 4.0.0 => 4.0.0
    @progress/kendo-angular-grid: 5.0.2 => 5.0.2
    @progress/kendo-angular-inputs: 7.1.2 => 7.1.2
    @progress/kendo-angular-intl: 3.1.0 => 3.1.0
    @progress/kendo-angular-l10n: 3.0.0 => 3.0.0
    @progress/kendo-angular-label: 3.0.0 => 3.0.0
    @progress/kendo-angular-layout: 6.1.2 => 6.1.2
    @progress/kendo-angular-menu: 3.0.0 => 3.0.0
    @progress/kendo-angular-notification: 3.0.0 => 3.0.0
    @progress/kendo-angular-pdf-export: 3.0.0 => 3.0.0
    @progress/kendo-angular-popup: 4.0.0 => 4.0.0
    @progress/kendo-angular-progressbar: 2.0.0 => 2.0.0
    @progress/kendo-angular-tooltip: 3.0.0 => 3.0.0
    @progress/kendo-angular-treeview: 5.2.0 => 5.2.0
    @progress/kendo-data-query: 1.5.4 => 1.5.4
    @progress/kendo-drawing: 1.9.4 => 1.9.4
    @progress/kendo-licensing: 1.1.3 => 1.1.3
    @progress/kendo-theme-default: 4.33.0 => 4.33.0
    @storybook/addon-actions: 6.3.2 => 6.3.2
    @storybook/addon-essentials: 6.3.2 => 6.3.2
    @storybook/addon-links: 6.3.2 => 6.3.2
    @storybook/addon-notes: 5.3.19 => 5.3.19
    @storybook/addon-viewport: 5.3.19 => 5.3.19 (6.3.2)
    @storybook/angular: 6.3.2 => 6.3.2
    @types/hammerjs: 2.0.36 => 2.0.36
    @types/jasmine: 2.8.8 => 2.8.8
    @types/jasminewd2: 2.0.3 => 2.0.3
    @types/karma: 5.0.0 => 5.0.0
    @types/node: 12.11.1 => 12.11.1 (14.17.4, 15.12.4)
    @types/node-sass: 3.10.32 => 3.10.32
    aws-amplify: 4.3.20 => 4.3.20
    aws-sdk: 2.329.0 => 2.329.0
    babel-loader: 8.0.4 => 8.0.4 (8.2.2)
    bsd-3-module:  0.0.0
    codelyzer: 6.0.1 => 6.0.1
    cordova-android: 10.1.0 => 10.1.0
    cordova-ios: 5.1.1 => 5.1.1
    cordova-plugin-advanced-http: 2.1.1 => 2.1.1
    cordova-plugin-androidx-adapter: 1.1.3 => 1.1.3
    cordova-plugin-chrome-apps-common: 1.0.7 => 1.0.7
    cordova-plugin-chrome-apps-iossocketscommon: 1.0.2 => 1.0.2
    cordova-plugin-chrome-apps-sockets-udp: 1.3.0 => 1.3.0
    cordova-plugin-customurlscheme: 5.0.2 => 5.0.2
    cordova-plugin-inappbrowser: 5.0.0 => 5.0.0
    cordova-plugin-ionic-webview: 5.0.0 => 5.0.0
    cordova-plugin-privacyscreen: 0.4.0 => 0.4.0
    cordova-plugin-splashscreen: 5.0.3 => 5.0.3
    cordova-plugin-splashscreen-test-ios:  1.0.0
    cordova-plugin-splashscreen-tests:  5.0.3
    cordova-plugin-statusbar: 2.4.3 => 2.4.3
    cordova-plugin-statusbar-tests:  2.4.3
    core-js: 2.5.7 => 2.5.7 (3.8.3, 3.15.2, 3.15.1)
    custom-license:  0.0.0
    dayjs: 1.8.15 => 1.8.15
    eslint: 6.8.0 => 6.8.0
    eslint-config-airbnb: 17.1.0 => 17.1.0
    eslint-config-prettier: 3.3.0 => 3.3.0
    eslint-plugin-import: 2.14.0 => 2.14.0
    eslint-plugin-prettier: 3.0.1 => 3.0.1 (2.7.0)
    hammerjs: 2.0.8 => 2.0.8
    htmllint: 0.7.3 => 0.7.3
    htmllint-cli: 0.0.7 => 0.0.7
    husky: 1.3.1 => 1.3.1
    invalid-with-comma:  0.0.0
    jasmine-core: 3.5.0 => 3.5.0
    jasmine-spec-reporter: 5.0.1 => 5.0.1
    js-beautify: 1.8.9 => 1.8.9
    jsdom: 11.12.0 => 11.12.0
    json-server: 0.16.3 => 0.16.3
    karma: 6.3.2 => 6.3.2
    karma-chrome-launcher: 3.1.0 => 3.1.0
    karma-coverage: 2.0.2 => 2.0.2
    karma-coverage-coffee-example:  1.0.0
    karma-coverage-istanbul-reporter: 2.1.1 => 2.1.1
    karma-htmlfile-reporter: 0.3.8 => 0.3.8
    karma-jasmine: 3.1.1 => 3.1.1
    karma-jasmine-html-reporter: 1.5.3 => 1.5.3
    karma-parallel: 0.3.1 => 0.3.1
    karma-spec-reporter: 0.0.32 => 0.0.32
    lib:  0.0.1
    license-checker: 24.0.1 => 24.0.1
    lint-staged: 11.0.0 => 11.0.0
    memo-parser:  0.2.0
    moment: 2.24.0 => 2.24.0
    node-example:  1.0.0
    phonegap-plugin-barcodescanner: 8.0.1 => 8.0.1
    prettier: 1.15.3 => 1.15.3 (2.2.1)
    private:  0.0.0
    protractor-example:  1.0.0
    public-domain-module:  0.0.0
    rxjs: 6.6.3 => 6.6.3 (6.6.7)
    rxjs-compat: 6.3.3 => 6.3.3
    rxjs/ajax:  undefined ()
    rxjs/fetch:  undefined ()
    rxjs/internal-compatibility:  undefined ()
    rxjs/operators:  undefined ()
    rxjs/testing:  undefined ()
    rxjs/webSocket:  undefined ()
    sprintf-js: 1.1.2 => 1.1.2 (1.0.3)
    storybook-addon-designs: 6.0.1 => 6.0.1
    storybook-addon-xd-designs: 5.5.0 => 5.5.0
    stylelint: 13.13.1 => 13.13.1
    stylelint-config-standard: 22.0.0 => 22.0.0
    ts-node: 7.0.1 => 7.0.1
    tslib: 2.0.0 => 2.0.0 (2.1.0, 1.14.1, 2.3.0, 2.3.1, 1.9.0)
    tslint: 6.1.0 => 6.1.0
    tslint-config-airbnb: 5.11.1 => 5.11.1
    tslint-config-prettier: 1.17.0 => 1.17.0
    tslint-eslint-rules: 5.4.0 => 5.4.0
    tslint-plugin-prettier: 2.0.1 => 2.0.1
    typescript: 4.0.7 => 4.0.7 (4.1.5)
    typescript-example:  1.0.0
    xlsx: 0.17.1 => 0.17.1
    zone.js: 0.10.3 => 0.10.3
  npmGlobalPackages:
    cordova: 11.0.0
    ionic: 5.4.16
    npm: 6.14.10
    typescript: 4.6.4

Describe the bug

I'm trying to figure out how I can get Social Authentication to work with a custom url scheme (cordova-plugin-customurlscheme) since I need to login from another web application. I have gotten to the point where I get redirected back to my app with the correct "code" and "state" parameters. However when the app needs to redirect I always get the same error:

My redirect URI is also set to work with the custom URL scheme I've set in the app so that I get redirected from the web app where I do the login flow. (redirectSignIn: 'commissioning://app/building'). To catch the redirect event from the custom url plugin I need to catch an event in main.ts (handleOpenURL) and from there on I've tried everything that was mentioned on existing issues that describe a similar behaviour. However I still can't get this to work within the Cordova application.

When I debug the app and open up the network tab I also see that I'm getting the token from the Social sign-in, the issue is that I can't redirect anywhere else in my app without running into the error mentioned above.

Expected behavior

As I've looked through a couple of issues on this repository surrounding similar issues I still encounter the same problem after having tried all possible solutions. Is there any clear way around this issue since I've been stuck on it for a couple of weeks and it needs to work with the Cordova app. I know that for react-native there is an urlOpener which probably resolves the issue mentioned above but this can't be used for any Cordova app as for as I'm aware of? Any help is appreciated.

I've also tried using the cordova-plugin-inappbrowser and passing that to the urlOpener but with the same results since it doesn't have the same functionality as the react-native InAppBrowser.

async function urlOpener(url, redirectUrl) {
  const browser = (<any>window).cordova.InAppBrowser.open(
    url,
    '_blank',
    'location=no,clearsessioncache=no,clearcache=no',
  );
}

....

oauth: {
      ....awsconfig.oauth,
      urlOpener,
    },

Reproduction steps

My current code to catch the handleOpenURL event from the custom url sceme plugin and to try and resolve the historyState error looks like this:

(<any>window).handleOpenURL = function(redirectUrl) {

  const params = new URL(redirectUrl).searchParams;

  if (params.has('code') && params.has('state')) {

    const url = `https://app/building?code=${params.get('code')}&state=${params.get('state')}`;

    document.location.href = url;

    (Auth as any)._handleAuthResponse(url);
  }
};

I'm then looking for any updates through the Hub.Listen

private hubListen = () => {
    Hub.listen('auth', ({ payload: { event, data } }) => {
      switch (event) {
        case 'signIn':
        case 'cognitoHostedUI':
          this.setUser(data);
          break;
        case 'signOut':
          console.log('logged out');
          break;
        case 'customOAuthState':
          this.setUser(data);
      }
    });

    Auth.currentAuthenticatedUser()
      .then(currentUser => this.setUser(currentUser))
      .catch(() => console.log('Not signed in'));
  };

Code Snippet

// Put your code below this line.

Log output

// Put your logs below this line

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[tannerabread]

Hi 👋 @WouterVDW12
I am trying to reproduce this, but I'm new to Cordova and trying to figure out some config/options to create the app with.

I see that you're using Angular, but what platform are you building this on?

Another route would be if you can supply a small repo that would help me reproduce

[brainplug]

Hi @tannerabread ,

getting a basic Cordova app up and running should not require you to do anything with regards to config/options. But Cordova does rely on Android SDKs, tools and emulators to be present on your system. So, next to the 4 step getting started process presented on the Cordova home page, you'll also need to install Android Studio and a Java JDK 8 (you'll run into missing libraries exceptions if you opt for a more recent Java version, can be solved but easier to just install JDK 8). Point the JAVA_HOME env variable to the installed JDK folder.

We produce both android and ios platforms but for reproducing the issue you're good to go with just the android platform (so: cordova platform add android). Using Android Studio's SDK Manager you do need to install the right version of the SDK Tools or you'll get errors while trying to run your Cordova app as well. It seems Cordova needs the 30.0.3 SDK Tools (at least on my system) which you can install through the SDK Manager and then tab "SDK Tools" (check the "Show Package Details" checkbox which will allow you to select and download the required version).

At this point you might run into an issue about invalid keystores when trying cordova run android. It seems the one generated by Android Studio is incompatible with the one Cordova expects so delete the one referenced in the error at which point Cordova will generate a new one when it builds.

The final hurdle might then be the absence of an emulator, you can just launch one through the Device Manager of Android Studio and the Cordova app will then appear in that emulator.

To then easily get a basic Angular app up, I just downloaded the StackBlitz example from Angular (https://angular.io/generated/live-examples/getting-started-v0/stackblitz.html) into a separate folder, ran an "npm install" on it and then ng build --base-href . --output-path ..\your-cordova-project\www\

Run cordova run android again and you should have a basic Angular app to which can then be added amplify-js and the social signin functionality with a custom URL scheme. I can ask one of our developers to already provide a basic app with the social signin as described above but that might take some time as we're working towards a production release and, as always in IT, timing is tight.

[tannerabread]

@brainplug
Wow thank you so much for the detailed response. I really appreciate the effort here!

I should be able to get it up and running this way. I will work on it today and get back to you

[brainplug]

Hi @tannerabread,

You're welcome, one last thing I forgot to mention is that I also set the ANDROID_SDK_ROOT environment variable to point to the Sdk folder where Google installs the Android SDKs (exact location depends on your OS but on my Windows-based laptop it is under C:\Users\my-user\AppData\Local\Android\Sdk).

[tannerabread]

@brainplug
Are you using the Authenticator UI component for Angular with social sign-in or just manual signup/signin through your own functions?
I have the app working and building for Android following your instructions (thank you!) but I'm running into errors trying to add Authentication to it with the UI component. If that's not the way you went about it I can pivot and go another way

[brainplug]

@tannerabread

We do it manually. For the moment we essentially have a "Login with external IdP" button which triggers the following code:

Auth.federatedSignIn({ customProvider: environment.cognito.federatedProviderName });

Signup is not handled in our application but entirely externally in the third-party IdP.

[tannerabread]

@brainplug
I am still trying to reproduce this, in the meantime have you seen this section of the docs? The snippet looks similar to the error thrown

[brainplug]

@tannerabread

I've asked our developers to look at that snippet and see if it fixes anything. Will get back to you once I know more.

[brainplug]

Hi @tannerabread,

We're still looking into trying that snippet of code but for some reason currently still unclear to us we are now running into invalid_request and/or invalid_grant type of errors from Cognito's oauth2/token endpoint. It is not entirely clear where this all of a sudden is coming from as we just rebuilt the same app (code branch) where we first encountered the issue described above months ago.

[tannerabread]

@brainplug I'm just noticing that you have both aws-amplify and @aws-amplify/auth installed in this project. It may not be the solution here but having both aws-amplify and scoped packages such as @aws-amplify/auth in the same project is known to cause issues because of version mismatches. Sometimes it can cause 2 instances of Amplify to be initialized and only one to be configured correctly.

Instead you should just use aws-amplify and then import what you need from that package.
E.g.:

import { Auth } from 'aws-amplify';

I would recommend removing the @aws-amplify/auth package from the project and seeing if it solves either of these issues

[brainplug]

@tannerabread We had to actually do it the other way around to get the application to compile. So: removing aws-amplify and using @aws-amplify/auth (and core which then also added cache). This then properly compiled but unfortunately did not change the error output:

ERROR] 13:25.513 OAuth - Error handling auth response. Error: invalid_request
at e. (main-es2015.b00b58464a0855ce1138.js:1:4037575)
at main-es2015.b00b58464a0855ce1138.js:1:4034498
at Object.next (main-es2015.b00b58464a0855ce1138.js:1:4034603)
at o (main-es2015.b00b58464a0855ce1138.js:1:4033343)
at l.invoke (polyfills-es2015.d2d950b2ab3b83bb6df9.js:1:7509)
at i.run (polyfills-es2015.d2d950b2ab3b83bb6df9.js:1:2921)
at polyfills-es2015.d2d950b2ab3b83bb6df9.js:1:13853
at l.invokeTask (polyfills-es2015.d2d950b2ab3b83bb6df9.js:1:8127)
at i.runTask (polyfills-es2015.d2d950b2ab3b83bb6df9.js:1:3536)
at m (polyfills-es2015.d2d950b2ab3b83bb6df9.js:1:10121)

This error happens in Amplify code (the method that does the call to oauth2/token) which then returns a 400 - Bad Request error code.

We then upgraded our dependencies to the latest versions (core to 4.7.6 and auth to 4.6.8) even though the version we're using (4.3.3) works perfectly fine in the (non-mobile) web app that is also part of the platform we're building. Upgrading to the latest versions also changes nothing.

We then removed the Zone-snippet again from polyfills.ts. We then still get the above invalid_request error immediately followed by the original error described by @WouterVDW12 in the first post. So, it does indeed seem that the Zone-snippet at least suppresses the original error but now we are a bit in the dark as to where this invalid_request is coming from (this was absent when we first ran into the original issue). It is not like the actual call itself to start the flow is terribly complex as it is literally a method behind a button that contains a single line:

Auth.federatedSignIn({ customProvider: 'name-of-the-provider' });

We do notice some weird things (now looking with multiple devs). Some see 2 calls to the token endpoint:

While others only see one:

Notice also the difference with regards to the code_verifier which is not always present (not for those with a single call and only once for those with 2 calls). A snippet from the Cognito config (variables replaced in the CI/CD pipelines):

cognito: {
region: '${COGNITO_REGION}',
userPoolId: '${COGNITO_USERPOOLID}',
userPoolWebClientId: '${COGNITO_USERPOOLWEBCLIENTID}',
oauth: {
domain: 'baseapp-xxxxxxxxxxxx.auth.eu-central-1.amazoncognito.com',
scopes: ['email', 'openid' ],
redirectSignIn: 'commissioning://app/building',
redirectSignOut: 'commissioning://app/login',
responseType: 'code',
},

Have you had more success in the meantime in getting a basic Angular/Cordova app up and running?