How to implement "Keep me logged in" functionality in AngularJS

Question

I am working on AngularJs application and back end is developed in Ruby on Rails. We have not used Devise gem for User authentication. Whole user authentication process is written in AngularJs. Now I want to add "Keep me logged in" functionality to my application using AngularJs.

Question: How I could implement "Keep me logged in" functionality in AngularJs for my application?

I am using angularJs for views and controllers and model are written in Ruby on Rails.

I have attached my session-controller.js below with views file.

session-controller.js

App.controller('SessionsCtrl',  function($rootScope, $scope, $http, $location, Facebook, $timeout, flash, $remember) {

    $scope.fbloginContent = "";

    $scope.googleloginContent = "";

    $scope.linkedinloginContent = "";

    $scope.$on('facebook_login', function() {
        $timeout(function() {
            $scope.fbloginContent = Facebook.getfbLoginContent();
            $scope.loginEmail = $scope.fbloginContent.email;
        }, 2000);
    });

    $scope.$on('google_login', function() {
        $timeout(function() {
            $scope.googleloginContent = helper.getGoogleloginContent();
            $scope.loginEmail = $scope.googleloginContent.email;
        }, 2000);
    });

    $scope.$on('linkedin_login', function() {
        $timeout(function() {
            $scope.linkedinloginContent = linkedInHelper.linkedinloginContent();
            $scope.loginEmail = $scope.linkedinloginContent['emailAddress'];
        }, 2000);
    });

    $scope.login = function() {
        if ($('#signInForm').valid()) {
            if ($scope.linkedinloginContent) {
                var param = {
                    "user" : {
                        "email" : $scope.linkedinloginContent['emailAddress'],
                        "password" : $scope.loginPassword
                    }
                };
            } else if ($scope.googleloginContent) {
                var param = {
                    "user" : {
                        "email" : $scope.googleloginContent.email,
                        "password" : $scope.loginPassword
                    }
                };
            } else if ($scope.fbloginContent) {
                var param = {
                    "user" : {
                        "email" : $scope.fbloginContent.email,
                        "password" : $scope.loginPassword
                    }
                };
            } else {
                if ($scope.loginEmail && $scope.loginPassword) {

                    var param = {
                        "user" : {
                            "email" : $scope.loginEmail,
                            "password" : $scope.loginPassword
                        }
                    };
                } else {
                    var param = {
                        "user" : {
                            "email" : $("#signInForm [name=email]").val(),
                            "password" : $("#signInForm [name=password]").val()
                        }
                    };
                }
            }
            $http({
                method : 'post',
                url : '/api/sessions',
                data : param
            }).success(function(data, status) {
                createCookie("access_token", data.user.access_token, '');
                createCookie("user", data.user.id, '');
                createCookie("name", data.user.name, '');
                if (data.user.temp_password == true && data.user.login_count == 1) {
                    $location.path('/changepassword');
                } else {
                    if (data.user.role == "SmartonAdmin") {
                        $location.path('/api/users');
                        flash.info = ($rootScope.config && $rootScope.config.login_message) ? $rootScope.config.login_message : "Logged in successfully";
                        goToTop();
                        if (data.user.login_count == 1) {
                            $('#intro-video').modal('show');
                        }
                    } else {
                        $location.path('/student_dashboard');
                        flash.info = ($rootScope.config && $rootScope.config.login_message) ? $rootScope.config.login_message : "Logged in successfully";
                        goToTop();
                        if (data.user.login_count == 1) {
                            $('#intro-video').modal('show');
                        }
                    }
                }
            }).error(function(data, status) {
                flash.error = data.errors;
                goToTop();
            });
        }
    };

    $scope.validations = function() {

        $('#signInForm').validate({
            rules : {
                email : {
                    required : true,
                    email : true
                },
                password : {
                    required : true,
                }
            },
            messages : {
                email : {
                    required : "Email can't be blank.",
                    email : "Email must be in the format of name@domain.com.",
                    remote : "Email already exists."
                },
                password : {
                    required : "Password can't be blank.",
                    minlength : "Password should have minimum  of 8 characters.",
                    maxlength : "Password should not exceed more than 15 characters."
                }   
            },
            errorPlacement : function(error, element) {
                error.insertBefore('.errorMsg1');
            }
        });

    };

    $scope.validations();

    $("#loginemail").keyup(function() {
        if (!this.value) {
            $(".errormsg").css("display", "none");
        }
        if (!(/^[a-zA-Z0-9._-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]{2,5}$/i.test(this.value))) {
            $(".errormsg").css("display", "none");
        }
    });

    $("#loginpassword").keyup(function() {
        if (!this.value) {
            $(".errormsg").css("display", "none");
        }
    });

    $scope.showForgotPasswordForm = function() {
        $('#signInForm').css('opacity', '0.5');
        $('#forgotPassForm').show();
    };

   $scope.remember = false;
        if ($remember('email') && $remember('password') ) {
            $scope.remember = true;
            $scope.email = $remember('email');
            $scope.password = $remember('password');
        }
        $scope.rememberMe = function() {
            if ($scope.remember) {
                $remember('email', $scope.email);
                $remember('password', $scope.password);
            } else {
                $remember('email', '');
                $remember('password', '');
            }
        };

});

views file as Templates( AngularJs):

  <input type="checkbox" name="remember" class="signup-footage terms-condition " data-ng-   click="rememberMe()" data-ng-model="remember"> Remember Me

What I want that If user clicks "remember me" checkbox, then next time,user does need to logged in to system. How it can be achieved using AngualarJs?

Answer 1

You can persist this kind of option in the user's Local Storage, but be careful with what you put there, it should store an access token or encrypted data, avoid storing the user's credentials in plain text, refer to this link to see how you can use the Local Storage with angular: https://github.com/grevory/angular-local-storage

Hope that helps