Complex encryption requirements and various issues we've encountered

[gregordotjs]

I'm working with Expo + tanstack query + async persister.

What's important to understand for my case is, that we have some api calls that return data that can be stored in async storage normally, and data that is really sensitive, and needs to be encrypted. So we added a meta with encrypted flag, and create our own serializer / deserializer.

The first issue we encountered was, that serialize is getting called for all queries, not just the one that was added / executed. So we noticed that we kept encrypting same queries over and over again, even when none of those were executed. The workaround was to create some kind of a cache to store encrypted data there (example is below), so that we don't constantly call encrypt.

The next issue was that we have some auth stuff tied to tanstack query (e.g., token verification). And because this is tied to tanstack query, and we use async persister, deserialize is getting called again for all queries. So what happens is, we deserialize and DECRYPT data that should be protected, even before the user logs in. Because tanstack query is needed for auth. I have no idea how to go around this.

So basically my question is: should I even try to solve this with serialize / deserialize or would some other approach be more suited, like encrypting data in api request queryFn, and decrypt it on success?

Here's the code related to this issue:

type Serialize = (client: PersistedClient) => MaybePromise<string>;
type Deserialize = (cachedString: string) => MaybePromise<PersistedClient>;

export type Meta = {
  persist?: boolean;
  encrypted?: boolean;
};

type QueryType = DehydratedState['queries'][0];

const getEncryptedState = async (query: QueryType): Promise<string> => {
  const CACHE_KEY = `${query.queryHash}${query.state.dataUpdatedAt}`;

  const cachedState = CacheService.get<string | null>(CACHE_KEY);

  if (cachedState !== null) return cachedState;

  const encryptedState = await EncryptionService.encrypt(JSON.stringify(query.state.data));

  CacheService.set(CACHE_KEY, encryptedState, DEFAULT_CACHE_TTL_MS);

  return encryptedState;
};

/**
 * How to serialize the data to storage.
 *
 * @default `JSON.stringify`
 */
export const serialize: Serialize = async (persistedClient: PersistedClient) => {
  const mutableClient = createDraft(persistedClient);

  if (mutableClient.clientState?.queries) {
    const { queries } = mutableClient.clientState;

    for (const query of queries) {
      if ((query.meta as Meta)?.encrypted) {
        try {
          const encryptedState = await getEncryptedState(query);

          query.state.data = encryptedState;
        } catch (error) {
          // In case of encryption failure, leave the query as is
          console.error('Failed to encrypt query state:', error);
        }
      }
    }
  }

  const finalizedClient = finishDraft(mutableClient);

  return JSON.stringify(finalizedClient);
};

/**
 * How to deserialize the data from storage.
 *
 * @default `JSON.parse`
 */
export const deserialize: Deserialize = async (cachedString: string) => {
  const persistedClient = JSON.parse(cachedString) as PersistedClient;
  const mutableClient = createDraft(persistedClient);

  if (mutableClient?.clientState?.queries) {
    const { queries } = mutableClient.clientState;

    for (const query of queries) {
      if ((query.meta as Meta)?.encrypted && query.state.data) {
        try {
          const decryptedState = await EncryptionService.decrypt(query.state.data as string);
          const state = JSON.parse(decryptedState);

          query.state.data = state;
        } catch (error) {
          // If decryption fails, we can return the original query
          console.error('Failed to decrypt query state:', error);
        }
      }
    }
  }

  const finalizedClient = finishDraft(mutableClient);

  return finalizedClient;
};

[TkDodo]

I think you might want to look into createPersister for these cases, which allows persisting for individual queries:

https://tanstack.com/query/latest/docs/framework/react/plugins/createPersister