Is it possible to use cookies for as a persist storage?

[mapten]

Can I use a library like react-cookie or similiar as a persist storage?

[dai-shi]

I think someone did it, either in discussions or in third-party libraries.

[mapten]

Yes, thank you.

It is possible, and easy, I did it like this:

import { StateStorage } from 'zustand/middleware';
import { getCookie, setCookie, removeCookie } from 'typescript-cookie';

const cookiesStorage: StateStorage = {
  getItem: (name: string) => {
    return getCookie(name) ?? null;
  },
  setItem: (name: string, value: string) => {
    setCookie(name, value, { expires: 1 });
  },
  removeItem: (name: string) => {
    removeCookie(name);
  }
}

export default cookiesStorage;

[opticSquid]

saved the day

[epenflow]

the setItem doesn't accept options. Is it possible to override the setItem params to include options?

[dbritto-dev]

@epenflow with .bind()

[epenflow]

Could you provide guidance? I couldn't find guidance on how to combine persits storage with bind()

[dbritto-dev]

@epenflow would you mind telling me what options you want to pass?, .setItem is called each time you use .setState/set

[NoelJacob]

Like while doing setItem also send in configuration like expiry time etc. But I guess it can be handled in the set itself by passing in an object with value and config instead of value directly.

[afranioce]

I wrot a function to implement it

import type { StateStorage } from 'zustand/middleware';

export const createCookieStorage = (options: Omit<CookieInit, 'name' | 'value'>): StateStorage => ({
  getItem: async (name: string) => {
    const value = await cookieStore.get(name);
    return value?.value || null;
  },
  setItem: async (name: string, value: string) => {
    await cookieStore.set({
      name,
      value,
      ...options,
    });
  },
  removeItem: async (name: string) => {
    await cookieStore.delete(name);
  },
})

How to use

import { create } from 'zustand'
import { persist, createJSONStorage } from 'zustand/middleware'
import { createCookieStorage } from './createCookie'

type RefreshTokenStoreState = {
  refreshToken: string | null
  setRefreshToken: (token: string | null) => void
}

export const useRefreshTokenStore = create<RefreshTokenStoreState>()(
  persist(
    (set) => ({
      refreshToken: null,
      setRefreshToken: (token) => set({ refreshToken: token }),
    }),
    {
      name: 'refresh-token-storage',
      storage: createJSONStorage(() => createCookieStorage({
        sameSite: 'strict',
       expires: new Date().getTime() + 1 * 3600 * 1000 // 1 hour expiration
      })),
    },
  ),
)