[Bug] useStore.persist is undefined in React Native

[miikebar]

Summary

Following the persist documentation I've been trying to access useStore.persist.setOptions() but the persist object seems to be undefined in React Native.

The reproduction contains an example configureBearStore function which changes the storage name and logs the options to the console. When you run it on the web it works fine, but once you run it on a device in the Expo Snack, a TypeError will be thrown.

Error

TypeError: Cannot read property 'setOptions' of undefined, js engine: hermes

undefined is not an object (evaluating 'useBearStore.persist.setOptions')

Link to reproduction

• Web: https://codesandbox.io/p/sandbox/awesome-wescoff-wq9dn5
• React Native: https://snack.expo.dev/@michal.bar/zustand-persist-undefined

Environment

• Expo: 48
• React Native: 0.71.7
• Zustand: 4.3.8

[miikebar]

It looks like this is caused by the fact that if you don't provide the storage option when creating the store, then localStorage is used by default, which is undefined on React Native.

Here's a repro setting a dummy storage implementation: https://snack.expo.dev/@michal.bar/zustand-persist-undefined-custom-storage. Once a storage option has been set the useBearStore.persist is no longer undefined.

Should the whole persist object be undefined because of this? Maybe it's something worth mentioning in the docs? In my case I didn't set the storage directly as I needed to set it dynamically based on some conditions using setOptions.

[miikebar]

@dai-shi

We should keep watching people reporting issues if we make such changes. Would you be willing to work on it in a longer term?

I think that for now updating the documentation to inform users of this issue should suffice, as it can be resolved by simply passing a noop storage. If more bug reports appear then I could try implementing the necessary modifications to solve the problem.

---

@dbritto-dev

That's also a nice solution, but I'm working with a monorepo and I wanted to avoid including AsyncStorage in the package dependencies, so that it's not unnecessarily installed when using the package with web apps.

My current solution is as follows:

/packages/company-react/usePersistence.ts

export const usePersistence = create(
  combine(
    {
      local: null as StateStorage | null,
      secure: null as StateStorage | null,
      noop: {
        getItem: () => null,
        setItem: () => {},
        removeItem: () => {},
      } satisfies StateStorage,
    },
    () => ({})
  )
);

export const configurePersistence = ({
  local,
  secure,
}: ConfigurePersistenceParams) => {
  if (local) {
    usePersistence.setState({ local });
  }
  if (secure) {
    usePersistence.setState({ secure });
  }
};

/packages/company-react/useAuthService.ts

export const useAuthService = create(
  persist(
    combine(
      {
        isInitialised: false as boolean,
        accessToken: null as string | null,
        refreshToken: null as string | null,
      },
      (set, get) => ({
        // actions
      })
    ),
    {
      name: 'auth-service',
      version: 0,
      skipHydration: true,
      // We have to pass a default NOOP implementation
      // @see https://github.com/pmndrs/zustand/discussions/1795
      storage: createJSONStorage(() => usePersistence.getState().noop),
      onRehydrateStorage: () => (state) => {
        state?.setInitialised(true);
      },
    }
  )
);

export const configureAuthService = ({
  persistence,
}: ConfigureAuthServiceOptions) => {
  if (persistence) {
    useAuthService.persist.setOptions({
      storage: createJSONStorage(() => persistence),
    });
    useAuthService.persist.rehydrate();
  } else {
    useAuthService.setState({ isInitialised: true });
  }
};

/apps/native/App.tsx

import * as SecureStore from 'expo-secure-store';

configurePersistence({
  secure: {
    getItem: SecureStore.getItemAsync,
    setItem: SecureStore.setItemAsync,
    removeItem: SecureStore.deleteItemAsync,
  },
});

configureAuthService({
  persistence: usePersistence.getState().secure,
});

This way I can use the useAuthService on both platforms. Native persists the tokens in SecureStore, and web doesn't save them at all, as they are saved in HttpOnly cookies, and the token is being provided to the store by useSession from NextAuth.

[dbritto-dev]

@MrPumpking interesting I was thinking in three repos/monorepos useAuthService/core, useAuthService/react (react) and useAuthService/native (react native).

const defaultPersistConfig = {...}

// useAuthService/core
export const createUseAuthService = (persistConfig) => create(persist(..., { ...defaultPersistConfig, ...persistConfig }))

const noop = () => {}

const storage = {
  getItem: noop,
  setItem: noop,
  removeItem: noop,
}

// useAuthService/react
export const useAuthService = createUseAuthService({ storage })

import * as SecureStore from 'expo-secure-store'

const storage ={
  getItem: SecureStore.getItemAsync,
  setItem: SecureStore.setItemAsync,
  removeItem: SecureStore.removeItemAsync,
}

// useAuthService/native
export const useAuthService= createUseAuthService({ storage })

[miikebar]

@dbritto-dev the problem with this approach is that my react package has some hooks that rely on the useAuthService, which means I can't have different instances for web and native. I.e I have a hook which fetches data only if the user is authenticated.

Having to create different instances for apps would force me to inject the service using the Context API, and that's also something I wanted to avoid.

[dbritto-dev]

@dbritto-dev the problem with this approach is that my react package has some hooks that rely on the useAuthService, which means I can't have different instances for web and native. I.e I have a hook which fetches data only if the user is authenticated.

Having to create different instances for apps would force me to inject the service using the Context API, and that's also something I wanted to avoid.

Hmmm but web and native have different instances. It's not like you can share same instance between web and native. My suggestion is not worry about having an extra dep on your usePersitence and/or useAuthService because expo give you the option to only bundle what you need for web and native.

[miikebar]

Hmmm but web and native have different instances. It's not like you can share same instance between web and native.

That's what I want to avoid. For example

/packages/company-react/data/useData.ts

import { useAuthService } from '../auth';

const useData = () => {
  const isAuthenticated = useAuthService((state) => state.isAuthenticated);

  return useQuery({
    queryFn: () => { ... },
    enabled: isAuthenticated
  })
}

If useAuthService was initialised directly in apps and not in the react package then I couldn't really use it in custom hooks without injecting it using Context, and then consuming it in hooks (i.e useAuthContext). With my approach the useAuthService is initialised once (in /packages/company-react/auth/useAuthService.ts), and then it's just configured with a different persistence layer depending on the platform:

/apps/web/pages/_app.tsx

import type { AppProps } from 'next/app';
import { configureAuthService, usePersistence, useData } from '@company/react';

configureAuthService({
  persistence: usePersistence.getState().noop
});

export default function MyApp({ Component, pageProps }: AppProps) {
  const { data } = useData();

  return <Component {...pageProps} />;
}

apps/native/App.tsx

import * as SecureStore from 'expo-secure-store';
import { configureAuthService, usePersistence, useData } from '@company/react';

configurePersistence({
  secure: {
    getItem: SecureStore.getItemAsync,
    setItem: SecureStore.setItemAsync,
    removeItem: SecureStore.deleteItemAsync,
  },
});

configureAuthService({
  persistence: usePersistence.getState().secure,
});

const App: FC = () => {
  const { data } = useData();
}

export default App;

My suggestion is not worry about having an extra dep on your usePersitence and/or useAuthService because expo give you the option to only bundle what you need for web and native.

I mainly wanted to avoid downloading native packages in CI builds. I know they can be cached but preview builds with no cache took longer the more native modules I had (at least that was my experience with Nx monorepos on Vercel, not sure if it would be the case with Turbo). I don't use Expo nor react-native-web to build the web apps - I share the logic but have separate UIs.

[dai-shi]

#1795 (reply in thread)
Improving docs for RN users sounds like a great idea. Please feel free to open a PR.