Ionic Starter Firebase

Ionic Starter Firebase is basic angularfire setting and user signin starter. It's make Ionic integrate with firebase quick and simple.

Install Dependency

you should install these library first:

$ bower install angularfire --save
$ bower install angular-messages --save

and add at index.html

<!-- angular messages -->
<script src="lib/angular-messages/angular-messages.min.js"></script>

<!-- Firebase -->
<script src="lib/firebase/firebase.js"></script>

<!-- AngularFire -->
<script src="lib/angularfire/dist/angularfire.min.js"></script>

then, inject to app:

angular.module('starter', ['ionic', 'ngMessages', 'firebase', ...

User auth.js and utils.js

add to index.html:

<!-- ionic starter firebase -->
<script src="js/auth.js"></script>
<script src="js/utils.js"></script>

inject to app:

angular.module('starter', ['ionic', 'ngMessages', 'firebase',
'starter.auth', 'starter.utils', ...

setting "stateChange" listener so if need redirect, in app.js file:

$rootScope.$on("$stateChangeError", function(event, toState, toParams, fromState, fromParams, error) {
  // We can catch the error thrown when the $requireSignIn promise is rejected
  // and redirect the user back to the home page
  if (error === "AUTH_REQUIRED") {
    $state.go("sign-in");
  }
});

$rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams) {
  if((toState.name === "sign-in" || toState.name === "sign-in-with-email" ) && $rootScope.firebaseUser){
    event.preventDefault();
  }
});


Auth.$onAuthStateChanged(function(firebaseUser) {

  // check user auth state
  if(firebaseUser){
    $rootScope.firebaseUser = firebaseUser;
    console.log("Log In");

  }
  else {
    // logout
    facebookConnectPlugin.logout(
      function(status){
        console.log("logOut success: " + status);
      },
      function(error){
        console.log("logOut error: " + error);
      }
    );
    $rootScope.firebaseUser = 0;
    $ionicHistory.clearCache();
    $ionicHistory.clearHistory();
    $state.go("sign-in");
    console.log("Log Out");
  }
});

Setting router

if state need auth:

resolve: {
  // controller will not be loaded until $waitForSignIn resolves
  // Auth refers to our $firebaseAuth wrapper in the example above
  "currentAuth": ["Auth", function(Auth) {
    // $waitForSignIn returns a promise so the resolve waits for it to complete
    return Auth.$requireSignIn();
  }]
}

wait for SignIn:

resolve: {
  // controller will not be loaded until $waitForSignIn resolves
  // Auth refers to our $firebaseAuth wrapper in the example above
  "auth": ["Auth", function(Auth) {
    // $waitForSignIn returns a promise so the resolve waits for it to complete
    return Auth.$waitForSignIn();
  }]
}

Firebase V3.0 problem

Currently Firebase V3 auth's signInWithPopup/Redirect do not work in cordova apps, you can check discuss at: https://groups.google.com/forum/#!msg/firebase-talk/mC_MlLNCWnI/cL0OnL4hAwAJ On next firebase version, these problem may fixed. But on this starter, I choose use cordova-plugin-facebook4 for social signin.

Install cordova-plugin-facebook4

$ cordova plugin add cordova-plugin-facebook4 --save --variable APP_ID="581547675358171" --variable APP_NAME="Ionic Starter Firebase Login"

Install cordova-plugin-googleplus

before install, you need Creating the Google Developers Console project: https://developers.google.com/+/mobile/ios/getting-started

get REVERSED_CLIENT_ID: https://developers.google.com/mobile/add?platform=ios&cntapi=signin Enable Google services for your app to get a configuration file GoogleService-Info.plist which contains the REVERSED_CLIENT_ID that you will need during the plugin’s installation.

then install cordova-plugin-googleplus:

$ cordova plugin add cordova-plugin-googleplus --save --variable REVERSED_CLIENT_ID=myreversedclientid

Twitter?

I find that Ionic Native recommend twitter-connect-plugin: http://ionicframework.com/docs/v2/native/twitter-connect/ But I really don't like rely on more 3 part service, so I find other cordova-plugin for twitter.

Ionic V2

Has plan publish Ionic V2 version.