Ionic 2 Facebook Login - 'App Not Setup' &

Question

I am trying to implement the Facebook Login API from the Ionic Native library, and have a button in my application that opens up the Facebook login window. However, when that window opens on my iOS device, the following error first appeared.

Then, I began receiving a new error after executing the following commands in terminal:

$ ionic plugin add cordova-plugin-facebook4 --variable APP_ID="123456789" --variable APP_NAME="myApplication"
$ npm install --save @ionic-native/facebook

This issue finally resolved itself after 1 day of inactivity, and then I made my app public by clicking on this in the App Review tab of the Facebook Developers site.

Now, I am receiving yet another error, which should have been fixed by making the app public. Here is the error:

App Not Setup: The developers of this app have not set up this app properly for Facebook Login.

Here is the relevant code for this implementation. I have made sure to include the correct APP ID in all relevant variables, and the code, itself, is not causing any errors. It is simply the case that the login is not communicating with my app.

In package.json:

 {
  "name": "twine-app",
  "author": "Anthony Krivonos",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/animations": "^4.0.1",
    "@angular/common": "^4.0.1",
    "@angular/compiler": "^4.0.1",
    "@angular/compiler-cli": "^4.0.1",
    "@angular/core": "^4.0.1",
    "@angular/forms": "^4.0.1",
    "@angular/http": "^4.0.1",
    "@angular/platform-browser": "^4.0.1",
    "@angular/platform-browser-dynamic": "^4.0.1",
    "@angular/platform-server": "^4.0.1",
    "@angular/router": "^4.0.1",
    "@ionic-native/core": "^3.4.4",
    "@ionic-native/facebook": "^3.4.4",
    "@ionic/cloud-angular": "^0.11.0",
    "@ionic/storage": "1.1.7",
    "angular2-elastic": "^0.13.0",
    "firebase": "^3.7.5",
    "ionic-angular": "2.2.0",
    "ionic-native": "^2.9.0",
    "ionicons": "3.0.0",
    "reflect-metadata": "^0.1.10",
    "rxjs": "^5.2.0",
    "sw-toolbox": "3.4.0",
    "typescript": "^2.2.2",
    "zone.js": "0.7.2"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.1.4",
    "typescript": "2.0.9"
  },
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-statusbar",
    "cordova-plugin-console",
    "cordova-plugin-device",
    "cordova-plugin-splashscreen",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [],
  "description": "Twine: An Ionic project",
  "version": "0.0.1",
  "main": "index.js",
  "repository": {
    "type": "git",
    "url": "git+https://[e-mail]/twine-app/twine-app.git"
  },
  "license": "ISC"
}

In app.component.ts:

platform.ready().then(() => {
        let env = this;
        NativeStorage.getItem('user')
        .then(function (data) {
              env.nav.push(FeedPage);
              Splashscreen.hide();
        }, function (error) {
              env.nav.push(OnboardingPage);
              Splashscreen.hide();
        });
              StatusBar.styleDefault();
              StatusBar.overlaysWebView(false);
              Splashscreen.hide();
  });

In onboarding.ts (Code by Sampath):

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Facebook, FacebookLoginResponse } from '@ionic-native/facebook';


@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public fb: Facebook) {

  }

  fbLogin(): void {
    this.fb.login(['public_profile', 'user_friends', 'email'])
      .then((res: FacebookLoginResponse) => console.log('Logged into Facebook!', res))
      .catch(e => console.log('Error logging into Facebook', e));
  }

}

I have scoured several different websites and forums for solutions, and seemed to have come up with no way of fixing this error. Most answers suggest to add a new platform in the Facebook developer portal with the app's Site URL, but my app runs off localhost. Additionally, I have installed all necessary plugins. Does anyone understand what may be causing this issue? Thank you so much in advance.

Edit: DO NOT suggest that I should make the app public via the Facebook Developer portal, because my question clearly outlines that I have done so already. Thanks.

Edit 2: I have tried Sampath's solution, and login works perfectly. This reaffirms that there is an issue with the above code. However, I cannot seem to pinpoint it after days of work. Here's a screenshot.

Answer 1

Update:

It is working fine for me.It seems your issue with facebook's app settings section.Please let me know if you need any help on that section too.

Play with Git Repo.

home.ts

import { Facebook, FacebookLoginResponse } from '@ionic-native/facebook';


@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public fb: Facebook) {

  }

  fbLogin(): void {
    this.fb.login(['public_profile', 'user_friends', 'email'])
      .then((res: FacebookLoginResponse) => console.log('Logged into Facebook!', res))
      .catch(e => console.log('Error logging into Facebook', e));
  }

}

app.module.ts

import { HomePage } from '../pages/home/home';
import { Facebook } from '@ionic-native/facebook';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    Facebook
  ]
})
export class AppModule { }

home.html

<button ion-button block type="button" (click)="fbLogin()">Fb Login</button>

Old Answer

I can see 3 issues on your package.json file.

Issue 1:

You have to remove "ionic-native": "2.4.1", module from it.

Issue 2:

You have to use "@ionic/app-scripts": "1.1.4", instead of "@ionic/app-scripts": "1.0.0",

Issue 3:

You have to use "ionic-angular": "2.2.0", instead of "ionic-angular": "2.0.1",

After all above changes run npm i

Answer 2

I fixed it! In the end, my app was configured properly on the Facebook API, and the implementation by Sampath worked like a charm. Here was my issue:

The entire time, I had been running the Ionic 2 app off a directory in my iCloud Drive on my MacBook. Since iCloud consistently updates any minor file changes, I was never able to do a complete iOS build using ionic build ios, and had to exit early using ^C. By keeping my project in a directory outside my iCloud drive, which in this case was the directory under the username, I was able to do a complete build with no errors!

In short, check out Sampath's solution code, and make sure you are not running your Ionic 2 project off iCloud Drive.