Non-cookie token storage

[dts]

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

I am implementing an Ionic app using @nuxtjs/ionic. I'd like to use Supabase as my API, but that means I need a way to store authentication tokens using the native plugins.

Describe the solution you'd like

Being able to have my own (async) getter and setter methods in the config would allow me to do this.

Describe alternatives you've considered

I can use cookies, though I worry that they won't be as durable as using dedicated local storage.

Additional context

I am happy to make/work on the change if that's useful!

[j4w8n]

If you create your own storage, you can pass that into your config.

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  // ...
  supabase: {
    client: {
      auth: {
        storage: YourCustomStorage
      }
    }
  }
}

See https://github.com/supabase/gotrue-js/blob/master/src/lib/local-storage.ts for a generic implementation of getItem setItem and removeItem. Replace the code inside of each method with your own.

[dts]

If you create your own storage, you can pass that into your config.

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  // ...
  supabase: {
    client: {
      auth: {
        storage: YourCustomStorage
      }
    }
  }
}

See https://github.com/supabase/gotrue-js/blob/master/src/lib/local-storage.ts for a generic implementation of getItem setItem and removeItem. Replace the code inside of each method with your own.

I should have mentioned, I tried this strategy, but because the nuxt config gets serialized to JSON, this way doesn't work.

[j4w8n]

@dts well that stinks. That's a good reason why they should have the dev create the client - even if it's via a library-provided function. Then you can pass in your custom storage. This is how other auth helpers do it.

[j4w8n]

Well, I thought other auth helpers used to support custom storage. Maybe it was only the storageKey. The SvelteKit one doesn't support either these, so I was wrong.

[philliphartin]

I've just gone down this rabbit hole today myself, trying to implement a custom storage mechanism for Ionic.

@dts what did you eventually use as an alternative?

In a previous project a few months ago I chose not to use this nuxt plugin and just used Supabase directly, I then used Pinia with a localStorage adapter. However, I'd love to reduce the number of moving parts and just use this module for my Ionic builds.

[dts]

🙈 (in plugins/authorization-storage.client.ts)

import { Preferences } from "@capacitor/preferences";

export async function getItem(key: string): Promise<string | null> {
  const v = (await Preferences.get({ key })).value;

  return v;
}

export async function setItem(key: string, value: string): Promise<void> {
  return await Preferences.set({ key, value });
}

export async function removeItem(key: string): Promise<void> {
  return await Preferences.remove({ key });
}

window.__NUXT__.config.public.supabase.client.auth.storage = {
  getItem,
  setItem,
  removeItem,
};

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook("app:beforeMount", () => {});
});