Use useAuth hook

src/auth/AuthProvider.tsx

@@ -26,6 +26,7 @@ import {
 interface AuthProviderProps {
   children: React.ReactNode;
 }
+
 const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
   const intl = useIntl();
   const notify = useNotifier();
@@ -136,7 +137,7 @@ export const useAuth = () => {
     isAuthenticated,
     tokenAuthLoading: user.tokenAuthLoading,
     tokenVerifyLoading: user.tokenVerifyLoading,
-    user
+    user: user.user
   };
 };
 

src/index.tsx

@@ -20,7 +20,7 @@ import { appsSection } from "./apps/urls";
 import AttributeSection from "./attributes";
 import { attributeSection } from "./attributes/urls";
 import Auth, { getAuthToken, removeAuthToken } from "./auth";
-import AuthProvider from "./auth/AuthProvider";
+import AuthProvider, { useAuth } from "./auth/AuthProvider";
 import LoginLoading from "./auth/components/LoginLoading/LoginLoading";
 import SectionRoute from "./auth/components/SectionRoute";
 import { isJwtError } from "./auth/errors";
@@ -138,7 +138,9 @@ const App: React.FC = () => {
                 <BackgroundTasksProvider>
                   <AppStateProvider>
                     <ShopProvider>
+                      <AuthProvider>
                         <Routes />
+                      </AuthProvider>
                     </ShopProvider>
                   </AppStateProvider>
                 </BackgroundTasksProvider>
@@ -154,19 +156,18 @@ const App: React.FC = () => {
 const Routes: React.FC = () => {
   const intl = useIntl();
   const [, dispatchAppState] = useAppState();
-
-  return (
-    <>
-      <WindowTitle title={intl.formatMessage(commonMessages.dashboard)} />
-      <AuthProvider>
-        {({
+  const {
     hasToken,
     isAuthenticated,
     tokenAuthLoading,
     tokenVerifyLoading,
     user
-        }) =>
-          isAuthenticated && !tokenAuthLoading && !tokenVerifyLoading ? (
+  } = useAuth();
+
+  return (
+    <>
+      <WindowTitle title={intl.formatMessage(commonMessages.dashboard)} />
+      {isAuthenticated && !tokenAuthLoading && !tokenVerifyLoading ? (
         <AppLayout>
           <Navigator />
           <ErrorBoundary
@@ -277,9 +278,7 @@ const Routes: React.FC = () => {
                 component={WarehouseSection}
               />
               {createConfigurationMenu(intl).filter(menu =>
-                    menu.menuItems.map(item =>
-                      hasPermission(item.permission, user)
-                    )
+                menu.menuItems.map(item => hasPermission(item.permission, user))
               ).length > 0 && (
                 <SectionRoute
                   exact
@@ -295,9 +294,7 @@ const Routes: React.FC = () => {
         <LoginLoading />
       ) : (
         <Auth hasToken={hasToken} />
-          )
-        }
-      </AuthProvider>
+      )}
     </>
   );
 };