Ionic 4 - Facebook plugin returns 'User cancelled.' on iOS while trying to log in

Question

I am using Cordova Facebook plugin for Ionic 4 ( https://ionicframework.com/docs/native/facebook ).
Calling function facebook.login() catches 'User cancelled.' error on iOS,
however it works perfectly on Android.

I followed the advice of https://forum.ionicframework.com/t/facebook-login-error-user-cancelled-dialog-4201/101022 and wrapped the code around facebook.getLoginStatus() which returns me {status: "unknown"} response.

my code:

loginWithFacebook() {
    this.facebook.getLoginStatus().then((res) => {
       if (res.status === 'connected') {
          ...
       } else {
          this.facebook.login(['email', 'public_profile'])
          .then((response: FacebookLoginResponse) => {
              ...
          }).catch(err => console.log(err));
       }
    }).catch(err => console.log(err));
}

my package.json file:

  ...
  "private": true,
  "dependencies": {
    "@angular/common": "^7.2.2",
    "@angular/core": "^7.2.2",
    "@angular/fire": "^5.2.1",
    "@angular/forms": "^7.2.2",
    "@angular/http": "^7.2.2",
    "@angular/platform-browser": "^7.2.2",
    "@angular/platform-browser-dynamic": "^7.2.2",
    "@angular/router": "^7.2.2",
    "@ionic-native/call-number": "^5.11.0",
    "@ionic-native/camera": "^5.11.0",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/facebook": "^5.14.0",
    "@ionic-native/fcm": "^5.13.0",
    "@ionic-native/file": "^5.11.0",
    "@ionic-native/geolocation": "^5.10.0",
    "@ionic-native/in-app-browser": "^5.11.0",
    "@ionic-native/ionic-webview": "^5.11.0",
    "@ionic-native/launch-navigator": "^5.11.0",
    "@ionic-native/social-sharing": "^5.11.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^4.1.0",
    "@ionic/storage": "^2.2.0",
    "@ngrx/effects": "^7.0.0",
    "@ngrx/router-store": "^7.0.0",
    "@ngrx/store": "^7.0.0",
    "@ngrx/store-devtools": "^7.0.0",
    "call-number": "^1.0.1",
    "cordova-ios": "^5.0.1",
    "cordova-plugin-actionsheet": "^2.3.3",
    "cordova-plugin-camera": "^4.1.0",
    "cordova-plugin-dialogs": "^2.0.2",
    "cordova-plugin-facebook4": "^5.0.0",
    "cordova-plugin-fcm-with-dependecy-updated": "^3.0.0",
    "cordova-plugin-file": "^6.0.2",
    "cordova-plugin-geolocation": "^4.0.2",
    "cordova-plugin-inappbrowser": "^3.1.0",
    "cordova-plugin-x-socialsharing": "^5.4.7",
    "core-js": "^2.5.4",
    "es6-promise-plugin": "^4.2.2",
    "firebase": "^6.5.0",
    "moment": "^2.24.0",
    "mx.ferreyra.callnumber": "0.0.2",
    "rxjs": "~6.5.1",
    "tslib": "^1.9.0",
    "uk.co.workingedge.phonegap.plugin.launchnavigator": "^5.0.4",
    "zone.js": "~0.8.29"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.13.8",
    "@angular-devkit/build-angular": "~0.13.8",
    "@angular-devkit/core": "~7.3.8",
    "@angular-devkit/schematics": "~7.3.8",
    "@angular/cli": "~7.3.8",
    "@angular/compiler": "~7.2.2",
    "@angular/compiler-cli": "~7.2.2",
    "@angular/language-service": "~7.2.2",
    "@ionic/angular-toolkit": "~1.5.1",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~12.0.0",
    "codelyzer": "~4.5.0",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-ionic-keyboard": "^2.1.3",
    "cordova-plugin-ionic-webview": "^4.1.1",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~8.3.0",
    "tslint": "~5.17.0",
    "typescript": "~3.1.6"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-facebook4": {
        "APP_ID": "{{APP_ID}}",
        "APP_NAME": "{{APP_NAME}}",
        "FACEBOOK_ANDROID_SDK_VERSION": "5.0.2",
        "FACEBOOK_HYBRID_APP_EVENTS": "false"
      },
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-camera": {
        "ANDROID_SUPPORT_V4_VERSION": "27.+"
      },
      "cordova-plugin-file": {},
      "uk.co.workingedge.phonegap.plugin.launchnavigator": {
        "GOOGLE_API_KEY_FOR_ANDROID": "{{GOOGLE_API_KEY_FOR_ANDROID}}",
        "OKHTTP_VERSION": "3.10.0",
        "LOCATION_USAGE_DESCRIPTION": "{{LOCATION_USAGE_DESCRIPTION}}"
      },
      "mx.ferreyra.callnumber": {},
      "cordova-plugin-inappbrowser": {},
      "cordova-plugin-x-socialsharing": {
        "ANDROID_SUPPORT_V4_VERSION": "24.1.1+",
        "PHOTO_LIBRARY_ADD_USAGE_DESCRIPTION": "{{PHOTO_LIBRARY_ADD_USAGE_DESCRIPTION}}",
        "PHOTO_LIBRARY_USAGE_DESCRIPTION": "{{PHOTO_LIBRARY_USAGE_DESCRIPTION}}"
      },
      "cordova-plugin-geolocation": {},
      "cordova-plugin-fcm-with-dependecy-updated": {
        "FCM_CORE_VERSION": "16.0.9",
        "FCM_VERSION": "18.0.0",
        "GRADLE_TOOLS_VERSION": "2.3.+",
        "GOOGLE_SERVICES_VERSION": "3.0.0"
      },
      "call-number": {}
    },
    "platforms": [
      "ios"
    ]
  }

I tried the following:

• remove the iOS platform and then add it again;
• remove package-lock.json, node_modules and plugins folders, then run npm cache verify and npm install ;
• create a new facebook app;
• update @ionic-native/facebook to the latest version;
• remove the facebook app from the device;
• logout from all devices with facebook account security settings;

Still I have this problem

Did someone solve this one?

PS {{variables}} are actually filled in my code, so it's not a case

Answer 1

SOLVED by updating the cocoapods manager and reinstalling the plugin.

Steps:

• pod repo update
• sudo gem install cocoapods
• ionic cordova plugin remove cordova-plugin-facebook4 --variable APP_ID="YOUR_APP_ID" --variable APP_NAME="YOUR_APP_NAME"
• ionic cordova plugin add cordova-plugin-facebook4 --variable APP_ID="YOUR_APP_ID" --variable APP_NAME="YOUR_APP_NAME"