for the past 2-3 days i’ve been trying to integrate firebase with ionic 2 project…
the project works good in browser but didn’t worked when i used it on my android device.
And no separate tutorials are present to achieve the same.
Can anyone guide me is it possible to use fb/gogle integration with ionic 2 using firebasev3
yes i have tried this(may be the only tutorial for firebasev3 and ionic 2) but…it doest tell much about how to use firebase for autherization.
I think firebase3 does not match with ionic2.
I had tried that, it works on web, but does not work on android.
So i had with firebase2.
I’m not quite sure if it’s a good idea to start using Firebase v3 right away:
steida: While Firebase 3 has super nice new features, it’s still buggy so we can not upgrade.
The official library for Firebase and Angular 2 is also not quite ready yet:
AngularFire2 is currently not on new Firebase 3.0 SDK, but there is an update in progress.
However if you still want to experiment with Firebase 3 check out the upgrade guide for instructions on how to update your current code to work with Firebase 3.
1 Like
Full project posted here… https://github.com/aaronksaunders/ionic2firebase3
This sample shows using firebase 3.0.3 with Ionic2 for authentication, listening for state changes and retrieving data
import {Injectable} from '@angular/core';
import 'rxjs/Rx';
import {Observable} from "rxjs/Observable";
//import * as firebase from "firebase";
declare var firebase: any;
@Injectable()
export class FirebaseService {
constructor() {
// Initialize Firebase
var config = {
apiKey: "all-you",
authDomain: "all-you-all-you.firebaseapp.com",
databaseURL: "https://all-you-all-you.firebaseio.com",
storageBucket: "all-you-all-you.appspot.com",
};
firebase.initializeApp(config);
// check for changes in auth status
firebase.auth().onAuthStateChanged((_currentUser) => {
if (_currentUser) {
console.log("User " + _currentUser.uid + " is logged in with " + _currentUser.provider);
} else {
console.log("User is logged out");
}
})
}
logout() {
firebase.auth().signOut()
}
login(_username) {
var that = this
return new Observable(observer => {
return firebase.auth().signInWithEmailAndPassword(_username, "password")
.then(function (authData) {
console.log("Authenticated successfully with payload-", authData);
observer.next(authData)
}).catch(function (_error) {
console.log("Login Failed!", _error);
observer.error(_error)
})
});
}
getDataObs() {
var ref = firebase.database().ref('textItems')
var that = this
return new Observable(observer => {
ref.on('value',
(snapshot) => {
var arr = []
snapshot.forEach(function (childSnapshot) {
var data = childSnapshot.val()
data['id'] = childSnapshot.key
arr.push(data);
});
observer.next(arr)
},
(error) => {
console.log("ERROR:", error)
observer.error(error)
});
});
}
}
to login
import {Component, OnInit, OnDestroy} from "@angular/core";
import {NavController} from 'ionic-angular';
import {FirebaseService} from '../../lib/firebaseService'
@Component({
templateUrl: 'build/pages/home/home.html'
})
export class HomePage implements OnInit, OnDestroy {
auth: any = {};
items = [];
activeUser: String
constructor(private _navController: NavController, public FBService: FirebaseService) {
}
doLogout() {
this.FBService.logout()
this.activeUser = null
}
ngOnDestroy() {
console.log('ngOnDestroy');
}
ngOnInit() {
console.log('ngOnInit');
this.FBService.login("b@mail.com")
.subscribe((data: any) => {
console.log("the data", data.email)
this.activeUser = data.email
this.FBService.getDataObs()
.subscribe((data: Array<any>) => {
console.log(data)
this.items = data
})
});
}
/*
pushPage(){
this._navController.push(SomeImportedPage, { userId: "12345"});
}
*/
}
2 Likes
Hi @aaronksaunders, how can i populate an array. i tried to list all the items on firebase database like you did in firebase2ioni2-sample.
I get this error. not sure why is that and also how to solve it.
TypeError: Cannot read property ‘parameters’ of undefined
Yes , see a full tutorial here =>
Dont forget to subscribe
2 Likes
Hi Aaron,
Any chance of upgrading the ionic 2 firebase 3 project to work with Ionic rc ? Thank you !!
My temporary fix for this,
May be till firebase 3 is released in official npm as @types.
Try the following link, that works for me, but I’m having problems with RC0 android build, I don’t know if with AngularFire or with LocalStorage plugin.
https://playcode.org/getting-started-with-ionic-2-rc0-firebase-3-angularfire-2/
However, I hope future integration be easier, it was easier with the beta version than now.
@alejandrocao the project I have listed above resolves the issue and the updated type definitions are included in the latest npm package for firebase…, please see the instructions listed in the project readme. https://github.com/aaronksaunders/ionic2rc0-firebase/blob/master/README.md
@aaronksaunders https://forum.ionicframework.com/users/aaronksaunders the
code you linked is for firebase integration, the one I linked is for using
angularfire2, could be?
but isn’t Typescript using @types and not typings? I dont even have typings installed in my project now. Is this the only way?
anyone checked Out?
I tried this tutorial using 2.0.0-rc.2 and it works!
1 Like