Best Practices for Storing Login Data in Angular and Ionic

My current approach involves storing user login credentials in local storage and checking for their existence at the start. If present, I validate them against the server; if not, I redirect to the login screen instead of the app.

Unfortunately, I've found that local storage is not reliable as it can be unexpectedly cleared by the operating system (as my experience with iOS has shown). This inconvenience forces users to repeatedly log in, potentially leading to password forgetting or frequent password changes.

I'm exploring alternative solutions such as SQLite, file storage, or cookies. Are there any standard implementations that could address this issue more effectively?

Thank you, EL

Answer №1

Utilizing local storage can be a great solution. How exactly are you storing data in local storage? It's important to consider expiration possibilities.

You might find this resource helpful: https://github.com/grevory/angular-local-storage

In addition, my suggestion would be to avoid storing passwords locally. Instead, it is recommended to authenticate with the server, obtain an authentication token, and save that securely.

Answer №2

Utilizing the angular-cache plugin for its capability to store objects in local storage.

https://github.com/jmdobry/angular-cache

This code snippet demonstrates my template for handling user login/logout functionalities.

angular.module('starter.services',[]).factory('Cache',function(CacheFactory){

  return {
    logIn : function(info){
      userCache = CacheFactory.get('userCache');

      if(userCache) CacheFactory.destroy('userCache');

      userCache = CacheFactory('userCache',{storageMode:"localStorage"});
      var put = userCache.put('user', info);
      return userCache;
    },
    checkLogIn : function(){
      var r = userInfo(CacheFactory);
      return r;
    },
    logOut : function() {
      var userCache = CacheFactory.get('userCache');

      if(userCache == undefined){
        userCache = CacheFactory('userCache',{storageMode:"localStorage"});
      }

      userCache.destroy();

      return userCache;
    }
  }
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Converting a string to an array within AngularJS's HTML

.filter('privateip',function() { return function(p) { p.split(','); return p } }) <tr ng-repeat="ins in instances"> <td><input type="checkbox" ng-model="icheckedList[ins.id]" ng-required=" ...

Using ng-options with the datalist tag is not supported. Here is how you can pass an

I am currently in the process of developing a mobile app using mobile-angular-ui, which combines Angular and Bootstrap. Within the login page of the app, users have the option to remember their login credentials (username and password), with the user data ...

View hyperlinks within a designated DIV container

I have a menu wrapped in a DIV element and I want to open the links from the menu in another DIV called TEST. So far, the only method I've found is using an iframe, but I'm looking for another solution, possibly with JavaScript (without using AJA ...

Creating identical class names for UL elements underneath LI using JavaScript

In my attempt to dynamically generate the class name within the ul element, I successfully achieved the expected result. The outcome can be viewed in the console of the snippet provided for reference. However, I'm facing a challenge when attempting t ...

I'm struggling to locate the target for the WaitTextForPresent command in Selenium IDE when testing an AJAX website. Can anyone offer

As a newcomer to JavaScript, Selenium IDE, and web development, I am currently learning about a website that uses an AJAX application at . I am trying to utilize the WaitTextForPresent command to detect when a unique chat message appears, but I am unsure o ...

Tips for dynamically loading a different favicon with each page load in React

Is there a way to dynamically change the favicon on every page reload in React? I have a collection of icons and I want one to be randomly selected each time the page refreshes. The code for loading favicons in the manifest.json file is as follows: " ...

Steps for Enabling or Disabling a Bootstrap-Select Dropdown based on Radio Button Selection using JavaScript and jQuery

I am facing an issue with implementing two radio buttons and a Bootstrap-select Dropdown. I need to dynamically enable/disable the dropdown based on the selection of the radio buttons using JavaScript. Below is the HTML code snippet: Here is the code snip ...

Tips for updating data-ng-init with a directive

Is there a way to automatically refresh the variable assigned in data-ng-init whenever the source data changes, without having to do it through the controller? I'm looking for a directive that can achieve this. Any suggestions or examples would be ap ...

"The debate over using 'stringly typed' functions, having numerous redundant functions, or utilizing TypeScript's string enums continues to divide the programming

I have a specific object structure that contains information about countries and their respective cities: const geo = { europe: { germany: ['berlin', 'hamburg', 'cologne'], france: ['toulouse', ' ...

Modifying website elements with JavaScript

Can someone assist me with getting a script to work on my website that will allow me to switch between four different sets of content using buttons labeled 1, 2, 3, and 4? I have tried using addClass and removeClass but cannot seem to get it right. Here i ...

"The fascinating world of asynchronous JavaScript: Promises and Del

I've been diving into Promises, but I'm a bit confused by this code snippet. Can you help clear things up for me? const promise = new Promise((resolve, reject) => { console.log('Promise started') resolve('Success') }) ...

Issue with Kaltura thumbnail video not rendering within a script tag in React, resulting in blank space instead

I have encountered an issue with a Kaltura Thumbnail embed in React. When I use the script tag in a basic HTML page, everything works fine. However, when I try to use the same script tag in React, it only shows an empty space instead of the video. On ins ...

I am attempting to establish a connection with the Converge Pro 2 system from Clearone using NodeJS node-telnet-client, but unfortunately, my efforts to connect have been unsuccessful

My connection settings are as follows: { host: '192.168.10.28', port: 23, shellPrompt: '=>', timeout: 1500, loginPrompt: '/Username[: ]*$/i', passwordPrompt: '/Password: /i', username: 'clearone ...

Converting the date format to DD MMMM YYYY using Moment.js

Encountering an issue where the date is showing as Invalid when trying to format it using moment.js. Code moment('18/01/2016').format("DD MMM YYYY")) Expected Output : 18 jan 2016 Instead, receiving invalid Date. Any assistance would be appre ...

`Receiving JSON data using AngularJS and Ionic: Fixing Errors`

Unable to display small JSON data from the server on an HTML file. Spent hours trying to troubleshoot but no luck. Any suggestions or ideas? Thank you for your help. JS File: (function() { var app = angular.module('myreddit', ['ionic&apos ...

The installation process for Cordova 4.0.0 is completing the setup for version 3.6

After updating to Cordova 4.0.0, I am facing an issue when running cordova platform add android. It seems to be fetching the 3.6.4 Cordova library instead of the latest version. What could be causing this? $ cordova -v 4.0.0 $ cordova platform add android ...

Begin ng-repeat from a specific object within an array of objects in AngularJS

In my AngularJS controller, I have an array of objects where I need to iterate starting from a specific object with a certain key:value pair. The iteration should be limited to 4 items. Below is the code for the controller: app.controller("products", ["$ ...

javascript navigation bar (with nested `<li>` elements containing additional `<ul>` elements)

I have successfully implemented a dynamic side category menu. $(document).ready(function () { $(' #cate_id2 > ul > #subcate_id4 > ul').hide(); $(' #cate_id2 > ul > #subcate_id4 ').hover(function ...

Steps to prevent multiple AJAX calls within a Bootstrap popover

I have a popover feature implemented on my website. Every time I click on an element, it triggers an AJAX request. However, I am facing an issue where two AJAX calls are being sent instead of just one. How can I fix this so that only one AJAX call is made? ...

Using JavaScript to create an array from information retrieved from an AJAX

Encountering difficulties in retrieving data from an AJAX file, I am attempting to modify the data source of a web application originally defined in JavaScript as: var ds = [ 'Sarah', 'John', 'Jack', 'Don', 'B ...