Is it possible to use firebase v3 in ionic 2


#1

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


#2

check this link www.webcake.co


#3

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.


#4

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.


#5

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.


#6

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"});
    }
  */
}

#7

hey @aaronksaunders thanks for the repo. please can you show to add the social connect?


#8

Hi @aaronksaunders, how can i populate an array. i tried to list all the items on firebase database like you did in firebase2ioni2-sample.


#9

I get this error. not sure why is that and also how to solve it.

TypeError: Cannot read property ‘parameters’ of undefined


#10

Yes , see a full tutorial here =>

Dont forget to subscribe


#11

Hi Aaron,

Any chance of upgrading the ionic 2 firebase 3 project to work with Ionic rc ? Thank you !!


#12

@tonyawad88 I am starting that process now… please follow this repo:


#13

My temporary fix for this,

May be till firebase 3 is released in official npm as @types.


#14

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.


#15

@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


#16

@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?


#17

but isn’t Typescript using @types and not typings? I dont even have typings installed in my project now. Is this the only way?


#18


anyone checked Out?


#19

Hey @Sperk are you having any issues with that tutorial?


#20

I tried this tutorial using 2.0.0-rc.2 and it works!