I did app with ionic 2 with facebook Login. It works fine. But I mix between angularfire2 and firebase and it's not correct.
this is my code
import { Component,ViewChild } from '@angular/core';
import { Platform,Nav, LoadingController} from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';
//import pages
import { HomePage } from '../pages/home/home';
import { LoginPage } from '../pages/login/login';
import { SignupPage } from '../pages/signup/signup';
import { TabsPage } from '../pages/tabs/tabs';
import { AboutPage } from '../pages/about/about';
import {StudentsPage} from '../pages/students/students';
//import plugins
import firebase from 'firebase';
//import {AngularFire, FirebaseListObservable} from 'angularfire2';
@Component({
template: `<ion-nav [root]="rootPage"></ion-nav>`
})
export class MyApp {
@ViewChild(Nav) nav: Nav;
public rootPage:any;
//ref firebase
public semesters:any;
public userProfile: any;
//user variables
public currentUser: any;
public id_user:any;
public reg_boolean:any;
public department:any;
public year:any;
public semester:any;
public semesterdetails:any;
constructor(platform: Platform, public loadingCtrl: LoadingController) {
firebase.initializeApp({
apiKey: "AIzaSyDOpRshkjuy_tGXSzw34RFHXmAFelyAUt0",
authDomain: "haversami.firebaseapp.com",
databaseURL: "https://haversami.firebaseio.com",
storageBucket: "haversami.appspot.com",
messagingSenderId: "704224601349"
});
//get user details
// this.currentUser = firebase.auth().currentUser;//to uncomment
this.userProfile = firebase.database().ref('/users');
this.semesters = firebase.database().ref('/Semesters/sem');
// this.id_user=this.af.auth.getAuth().uid; // to uncomment
this.currentUser='1qfcMAQnglX9jsW5GdLpPko1HqE2';
this.getUserProfile().on('value', (data) => {
this.userProfile = data.val();
this.reg_boolean = this.userProfile.reg_boolean;
this.department=this.userProfile.depName;
this.year=this.userProfile.year;
console.log("enter:"+this.department+this.year);
console.log(this.reg_boolean);
});
this.getSemester().on('value', (data) => {
this.semesterdetails = data.val();
this.semester = this.semesterdetails.sem_id;
console.log(this.semester);
});
//check if user connected
firebase.auth().onAuthStateChanged((user) => {
var that=this;
if (user) {
if(this.reg_boolean=="true"){
console.log("adirush");
this.nav.setRoot(TabsPage,{
dep:this.department,year:this.year,semester:this.semester
})
//this.rootPage=TabsPage;
this.rootPage=TabsPage;
}
else{
this.rootPage = SignupPage;
}
console.log("I'm here! HomePage");
} else {
this.rootPage = LoginPage;
console.log("I'm here! LoginPage");
}
});
let loader = this.loadingCtrl.create();
loader.present();
this.listenToUserStatusUpdate(loader);
let fireBaseUser = firebase.auth().currentUser;
console.log(fireBaseUser);
if (fireBaseUser) {
if(this.reg_boolean=="true"){
console.log("adirush");
this.nav.setRoot(TabsPage,{
dep:this.department,year:this.year,semester:this.semester
})
this.rootPage=TabsPage;
}
else{
this.rootPage = SignupPage;
}
console.log("I'm here! HomePage");
} else {
this.rootPage = LoginPage;
console.log("I'm here! LoginPage");
}
//this.rootPage = fireBaseUser ? SignupPage : LoginPage;
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
StatusBar.styleDefault();
Splashscreen.hide();
});
}
listenToUserStatusUpdate(loader: any) {
firebase.auth().onAuthStateChanged((user) => {
if(loader)
loader.dismiss();
console.log("The User:", user);
if (user) {
if(this.reg_boolean=="true"){
console.log("adirush");
this.nav.setRoot(TabsPage,{
dep:this.department,year:this.year,semester:this.semester
})
this.rootPage=TabsPage;
}
else{
this.nav.setRoot(SignupPage);
}
} else {
this.nav.setRoot(LoginPage);
}
});
}
getUserProfile(): any {
//return this.userProfile.child(this.currentUser.uid); to uncomment
return this.userProfile.child(this.currentUser);
}
getSemester():any{
return this.semesters.child("0");
}
}
As you can see I have duplication parts of code. It works, but not that good. I want it to be in angularfire2.
Some things I want to do:
- I want to change the page to work with angularfire2, instead of firebase.
- I want auth in Angularfire2 instead of firebase.
- if user logged it , it check from firebase if the reg_bool is true. If true it got to tabspage with params, if not to signupage.
- if not logged in, it goes to loginPage.
- if user already logged it it goes to db and get details year,department,uid;
that's my firebase structure