Create new storage mechanism and provide ability to extend/modify existing ones

[sts-ryan-holton]

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

My current problem is that I'm implementing the Auth Module plugin into a Nuxt JS app whereby I'm utilising a different storage mechanism for mobile devices, more specifically the Capacitor JS storage plugin which utilises localStorage for the web, but phone storage for devices.

Describe the solution you'd like to see

Much like the option to create new schemes, I'd like to be able to:

1. Create my own storage interface
2. Extend an existing storage interface

I've looked in the storage docs, but can't find an option to change existing storage options or make a new one.

Ideally, this file: https://github.com/nuxt-community/auth-module/blob/dev/src/core/storage.ts should expose some generic methods such as set, get, remove and allow me to parse my own setting & getting of data, which I could then define as something like: storage: 'custom' in the Nuxt config and then the auth module would pass it's data to those exposed methods in my custom storage implementation.

Additional context

Would a scheme allow me to change the storage core files?

[ttkoma]

i need this feature too

[sts-ryan-holton]

@ttkoma have you got any workaround for this at the moment? Not sure what to do other that potentially forking the project and modifying the storage file to add a new one?

[ttkoma]

@ttkoma have you got any workaround for this at the moment? Not sure what to do other that potentially forking the project and modifying the storage file to add a new one?

@sts-ryan-holton I begin writing class proxy-wrapper for Pinia.
And nuxt plugin for replace in context default 'store'

[sts-ryan-holton]

Any chance of some kind of wrapper for this plugin? How could we implement it? I really feel that the auth-module can defiantly have a custom storage option, much like the custom schemes.

Not sure where the author is? Lot of recent open issues and not many replies, hopefully we get a response soon 😅

[ttkoma]

@sts-ryan-holton workaround maybe like this:

fakeVuexStore.ts

import { Context, Plugin } from "@nuxt/types";
import { defineStore } from "pinia";
import Vue from "vue";

interface IMutationPayload {
  key: string;
  value: any;
}

interface IAuthTinyStore<S> {
  readonly state: { [p: string]: S };

  registerModule(
    namespace: string,
    module: any,
    options: { preserveState?: boolean }
  ): void;

  commit(mutationName: string, payload: IMutationPayload): void;

  watch<T>(
    getter: (state: S, getters: any) => T,
    cb: (value: T, oldValue: T) => void,
    options?: any
  ): void;
}

export class FakeVuexAuthStore<S> implements IAuthTinyStore<S> {
  _ctx: Context;
  _namespace: string = "auth"; // equals with auth.vuex.namespace in nuxt.config
  _authStore: any;
  _watcherVM = new Vue();

  constructor(ctx: Context) {
    this._ctx = ctx;
  }

  private initCustomStore(id: string, initialState: {}) {
    // 1. PINIA Auth State
    const useAuthStore = defineStore({
      id,
      state: () => ({
        busy: false,
        ...initialState
      })
    });

    return useAuthStore;
  }

  // Fake vuex registerModule
  public registerModule(name: string, module: any, _options?: any) {
    this._namespace = name;

    // 1. Create Auth Store
    const useAuthStore = this.initCustomStore(this._namespace, module.state());
    this._authStore = useAuthStore(this._ctx.$pinia);
  }

  // Fake vuex state contain module 'auth'
  public get state() {
    return {
      // 2. implement full state getter
      [this._namespace]: (this._authStore?.$state ?? {}) as S
    };
  }

  public commit(mutationName: string, payload: IMutationPayload) {
    if (mutationName === `${this._namespace}/SET` && this._authStore) {
      // 3. implement state property setter
      this._authStore.$patch({
        [payload.key]: payload.value
      });
    }
  }

  // Fake vuex watch
  public watch<T>(
    getter: (state: any, getters: any) => T,
    cb: (value: T, oldValue: T) => void,
    options: any
  ): void {
    const this$1 = this;

    this._watcherVM.$watch(
      // 4. PINIA getters direct access as state properties
      () => getter(this$1.state, this$1.state),
      cb,
      options
    );
  }
}

// NUXT PLUGIN for inject $store
const piniaAuthStorePlugin: Plugin = (context) => {
  const fakeStore = new FakeVuexAuthStore(context);

  // @ts-ignore
  context.store = fakeStore;
};

export default piniaAuthStorePlugin;

and in nuxt.config.ts

...
plugins: [
    "~/plugins/fakeVuexStore"
]
...

