How to persist auth and recreate client with JWT?

[skoshy]

Could you give some pointers on how I can persist/use the JWT/auth information for subsequent page-loads? Some sub-questions:

• I saw in the client code that there's options for persisting the session, but I can't find a way for the client to use the persisted value when recreating the client?
• How could we instead of using localStorage use a cookie? I'm concerned with using localStorage as browsers like Safari can clear the storage whenever they'd like; I feel cookies are a better storage system for auth info

[kiwicopple]

Hi @skoshy - at the moment the client only uses local storage. Perhaps you'd like to contribute an option to use cookies in the gotrue-js library? Let me know if I can help

[skoshy]

Hey @kiwicopple! For the moment, I've made a CookieStorage "adapter" that satisfies the localStorage interface. Probably not the best adaptation, but it looks like it's working as of now! Here's what I have (requires optional chaining / latest ES features in some parts):

const CookieStorage = (() => {
  const getAll = () => document.cookie.split(';');

  const setItem = (name, val, exdays = 365) => {
    const d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    document.cookie = `${name}=${val};expires=${d.toUTCString()};path=/`;
  };

  const removeItem = (name) => setItem(name, '', -30);

  const clear = () => getAll().forEach(c => removeItem(c.split('=')?.[0] ?? ''));

  const getItem = (name) => {
    const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
    return match?.[2] ?? '';
  }

  return {
    get length() {
      return getAll().length;
    },
    key: (key) => getAll()?.[key] ?? null,
    clear,
    getItem,
    setItem,
    removeItem,
  }
})();

const publicClient = createClient(process.env.SUPABASE_API_URL, process.env.SUPABASE_CLIENT_KEY, { autoRefreshToken: true, localStorage: CookieStorage });

I think for now this should be sufficient to solve the issue. Thank you!

[kamikazechaser]

Setting a cookie client-side is probably not a good idea (from a security point of view, see OWASP for this). I suggest bypassing go-true entirely and setting the cookie server-side (since the JWT secret is already given). Of course this means you will need an additional/existing server.

[kiwicopple]

Yeah this should be set server side, and ideally be a http-only cookie. We are working on some improvements to the gotrue-js library now which will hopefully make this easier