Replacing localStorage with token in Routes

src/index.tsx

@@ -1,9 +1,9 @@
 import * as React from "react";
 import CssBaseline from "@mui/material/CssBaseline";
-import { SnackbarProvider } from 'notistack';
+import { SnackbarProvider } from "notistack";
-import { ThemeProvider } from '@mui/material/styles';
+import { ThemeProvider } from "@mui/material/styles";
-import { createRoot } from 'react-dom/client';
+import { createRoot } from "react-dom/client";
-import { BrowserRouter, Routes, Route, Outlet, Navigate } from "react-router-dom";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
 import theme from "./theme";
 import PublicRoute from "@kitUI/publicRoute";
 import PrivateRoute from "@kitUI/privateRoute";
@@ -21,7 +21,6 @@ import PromocodeManagement from "@pages/dashboard/Content/PromocodeManagement";
 import Support from "@root/pages/dashboard/Content/Support/Support";
 import "./index.css";
 
-
 const componentsArray = [
   ["/users", <Users />],
   ["/entities", <Entities />],
@@ -30,10 +29,11 @@ const componentsArray = [
   ["/promocode", <PromocodeManagement />],
   ["/support", <Support />],
   ["/support/:ticketId", <Support />],
-]
+];
 
-const container = document.getElementById('root');
+const container = document.getElementById("root");
 const root = createRoot(container!);
