Customising localStorage option to work with Capacitor JS Storage plugin

[sts-ryan-holton]

Is your feature request related to a problem? Please describe.

👋 I'm using @nuxtjs/auth-next, more specificatly the v5 version on version 5.0.0-1624817847.21691f1 and need the ability to essentially replace the localStorage.setItem() and localStorage.getItem() references within the module with a custom storage option in order to make this plugin work with Nuxt JS where the Capacitor JS storage plugin is used so that I can persist state of a logged in user on the phone's storage, falling back to localStorage in a web browser.

Describe the solution you'd like to see

Currently, I'm not sure how I'd go about doing this, I feel like there should be some kind of configuration whereby the plugin exposes two or three functions which I can parse my integration into.

Describe alternatives you've considered

Regular localStorage does not work particuarly well in an app, I've previously tried this with Cordova, and whilst it's fine for the most part, when the app is updated or the phone crashes, the data is lost completely, where as this plugin works a treat when installed following a guide like this one for installing a Capacitor plugin

Also see below...

Additional context

In my Nuxt project where the Auth module is installed, this is how I'm currently using the Capacitor plugin, and wondered how I can get the Auth module to utilise the set & gets...

We need to get this plugged into each area of the Auth module that sets/gets for it to work with an app.

1. Create a plugin file for the plugin...

plugins/capacitor/storage.js

import { Storage } from '@capacitor/storage';

export default function ({ app }, inject) {
  inject('CapacitorStorage', Storage);
}

2. Add the plugin to the nuxt.config.js file...

nuxt.config.js

plugins: [
  { mode: 'client', src: '@/plugins/capacitor/storage.js' }
]

3. Use the following, somewhere in the Auth module in some custom config to set & get data with the above plugin...

// set data
const coordinates = await this.$CapacitorStorage.set({ key: 'some_key', value: 'some_valud' });

// get data by key
const { value } = await this.$CapacitorStorage.get({ key: 'some_key' });

// remove
await this.$CapacitorStorage.remove({ key: 'some_key' });

I think it would be great if someone is able to provide some snippet for how to customise the data storage under the hood for the Auth module to make it adaptable to other storage options like Capacitor, building hybrid apps with tools like this works wonders so I'm sure others will appriciate this enhancement! ❤️