Ionic / cloud- angular FacebookAuth gives an empty error

Question

I have added ion cloud services applications to the application and want to use my own FaceBook authentication.

import { FacebookAuth } from '@ionic/cloud-angular'; this.facebookAuth.login() 

When I run this function on my Android phone, as expected, I get a Facebook prompt to find out if my application can get permissions to read the profile and email. When I press YES, the function returns an empty ERROR object:

 Object {} 

I am sure that I caught this correctly, because when I select CANCEL at the FB prompt, I get this error object:

 Object {errorCode: "4201", errorMessage: "User cancelled dialog"} 

Note. I use a remote web inspector in chrome to see the full console. Unfortunately, since this requires a real device, I cannot do this. However, I hope someone has an idea why this could happen. I followed all these steps, including the FB developer settings, hashing, and ionic.io settings.

Answer 1

Well, this is stupid, but the first reason was that the FB user I was trying to log in with was not registered as a tester. Apparently, in this case, an empty error is returned by the plugin.

After adding as a tester, I got a real error (Andoird manifest dod does not allow Internet access). After fixing this problem again, I get an empty error.

So, my assumption is that some errors returned by the FB are not well reported by the plugin, so any other FB error can cause this problem.

UPDATE 23/04: It seems that there was a change from the FB side, now the FB login screen failed, but it gave an error regarding the hashing key. After fixing this problem, the FB login now works.

Answer 2

I did this and it works great on a real device. If you have any questions, please comment below.

Play with Git Repo

app.module.ts

 import { CloudSettings, CloudModule } from '@ionic/cloud-angular'; const cloudSettings: CloudSettings = { 'core': { 'app_id': 'd32c02d2' }, 'auth': { 'facebook': { 'scope': ['public_profile', 'email'] } } }; @NgModule({ declarations: [ ], imports: [ CloudModule.forRoot(cloudSettings) ], bootstrap: [IonicApp], entryComponents: [ ], providers: [ ] }) export class AppModule { } 

home.html

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

home.ts

 import { Component } from '@angular/core'; import { FacebookAuth, User } from '@ionic/cloud-angular'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { constructor(public facebookAuth: FacebookAuth, public user: User) { } fbLogin() { this.facebookAuth.login(); } }