Ionic Starter Firebase

Ionic Starter Firebase

Power backend and quickly develop apps with Firebase.

$10.00

Felix He

Felix He

Member since 2015

Details

Version:
1.0
Ionic:
1.x  
Platforms:
iOS, Android  
Released:
4 years ago
Updated:
4 years ago
Category:
Starters
Tags:
,

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

```

```

then, inject to app:

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

User auth.js and utils.js

add to index.html:

```

```

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/cL0OnL4hAwAJOn 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=signinEnable 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.