How to properly synchronize the localStorage state between the client and the server?

[piworkacc]

How to properly synchronize the localStorage state between the client and the server?
I use authorization with a Bearer token.
Naturally, I get an error of desynchronization, hydration of the state on the server and on the client.
I wrote this code.

import { AuthState } from "./interfaces";
import { ACCESS_TOKEN_KEY } from "../constants/auth";
import { setAuthToken } from "../lib/client";
import { create } from "zustand";
import { persist } from "zustand/middleware";

export const useAuthStore = create<AuthState>()(
  persist(
    (set) => ({
      accessToken: null,
      login: (token) => {
        set({ accessToken: token });
        setAuthToken(token);
      },
      logout: (queryClient) => {
        set({ accessToken: null });
        setAuthToken(null);
        if (queryClient) {
          queryClient.clear();
        }
      },
    }),
    {
      name: ACCESS_TOKEN_KEY,
      merge: (persistedState, currentState) => {
        const mergedState = {
          ...currentState,
          ...(persistedState as AuthState),
        };
        if (mergedState.accessToken) {
          setAuthToken(mergedState.accessToken);
        }
        return mergedState;
      },
    },
  ),
);

"use client";

import { FC, PropsWithChildren, useEffect, useState } from "react";
import { Loader } from "@gravity-ui/uikit";
import { useAuthStore } from "../../store/auth";

export const StorageLoader: FC<PropsWithChildren> = ({ children }) => {
  const [isHydrated, setIsHydrated] = useState(false);

  useEffect(() => {
    const checkAuthHydration = () => {
      const authHydrated = useAuthStore.persist.hasHydrated();

      if (authHydrated) {
        setIsHydrated(true);
      }
    };

    const authUnsubHydrate = useAuthStore.persist.onHydrate(() =>
      setIsHydrated(false),
    );

    const authUnsubFinishHydration = useAuthStore.persist.onFinishHydration(
      () => {
        checkAuthHydration();
      },
    );

    checkAuthHydration();

    return () => {
      authUnsubHydrate();
      authUnsubFinishHydration();
    };
  }, []);

  if (!isHydrated) {
    return <Loader size="l" />;
  }

  return children;
};

Maybe someone has an example of how to cook it properly? I'm still not sure if I did it right.