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", () => {});
});

[evanlegamer]

I tried your solution today. But it seems to not work anymore.

I did some little modifications

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

export async function getItem(key) {
  const v = (await Preferences.get({ key })).value;
  return v;
}

export async function setItem(key, value) {
  return await Preferences.set({ key, value });
}

export async function removeItem(key) {
  return await Preferences.remove({ key });
}

export default defineNuxtPlugin((nuxtApp) => {
  const { $config } = nuxtApp;

  // Register the app:beforeMount hook
  nuxtApp.hook("app:beforeMount", () => {
    $config.public.supabase.clientOptions.auth.storage = {
      getItem,
      setItem,
      removeItem,
    };
  });
});

it's correctly called within the hook but none of the method is called by supabase.

here is my config in nuxt config :

  supabase: {
    redirectOptions: {
      login: "/auth/login",
      callback: "/confirm",
      exclude: ["*"],
    },
    clientOptions: {
      auth: {
        detectSessionInUrl: false,
        persistSession: true,
        autoRefreshToken: true,
      },
    },
  },

I tried with persistSession to true or false, nothing change.
EVERY SINGLE TIME it's using cookie to store the data. I do not find any way to store data from outside the cookie.

[0fatihyildiz]

I tried your solution today. But it seems to not work anymore.

I did some little modifications

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

export async function getItem(key) {
const v = (await Preferences.get({ key })).value;
return v;
}

export async function setItem(key, value) {
return await Preferences.set({ key, value });
}

export async function removeItem(key) {
return await Preferences.remove({ key });
}

export default defineNuxtPlugin((nuxtApp) => {
const { $config } = nuxtApp;

// Register the app:beforeMount hook
nuxtApp.hook("app:beforeMount", () => {
$config.public.supabase.clientOptions.auth.storage = {
getItem,
setItem,
removeItem,
};
});
});
it's correctly called within the hook but none of the method is called by supabase.

here is my config in nuxt config :

supabase: {
redirectOptions: {
login: "/auth/login",
callback: "/confirm",
exclude: ["*"],
},
clientOptions: {
auth: {
detectSessionInUrl: false,
persistSession: true,
autoRefreshToken: true,
},
},
},
I tried with persistSession to true or false, nothing change. EVERY SINGLE TIME it's using cookie to store the data. I do not find any way to store data from outside the cookie.

Did you find any solution about this?

[larbish]

Might be now doable by setting useSsrCookies to false. Available in v1.5.0.

[galaxyblur]

Here is my solution, building on the others, using the latest release (v1.5.0) of @nuxtjs/supabase. This works! :)

@larbish I think it is worth calling out in the docs that in order to do this, you MUST use a plugin—simply adding the custom storage in nuxt.config does NOT work due to the serialization issue pointed out previously.

import { Capacitor, CapacitorCookies } from '@capacitor/core';
import consola from 'consola';

export async function getItem(key: string) {
  const cookies = await CapacitorCookies.getCookies();
  return cookies[key];
}

export async function setItem(key: string, value: string) {
  return await CapacitorCookies.setCookie({
    key,
    value,
    path: '/',
  });
}

export async function removeItem(key: string) {
  return await CapacitorCookies.deleteCookie({ key });
}

export default defineNuxtPlugin(nuxtApp => {
  const { $config } = nuxtApp;

  // Register the app:beforeMount hook
  nuxtApp.hook('app:beforeMount', () => {
    if (!Capacitor.isNativePlatform()) return;

    consola.log('Using CapacitorCookies plugin for Supabase auth storage.');

    const authOptions = $config.public.supabase.clientOptions.auth ?? {};
    $config.public.supabase.clientOptions.auth = {
      ...authOptions,
      storage: {
        getItem,
        setItem,
        removeItem,
      },
    };
  });
});