Facebook Login w/AngularFire2 and Ionic2
Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 1.0.0
ios-deploy version: 1.8.6
ios-sim version: 5.0.6
OS: macOS Sierra
Node Version: v5.0.0
Xcode version: Xcode 8.2.1 Build version 8C1002
See Issue here.... angular/angularfire#296
Looking for a More complete Ionic2 Firebase 3 solution with Authentication and Image Upload https://github.com/aaronksaunders/ionic2firebase3
Make sure you install the plugin correctly and configure your facebook app http://ionicframework.com/docs/v2/native/facebook/
I believe running ionic state restore
should get you going!
###Update Facebook Information
In package.json
{
"id": "cordova-plugin-facebook4",
"locator": "cordova-plugin-facebook4",
"variables": {
"APP_ID": "YOUR-APP-ID",
"APP_NAME": "YOUR-APP-NAME"
}
And also edit the information in the config.xml
file
<plugin name="cordova-plugin-facebook4" spec="~1.7.1">
<variable name="APP_ID" value="YOUR-APP-ID" />
<variable name="APP_NAME" value="YOUR-APP-NAME" />
</plugin>
Be sure you update the app with your credentials from Firebase Console
// In app.module.ts
import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { AngularFireModule } from 'angularfire2';
@NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
IonicModule.forRoot(MyApp),
AngularFireModule.initializeApp({
apiKey: "YOUR-API-KEY",
authDomain: "YOUR-AUTH-DOMAIN",
databaseURL: "https://YOUR-DATABASE-URL.com",
storageBucket: "YOUR-STORAGE-BUCKET.com",
}),
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [{ provide: ErrorHandler, useClass: IonicErrorHandler }]
})
export class AppModule { }
###Basic Email Login
This is pretty straigt forward
doEmailLogin(_creds) {
let providerConfig = {
provider: AuthProviders.Password,
method: AuthMethods.Password
};
this.af.auth.login(_creds, providerConfig)
.then((success) => {
console.log("Firebase success: " + JSON.stringify(success));
alert(JSON.stringify(success))
})
.catch((error) => {
console.log("Firebase failure: " + JSON.stringify(error));
alert(JSON.stringify(error))
});
}
###Facebook Login The magic is properly creating the credentials... for Facebook login.
Facebook.login(['email'])
.then((_response) => {
console.log(_response)
/// THIS IS THE MAGIC ....
// - See Documentation
// https://firebase.google.com/docs/reference/js/firebase.auth.FacebookAuthProvider#credential
//
let creds = firebase.auth.FacebookAuthProvider.credential(_response.authResponse.accessToken)
/////////////////////////
let providerConfig = {
provider: AuthProviders.Facebook,
method: AuthMethods.OAuthToken,
remember: 'default',
scope: ['email'],
};
this.af.auth.login(creds, providerConfig)
.then((success) => {
console.log("Firebase success: " + JSON.stringify(success));
alert(JSON.stringify(success))
})
.catch((error) => {
console.log("Firebase failure: " + JSON.stringify(error));
alert(JSON.stringify(error))
});
})
.catch((_error) => { console.log(_error) })
});
Saves the user to the database, this is where you would potentially store additional information on the user
_setUpUser(_credentials, _authData) {
var ref = this.af.database.object('APP/users/' + _authData.uid)
var data = {
"provider": _authData.providerData[0],
"avatar": (_credentials.imageUri || "missing"),
"displayName": _authData.email,
};
return ref.set(data).then(function () {
return data
}).catch(function (_error) {
return _error
})
}