Working with AngularFire2

tutorials
1

Hi

For anyone who’s interested I’ve published the following tutorials on working with AngularFire2 to manage Firebase data in Ionic 2.

Hope these are useful to any Ionites out there making their initial forays into using Ionic 2 with Firebase.

Part 1: http://masteringionic2.com/blog/2017-02-23-integrating-firebase-into-an-ionic-2-app-with-angularfire2-part-1/

Part 2: http://masteringionic2.com/blog/2017-02-24-integrating-firebase-into-an-ionic-2-app-with-angularfire2-part-2/

4 Likes
2

Hi @saintsatplay,

Thank you for the excellent tutorials!
Have you had a need to use Firebase Authentication with Ionic 2 and AngularFire2?
I’m running into issues where authentication works fine when running the app with ionic serve in the browser, but having problems when the app runs in Ionic View or on the actual device.

2 Likes
3

Hi vkniazeu

Thanks for the kind comment.

I have used AngularFire2 for authenticating Firebase with Ionic 2.

Do you get any errors or messages returned from AngularFire2 when running the app on a device?

4

I haven’t gotten this far yet as it’s taking me forever to get the Android Emulator going on my machine.
So far I’ve tried Google Auth with AngularFire2 and it works in the browser, but does not react at all with Ionic View.
Potentially, it’s the Ionic View’s limitation.
I’ll keep trying and keep this thread updated.
Thanks!

5

Hi @saintsatplay,

The issue boils down to what’s described at auth.login() Error “location.protocol” must be http or https and related GitHub issues:



Were you ever able to use AngularFire2 authentication directly in an Ionic 2 project?
Or did you resort to handling it manually?
https://firebase.google.com/docs/auth/web/facebook-login

Thank you!

6

auth works for me https://github.com/aaronksaunders/AngularFire2-Ionic2-Facebook

2 Likes
7

Aaron, does it work in Ionic View for you as well?

Having done some research, I would assume that it wouldn’t, because Ionic View does not support/include all native plugins.

8

Having spent some time on this, I think these resources will be helpful for someone working to integrated social logins with or without AngularFire2:

Configuring AngularFire2 Auth with Ionic2
general, and using Facebook as an example

Ionic Native: Facebook
full details at GitHub - jeduan/cordova-plugin-facebook4: Use the latest Facebook SDK in your Cordova and Ionic projects
sample at GitHub - aaronksaunders/AngularFire2-Ionic2-Facebook: Facebook Login w/AngularFire2 and Ionic2

Ionic Native: Google
full details at GitHub - EddyVerbruggen/cordova-plugin-googleplus: ➕ Cordova plugin to login with Google Sign-In on iOS and Android

[Ionic 2 | Google authentication using Firebase and Angularfire on Android device] (http://vpt-deeplearner.tech/2016/10/17/ionic-2-googleplus-authentication-using-firebase-and-angularfire-on-android-device/)
full sample of everything needed for Google, although the AngularFire2 subscription is a bit strange.

As a summary:

  • AngularFire2 Auth API works only in browsers, but will NOT work in Ionic 2 apps deployed as mobile apps
  • For mobile apps, corresponding native Ionic/Cordova plugins must be installed and configured
  • Raw Firebase API methods need to be called to connect native auth results with Firebase auth. E.g.:
const provider = firebase.auth.GoogleAuthProvider.credential(googlePlusUserData.idToken);
firebase.auth().signInWithCredential(provider) ...

  • Essentially, auth is handled via the native plugin, and then the auth token is passed on to Firebase via raw APIs to register the authenticated user.

  • AngularFire2 Auth Observable can be used to watch for the auth chahges, but its login and logout methods can be used only if the Ionic app is to be run in the browser.

  • Ionic View does NOT support this authentication flow as it only support a subset of native Ionic/Cordova plugins, and does not seem to include the Faceboo

3 Likes
9

I’m developing an IONIC 2 app for which I try to save datas on a Firebase database.

All works well localy, but as you said in these posts, when try to upload to ionic view all crashes.

Do you have any updates on this subject ???

It worries me as I dont know if I will not have the same thing on PROD when times comes for PROD.

Thanks

10

Ionic View is NOT the same as your production. If you want to test in production, deploy your app to a real device or at least a simulator/emulator. Ionic View does NOT support all features as it runs the apps in sort of a container.
This info is in the docs. Read up! :slight_smile:

11

Has anyone tried phone auth of Firebase with Ionic? It works on web but doesn’t work on device because of recaptcha issue. Do we have a workaround?