Error using FirebaseUI Facebook Auth in Cordova app - angularjs

Question

I am trying to set up Facebook and Google authentication through FirebaseUI in my Cordova/PhoneGap app, and I am receiving an error when the "Sign in with X" buttons are clicked. The error states the following:
Refused to display 'https://www.facebook.com/login.php?skip_api_login=1&api_key=643683385780436…_&display=page&locale=en_US&logger_id=05e536a7-cf68-44a3-825b-63dd3edd5b0a' in a >frame because it set 'X-Frame-Options' to 'DENY'.
After a little research I've learned that the X-Frame option is set by the provider, and I cannot change it. I've looked through threads about how to work around this, but the answers either don't solve the problem or go over my head. Any explanation would be much appreciated.
My code is as follows:
login controller:
app.controller("loginCtrl", function ($scope, $state, $rootScope, $firebaseAuth, $location) {
// Firebase config.
var config = {
apiKey: "",
authDomain: "",
};
// FirebaseUI config.
var uiConfig = {
'queryParameterForWidgetMode': 'mode',
'signInSuccessUrl': '/home',
'signInOptions': [
firebase.auth.FacebookAuthProvider.PROVIDER_ID,
firebase.auth.GoogleAuthProvider.PROVIDER_ID
],
// Terms of service url.
//'tosUrl': '<your-tos-url>',
'callbacks': {
'signInSuccess': function (currentUser, credential, redirectUrl) {
// Do something.
// Return type determines whether we continue the redirect automatically
// or whether we leave that to developer to handle.
console.log('success');
return true;
}
}
};
// Initialize the FirebaseUI Widget using Firebase.
var app = firebase.initializeApp(config);
var auth = app.auth();
var ui = new firebaseui.auth.AuthUI(auth);
// The start method will wait until the DOM is loaded.
ui.start('#firebaseui-auth-container', uiConfig);
});
login.html
<ion-view title="Sign In">
<ion-content>
<div>
<center>
<br />
<h1>Sign In</h1>
</center>
<div id="firebaseui-auth-container"></div>
</div>
</ion-content>
relevant index.html
<!-- FirebaseUI for Facebook Auth -->
<script src="https://www.gstatic.com/firebasejs/live/3.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/live/3.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/ui/0.4.0/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/0.4.0/firebase-ui-auth.css" />
Thanks!
Sam

Answer 1

I am also trying to set up Facebook and Google authentication through FirebaseUI in my Cordova/PhoneGap app. However, while reading the FirebaseUI for Web — Auth docs I found the following:
FirebaseUI fully supports all recent browsers. Signing in with
federated providers (Google, Facebook, Twitter, Github) is not yet
supported in non-browser environments (Cordova, React Native,
Ionic...) nor Chrome extensions.
So, unfortunately it seems that using FirebaseUI with a Cordova app is not supported yet.