How to create remember me using angular

In order to create remember me in angular we use the following code of check box

 
   Remember Me

 

on ng-click the rememberMe method will be called of your controller in which we will save the credentials entered in the textbox in the cookies our controller rememberMeController.js

var loginApp = angular.module("loginApp");

loginApp.controller('loginController', ["$scope", "$state", "$sanitize", "loginService", "$modal", "flashService", "$location", "sessionService", "rememberMeService", "Base64", function ($scope, $state, $sanitize, loginService, $modal, flashService, $location, sessionService, rememberMeService, Base64) {
    self = this;
       
    /**
     * @author:mayank
     * this condition checks whether the user is remembered or not
     * 
     */
    if (rememberMeService('7ZXYZ@L') && rememberMeService('UU@#90')) {
        self.user.email = Base64.decode(rememberMeService('7ZXYZ@L'));
        self.user.password = Base64.decode(rememberMeService('UU@#90'));
    }

    /**
     * @author:mayank
     * this method is called to remember the user's username and password
     * 
     */
    self.rememberMe = function () {
        if (self.remember) {

            rememberMeService('7ZXYZ@L', Base64.encode(self.user.email));
            rememberMeService('UU@#90', Base64.encode(self.user.password));
        } else {
            rememberMeService('7ZXYZ@L', '');
            rememberMeService('UU@#90', '');
        }
    };
}
])
 

In above code the base64 is used to save the encripted username and password in the cookies for this you can use angular-base64-upload module or write a manual code in your service as we have created base64 service. Now we will create the rememberMeService.js

 var loginApp = angular.module("loginApp");


    /**
     * @author:mayank
     * this service is called to remember user's credentials
     * 
     */
    loginApp.factory('rememberMe', function () {
        function fetchValue(name) {
            var gCookieVal = document.cookie.split("; ");
            for (var i = 0; i < gCookieVal.length; i++) {
                // a name/value pair (a crumb) is separated by an equal sign
                var gCrumb = gCookieVal[i].split("=");
                if (name === gCrumb[0]) {
                    var value = '';
                    try {
                        value = angular.fromJson(gCrumb[1]);
                    } catch (e) {
                        value = unescape(gCrumb[1]);
                    }
                    return value;
                }
            }
            // a cookie with the requested name does not exist
            return null;
        }
        return function (name, values) {
            if (arguments.length === 1) return fetchValue(name);
            var cookie = name + '=';
            if (typeof values === 'object') {
                var expires = '';
                cookie += (typeof values.value === 'object') ? angular.toJson(values.value) + ';' : values.value + ';';
                if (values.expires) {
                    var date = new Date();
                    date.setTime(date.getTime() + (values.expires * 24 * 60 * 60 * 1000));
                    expires = date.toGMTString();
                }
                cookie += (!values.session) ? 'expires=' + expires + ';' : '';
                cookie += (values.path) ? 'path=' + values.path + ';' : '';
                cookie += (values.secure) ? 'secure;' : '';
            } else {
                cookie += values + ';';
            }
            document.cookie = cookie;
        }
    });
 

And above service is called from your controller to remember your credentials in the cookies.

I hope this blog will be helpful for creating your remember me in angular.

THANKS