fixed auth hydration

src/store/auth/AuthStore.ts

@@ -1,7 +1,7 @@
 import { IUser } from '~/types/auth';
 import { EMPTY_USER } from '~/constants/auth';
 import { makeAutoObservable } from 'mobx';
-import { makePersistable } from 'mobx-persist-store';
+import { makePersistable, isHydrated } from 'mobx-persist-store';
 
 export class AuthStore {
   token: string = '';
@@ -18,6 +18,10 @@ export class AuthStore {
     });
   }
 
+  get isHydrated() {
+    return isHydrated(this);
+  }
+
   get isUser() {
     return !!this.token;
   }

src/store/index.ts

@@ -13,6 +13,10 @@ export class Store {
   constructor() {
     makeAutoObservable(this);
   }
+
+  get isHydrated() {
+    return this.auth.isHydrated;
+  }
 }
 
 const defaultStore = new Store();

src/utils/context/StoreContextProvider.tsx

@@ -1,10 +1,13 @@
 import React, { createContext, FC, useContext } from 'react';
 import { Store } from '~/store';
+import { observer } from 'mobx-react-lite';
 
 export const StoreContext = createContext<Store>(new Store());
 
-export const StoreContextProvider: FC<{ store: Store }> = ({ children, store }) => {
+export const StoreContextProvider: FC<{ store: Store }> = observer(({ children, store }) => {
+  if (!store.isHydrated) return null;
+
   return <StoreContext.Provider value={store}>{children}</StoreContext.Provider>;
-};
+});
 
 export const useStore = () => useContext(StoreContext);