Ionic and Firebase auto login

Question

Since firebase did their major update, it has been nearly impossible for me to find answers to basic questions. Even using their docs.

My question is how do I allow my users to sign in once on my app and stay logged in indefinitely or for a set amount of time?

Once I have a user logged in, how can I access their data? Like first and last name? Do I have to create a database and link to the userID somehow?

I am also struggling to understand how "firebase.auth().signInWithEmailAndPassword(email, password)" works since I am not providing it my firebase url. is it pulling it from the config obj on the index page?

Here is my angular code:

appControllers.controller('userCtrl', ['$scope', '$rootScope', '$ionicPlatform', '$cordovaDevice', '$mdToast', '$mdBottomSheet', '$timeout', '$stateParams', '$state', 'LogIn', 'SignUp', '$http', '$firebaseAuth',
  function($scope, $rootScope, $ionicPlatform, $cordovaDevice, $mdToast, $mdBottomSheet, $timeout, $stateParams, $state, LogIn, SignUp, $http, $firebaseAuth) {
    var devid;
    $scope.id = "1";
    $scope.errorMsg = "";

    // timeout to get device ID
    $timeout(function() {
      document.addEventListener("deviceready", onDeviceReady, false);

      function onDeviceReady() {
        console.log(device.cordova);
        $scope.id = $cordovaDevice.getUUID();
        return $scope.id;
      }


    }, 1000);

    // watches change in DEVID
    $scope.updateID = function() {
      devid = $scope.id;
      console.log(devid);
      return devid;
    };

    $scope.initialForm = function() {
      $scope.moveBox = function() {
          // $("#signupbox").fadeOut();
          $('#signupbox').animate({
            'marginTop': "+=170px" //moves down
          });

          $timeout(function() {
            $state.go('app.signup');
          }, 500);

          $timeout(function() {
            $('#signupbox').animate({
              'marginTop': "-=170px" //moves down
            });
          }, 1000);
        } // end animate

      // Toast for empty Fields
      $scope.showAlert = function(menuName, time) {
          //Calling $mdToast.show to show toast.
          $mdToast.show({
            controller: 'toastController',
            templateUrl: 'toast.html',
            hideDelay: time,
            position: 'top',
            locals: {
              displayOption: {
                title: menuName
              }
            }
          });
        } // End showToast.

      // check LogIn
      var em, pw;
      $scope.user = {};
      $scope.updateEmail = function() {
        em = $scope.user.email;
        console.log(em);
        return em;
      };
      $scope.updatePass = function() {
        pw = $scope.user.pass;
        console.log(pw);
        return pw;
      };

      // Password Validation
      $scope.validatePass = function(ppw) {
        if (ppw.length < 8) {
          $scope.errorMsg = "Password must be at least 8 characters long";
        }
      };

      // start login
      $scope.logInNow = function() {
        var sdata = {
          em: em,
          pw: pw
        };

        if (pw == "" || pw == null) {
          $scope.errorSignIn = "Fields cannot be blank";
        }
        // FIREBASE LOGIN
        else {
          firebase.auth().signInWithEmailAndPassword(sdata.em, sdata.pw)
            .then(function(authData) {
              console.log("Logged in as:", authData.uid);
              $state.go('app.types');
            }).catch(function(error) {
              console.error("Authentication failed:", error);
              $scope.errorSignIn = "Email or Password is invalid";
            });
        }
      }



    };

    $scope.initialForm();




  }
]);

pr0gramist pr0gramist · Accepted Answer · 2016-08-21T01:11:40

Staying logged-in forever is default behaviour, but it is all about cookies, so if Ionic clears cookies the user get logout. I'm not into Ionic so I guess you need to figure it out whether it is something with Ionic. Related Ionic blog post. If you want to logout user at some point you can do this by setting a timer and just logout user after X time passed. Note that this is a client-side operation.

In my web app I did something like this:

firebase.auth().onAuthStateChanged(function(user) {
if (user) {
  $scope.photoURL = user.photoURL;
  $scope.name = user.displayName;
  $scope.logged_in = true;
} else {
  $scope.photoURL = "";
  $scope.name = "";
  $scope.logged_in = false;
}
});

It works, since every time user enter app the state is changing I always have correct data (Firebase User Interface). I remember there was another way to make it, but I had some issues.

Firebase is first configured and then initialized and every call you do on your app is configured for your project. So yes it is pulling from config.

By the way. Are you using the new docs like https://firebase.google.com/docs/. I am asking because they are actually pretty nice.

Ionic and Firebase auto login

1 Answers