[sts-ryan-holton]

Hoping for a vanilla JS implementation, I'm not using the Vuex wrapper you specified

[ttkoma]

nuxt-auth module use cookie, localstorage, localstate and vuex for save auth state.
For implement other store, vuex api its best candidate to replacing.
In the my sample implemented pinia store for replace vuex part in nuxt-auth.

[sts-ryan-holton]

vuex api its best candidate to replacing.

How would I make the auth module utilise some other form of storage option since that's the reason for this issue, I need to hook into some set & get methods which the auth module doesn't seem to expose? 😆

[ttkoma]

Earlier I gave an example of how you can use Pinia instead of vuex.
if you need to set custom property in auth store, you can call

this.$auth.$storage.setState("MyCustomProperty",  "hello world")

for obtain this value call

this.$auth.$storage.getState("MyCustomProperty")

I also want to note that the Capacitor has several features that complicate its implementation instead of Vuex in @nuxtjs/auth

1. Capacitor Storage module work with storage asynchroniusly and this not supported in a @nuxtjs/auth
2. Capcitor Storage module work with window.localstorage and this not supported with SSR (not so important if you have SPA)

[sts-ryan-holton]

Great, so your example code provided... currently in my app, when I look at the localStorage tab in my browser I see that the Auth module, when logging on and refreshing tokens etc is setting these items in localStorage.

My app is running as a statically generated site, so this is fine, so for my implementation, where would I call my custom set & get functions in order for the module to use these values?

For example, in my app to set an item using the Capacitor storage plugin I use:

this.$CapacitorStorage.set({ key: "my_key", value: "some value" })

So at some point I'd need to run this but not sure where.

[ttkoma]

If you want simple sync Capacitor Storage with auth state try this:

1. Activate vuex store for @nuxtjs/auth. To do this create an empty file index.js in a nuxt directory store.
2. Write @nuxtjs/auth plugin like this ~/plugins/authCapacitorSync.js
   Important: its not Nuxt plugin!!!

import { Storage } from '@capacitor/storage'

export default function({ $auth, store }) {
  if (process.server) return

  const $CapacitorStorage = Storage
  // BUG ???
  // works  only with props from initial state in @nuxtjs/auth
  // auth.user, auth.loggedIn, auth.strategy
  $auth.$storage.watchState('user', (value, _oldValue) => {
    $CapacitorStorage.set({ key: 'user', value: JSON.stringify(value) })
      .then(() =>
        console.log('[WatchState]', 'user saved in capacitor storage')
      )
  })

  // OR 

  // Handle all Vuex mutation and filtering by mutation type
  const authMutationName = $auth.options.vuex.namespace + '/SET'
  store.subscribe((mutation, _state) => {

    if (mutation.type !== authMutationName)
      return

    const { key, value } = mutation.payload
    $CapacitorStorage.set({ key, value: JSON.stringify(value) })
      .then(() =>
        console.log('[Subscribe]', `'${key}' saved in capacitor storage with value '${value}'`)
      )
  })
}

3. Activate our auth plugin in nuxt.config.js

export default {
  auth: {
    plugins: ['~/plugins/authCapacitorSync.js'],
    strategies: {
      // ...
    }
    // ...
  }
}

[sts-ryan-holton]

I'll have to try this out today, I don't see any get method from Capacitor Storage in your example? I'd need to set in capacitor storage and then retrieve since the phone's localStorage would be cleared.

The auth._token.laravelJWT key in my localStorage is the token that needs to be set to keep a user logged in along side the user key as per your example. It's a Bearer xxx token, this is what I'm thinking but not sure how to continue...

import { Storage } from '@capacitor/storage'

export default function({ $auth, store }) {
  if (process.server) return

  const $CapacitorStorage = Storage

  // set user
  $auth.$storage.watchState('user', (value, _oldValue) => {
    if (value) {
      $CapacitorStorage.set({ key: 'user', value: JSON.stringify(value) })
    }
  })

  // set token
  $CapacitorStorage.set({ key: 'laravelJWT_token', value: $auth.strategy.token.get() })

  // we can set a token with...
  // $auth.strategy.token.set()
  // see: https://auth.nuxtjs.org/api/tokens/
  
}

When a user logs in, their token is set, and they then remain logged in, however, if the app is updated or the phone crashes, I need to then set auth._token.laravelJWT along with...

So that the user doesn't need to log in again