+
 root.render(
   <React.StrictMode>
     <CssBaseline />
@@ -41,21 +41,59 @@ root.render(
       <SnackbarProvider>
         <BrowserRouter>
           <Routes>
-                        <Route path="/" element={<PublicRoute><Signin /></PublicRoute> } />
+            <Route
-                        <Route path="/signin" element={ <PublicRoute><Signin /></PublicRoute> } />
+              path="/"
-                        <Route path="/signup" element={ <PublicRoute><Signup /></PublicRoute> } />
+              element={
-                        <Route path="/restore" element={ <PublicRoute><Restore /></PublicRoute> } />
+                <PublicRoute>
-                        <Route path="/dispatch" element={ <PublicRoute><Sections /></PublicRoute> } />
+                  <Signin />
-                        <Route element={<PrivateRoute><Dashboard/></PrivateRoute>}>
+                </PublicRoute>
+              }
+            />
+            <Route
+              path="/signin"
+              element={
+                <PublicRoute>
+                  <Signin />
+                </PublicRoute>
+              }
+            />
+            <Route
+              path="/signup"
+              element={
+                <PublicRoute>
+                  <Signup />
+                </PublicRoute>
+              }
+            />
+            <Route
+              path="/restore"
+              element={
+                <PublicRoute>
+                  <Restore />
+                </PublicRoute>
+              }
+            />
+            <Route
+              path="/dispatch"
+              element={
+                <PublicRoute>
+                  <Sections />
+                </PublicRoute>
+              }
+            />
+            <Route
+              element={
+                <PrivateRoute>
+                  <Dashboard />
+                </PrivateRoute>
+              }
+            >
               {componentsArray.map((e: any, i) => (
                 <Route key={i} path={e[0]} element={e[1]} />
               ))}
             </Route>
 
-                        <Route
+            <Route path="*" element={<Error404 />} />
-                            path="*"
-                            element={ <Error404 /> }
-                        />
           </Routes>
         </BrowserRouter>
       </SnackbarProvider>

src/kitUI/privateRoute.tsx

@@ -1,12 +1,13 @@
+import { authStore } from "@root/stores/auth";
 import * as React from "react";
-import { useLocation, Navigate } from 'react-router-dom'
+import { useLocation, Navigate } from "react-router-dom";
 
 export default ({ children }: any) => {
-    const location = useLocation()
+  const { token } = authStore();
+  const location = useLocation();
   //Если пользователь авторизован, перенаправляем его на нужный путь. Иначе выкидываем в регистрацию
-    if (localStorage.getItem('AT')) {
+  if (token) {
-        return children
+    return children;
-    }
-    return <Navigate to="/" state={{from: location}} />
-
   }
+  return <Navigate to="/" state={{ from: location }} />;
+};

src/kitUI/publicRoute.tsx

@@ -1,12 +1,16 @@
-import * as React from "react";
+import { useLocation, Navigate } from "react-router-dom";
-import { useLocation, Navigate } from 'react-router-dom'
 
-export default ({ children }: any) => {
+import { authStore } from "@root/stores/auth";
-    const location = useLocation()
-//Если пользователь авторизован, перенаправляем его в приложение. Иначе пускаем куда хотел
-    if (localStorage.getItem('AT')) {
-        return <Navigate to="/users" state={{from: location}} />
-    }
-    return children
 
+const PublicRoute = ({ children }: any) => {
+  const location = useLocation();
+  const { token } = authStore();
+
+  if (token) {
+    return <Navigate to="/users" state={{ from: location }} />;
   }
+
+  return children;
+};
+
+export default PublicRoute;

src/pages/Authorization/signin.tsx

@@ -19,30 +19,35 @@ interface Values {
 
 function validate(values: Values) {
   const errors = {} as any;
+
   if (!values.email) {
     errors.email = "Required";
   }
+
   if (!values.password) {
     errors.password = "Required";
-  } else if (!/^[\S]{8,25}$/i.test(values.password)) {
+  }
+
+  if (values.password && !/^[\S]{8,25}$/i.test(values.password)) {
     errors.password = "Invalid password";
   }
+
   return errors;
 }
-export default () => {
+
+const SigninForm = () => {
   const theme = useTheme();
   const navigate = useNavigate();
-  const [isReady, setIsReady] = React.useState(true);
+  const [isReady] = React.useState(true);
+
   const { makeRequest } = authStore();
 
-  return (
+  const initialValues: Values = {
-    <Formik
-      initialValues={{
     email: "",
     password: "",
-      }}
+  };
-      validate={validate}
+
-      onSubmit={(values) => {
+  const onSignFormSubmit = (values: Values) => {
     makeRequest({
       url: "https://admin.pena.digital/auth/login",
       body: {
@@ -59,8 +64,10 @@ export default () => {
         console.log(e);
         enqueueSnackbar(e.message ? e.message : `Unknown error`);
       });
-      }}
+  };
-    >
+
+  return (
+    <Formik initialValues={initialValues} validate={validate} onSubmit={onSignFormSubmit}>
       <Form>
         <Box
           component="section"
@@ -153,3 +160,5 @@ export default () => {
     </Formik>
   );
 };
+
+export default SigninForm;

src/stores/auth.ts

@@ -1,4 +1,4 @@
-import axios, { AxiosResponse } from "axios";
+import axios, { AxiosError, AxiosResponse } from "axios";
 import { create } from "zustand";
 import { devtools } from "zustand/middleware";
 
@@ -60,7 +60,7 @@ async function makeRequest<TRequest, TResponse>({
   if (contentType) headers["Content-Type"] = "application/json";
 
   try {
-    const response = await axios<TRequest, AxiosResponse<TResponse & { accessToken?: string }>>({
+    const { data } = await axios<TRequest, AxiosResponse<TResponse & { accessToken?: string }>>({
       url,
       method,
       headers,
@@ -68,12 +68,14 @@ async function makeRequest<TRequest, TResponse>({
       signal,
     });
 
-    if (response.data?.accessToken) {
+    if (data?.accessToken) {
-      HC(response.data.accessToken);
+      HC(data.accessToken);
     }
 
-    return response.data;
+    return data;
-  } catch (error: any) {
+  } catch (nativeError: unknown) {
+    const error = nativeError as AxiosError;
+
     if (error?.response?.status === 401 && counterRefresh) {
       const refreshResponse = await refresh();
       if (refreshResponse.data?.accessToken) HC(refreshResponse.data.accessToken);