Skip to content

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

Open
@WouterVDW12

Description

@WouterVDW12

Before opening, please confirm:

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:
image
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

Metadata

Metadata

Assignees

Labels

AngularRelated to Angular 2+AuthRelated to Auth components/categoryfeature-requestRequest a new feature

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions