How to store access token in Ionic Angular App local storage securely

This tutorial will guide you on how to store access token in Ionic Angular App in local storage securely. Let’s say you have chosen Ionic Storage to store token in Ionic App.

Local Storage Ionic Angular App

There are various options available to store data within Ionic App.

Ionic Offline Storage

Ionic Offline Storage is a cross-platform data storage option that works for both iOS and Android. It makes it easy to add offline storage to Ionic apps that is secure (encrypted on device using 256-bit AES) and provides advanced NoSQL data querying. But both the versions v1.0.x and v2.0.0 are Enterprise version and not open source.

Ionic Storage

This is another option that is available which is free and open source alternative to Ionic Offline Storage. It provides easy way to store Key/Value pairs and JSON objects.

If you are looking for free and open source and Ionic Storage is one of the option to store your tokens in Ionic Angular apps. Since it does not provide encryption option, you may need to find out any other plugin to encrypt data then use Ionic Storage to store your tokens securely.

Store access token in Ionic Angular App securely

There are many ways to encrypt your token before you store them in local storage. In this tutorial we are going to go through a plugin called Cordova-AES256. This plugin will allow you to perform AES 256 encryption and decryption.

Cordova-AES256

It’s a cross-platform plugin which supports both Android and iOS. The advantage of using this plugin is encryption and decryption are performed on the device native layer so that the performance is much faster. The entire operations is performed in the background thread.

To install the Cordova and Ionic Native plugins use the following commands

$ ionic cordova plugin add cordova-plugin-aes256-encryption

$ npm install --save @ionic-native/aes-256@4

Then add this plugin to your app’s module.

To perform the AES256 encryption you need to use the following function.

encrypt(secureKey, secureIV, data)

To perform AES256 decryption you need to use the following function.

decrypt(secureKey, secureIV, data)

Note, you need to use the following functions to generate secure key and secure IV based on password or unique information that is available like device id. Then use this secure key and secure IV generated to perform encrypt or decrypt your token data.

generateSecureKey(password)

generateSecureIV(password)

You need to make sure to save return values of above functions so that you could decrypt the token that you have saved in Ionic Storage in the future when required.

Generate Symmetric Key and use it for Encryption

This is another way for encryption and decryption i.e., to generate PrivateKey in device’s storage and use that key to encrypt or decrypt your token.Therefore, your key will be stored in secure place in the device and token will be stored in App’s local storage (Ionic Storage).

Ionic Secure Storage Plugin for Token data storage

Ionic Secure Storage plugin is another way to store your access tokens securely. This plugin gets, sets and removes key,value pairs from a device’s secure storage. And you can use with Apache Cordova and allows your application to securely store tokens on iOS & Android phones.

Note, the browser platform is supported as a mock only. Key/values are stored unencrypted in localStorage.

Limitations

Secure storage may not be good option since it’s no longer maintained and does not work on all devices and has limitations as well as mentioned in this thread.

Also android users must have a secure screen-lock set. In case of failure to initialize, the app developer should inform the user about the security requirements of her app and initialize again after the user has changed the screen-lock settings. You need to check if this requirement/behavior is OK with your app flow.

Also See: