Exploring the Capacitor Secure Preferences API

Securing sensitive data in mobile applications is crucial for protecting user privacy and maintaining trust. With the Capacitor Secure Preferences plugin from Capawesome, developers can implement robust secure storage solutions in their Ionic and Capacitor applications, leveraging native security features like Android Keystore and iOS Keychain to protect sensitive information such as authentication tokens, passwords, and personal data through a unified API that ensures data remains encrypted and secure across all platforms.

Installation

To install the Capacitor Secure Preferences plugin, please refer to the Installation section in the plugin documentation.

Usage

Let's explore the key features of the Capacitor Secure Preferences API and how to implement them in your Ionic applications.

Storing Values

The primary method of the Capacitor Secure Preferences API is to securely store sensitive data. Use the set(...) method to store key-value pairs:

import { SecurePreferences } from '@capawesome-team/capacitor-secure-preferences';

const set = async () => {
    await SecurePreferences.set({
        key: 'token',
        value: 'value'
    });
};

The plugin automatically handles encryption and storage using the most secure method available on each platform. On Android, data is encrypted using the Android Keystore, while on iOS, it's stored in the iOS Keychain.

Retrieving Values

To retrieve stored data, use the get(...) method:

import { SecurePreferences } from '@capawesome-team/capacitor-secure-preferences';

const get = async () => {
    const { value } = await SecurePreferences.get({
        key: 'token',
    });
    console.log(value)
};

The get(...) method returns an object with a value property that contains the stored data, or null if no data exists for the specified key. Always handle the case where the requested key doesn't exist to prevent application errors.

Retrieving Keys

To retrieve all keys stored in secure preferences, you can use the keys() method. This method returns an array of all keys currently stored, allowing you to manage them as needed.

import { SecurePreferences } from '@capawesome-team/capacitor-secure-preferences';

const keys = async () => {
    const { keys } = await SecurePreferences.keys();
    console.log(keys)   // ['token', 'password', ...]
};

Do not use this method to check if a specific key exists, as it returns all keys. Instead, use the get(...) method to check for the existence of a specific key and retrieve its value.

Deleting Values

You can delete values from secure storage either one at a time or all at once, depending on your needs.

To remove a specific key-value pair, use the remove(...) method:

import { SecurePreferences } from '@capawesome-team/capacitor-secure-preferences';

const remove = async () => {
    await SecurePreferences.remove({
      key: 'token',
    });
};

If you want to remove everything stored in secure preferences, you can use the clear() method. This method does not take any arguments and deletes all keys and values currently saved in secure storage. It’s useful for scenarios like logging out a user or resetting the app’s secure data.

import { SecurePreferences } from '@capawesome-team/capacitor-secure-preferences';

const clear = async () => {
    await SecurePreferences.clear();
};

Best Practices

When using Capacitor Secure Preferences plugin in your application, consider these best practices:

1. Store only Sensitive Data: Secure Preferences is meant to store sensitive or confidential information, such as tokens, passwords or personal identifiers. Avoid cluttering secure storage with large amounts of non-sensitive data.
2. Handle Missing or Deleted Data: Users might clear secure storage manually, reinstall the app or switch devices. Therefore, always check if a key exists before using its value and provide fallback flows if data is missing. A fallback flow can be re-prompting the user to log in or re-enter information.
3. Never Hardcode Sensitive Data or Keys: While Secure Preferences encrypts values (except for web platform), keys themselves are often stored as plain strings. Avoid giving away meaning in key names and never hardcode secrets or credentials directly into your app's source code. Instead, use generic key names that don't reveal the data's purpose.

Conclusion

The Capacitor Secure Preferences plugin provides a simple yet powerful way to protect sensitive data in your Ionic and Capacitor applications. By following best practices and leveraging platform-native security features, you can keep user data safe and maintain trust in your apps.

To stay updated with the latest updates, features, and news about the Capawesome, Capacitor, and Ionic ecosystem, subscribe to the Capawesome newsletter and follow us on X (formerly Twitter).

If you have any questions or need assistance with the Capacitor Secure Preferences Plugin, feel free to reach out to the Capawesome team. We're here to help you implement secure biometric authentication in your Ionic applications.