Ionic Starter Firebase

Ionic Starter Firebase

Power backend and quickly develop apps with Firebase.

$10.00

Not yet rated
Felix He

Felix He

Member since 2015

Details

Version:
1.0
Size:
NaNmb
Ionic:
1.3.x
Platforms:
iOS, Android
Released:
5 years ago
Updated:
5 years ago
Category:
Starters
Tags:
firebase, auth, login, facebook, google

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.

Hey there! You'll need to log in before you can leave a comment here.

Oliver Kuchendorf

Oliver Kuchendorf   ·   5 years ago

Works absolute perfect for me, thank you for this starter. I was easy be able to get this work and combine it with my own app after reviewing your code. I just have one doubt about the facebook login. Is there any way to get after successful sign in the email and full name of the user and save in my own firebase db as user (not only in auth)? thx

Oliver Kuchendorf

Oliver Kuchendorf   ·   5 years ago

never mind... I found it.... just added email to the login request like this: facebookConnectPlugin.login(['public_profile','email']

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Juan David Nicholls

Juan David Nicholls   ·   5 years ago

To support firebase 3 on device, the best way is using ngCordovaOauth plugin, check my example! https://gist.github.com/jdnichollsc/17bae6581d405321937fe433410172c9

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Juan David Nicholls

Juan David Nicholls   ·   5 years ago

To support firebase 3 on device, the best way is using ngCordovaOauth plugin, check my example! https://gist.github.com/jdnichollsc/17bae6581d405321937fe433410172c9

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Oliver Kuchendorf

Oliver Kuchendorf   ·   5 years ago

Works absolute perfect for me, thank you for this starter. I was easy be able to get this work and combine it with my own app after reviewing your code. I just have one doubt about the facebook login. Is there any way to get after successful sign in the email and full name of the user and save in my own firebase db as user (not only in auth)? thx

Oliver Kuchendorf

Oliver Kuchendorf   ·   5 years ago

never mind... I found it.... just added email to the login request like this: facebookConnectPlugin.login(['public_profile','email']

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.