feat: add no auth redirections

src/app/App.tsx

@@ -4,23 +4,26 @@ import { classNames } from 'shared/lib/classNames/classNames';
 import { AppRouter } from 'app/providers/router';
 import { Navbar } from 'widgets/Navbar';
 import { Sidebar } from 'widgets/Sidebar';
-import { useDispatch } from 'react-redux';
-import { userActions } from 'entities/User';
+import { useDispatch, useSelector } from 'react-redux';
+import { getUserInited, userActions } from 'entities/User';
+import { useTheme } from 'app/providers/ThemeProvider';
 
 function App() {
+    const { theme } = useTheme();
     const dispatch = useDispatch();
+    const inited = useSelector(getUserInited);
 
     useEffect(() => {
         dispatch(userActions.initAuthData());
     }, [dispatch]);
 
     return (
-        <div className={classNames('app', {}, [])}>
+        <div className={classNames('app', {}, [theme])}>
             <Suspense fallback="">
                 <Navbar />
                 <div className="content-page">
                     <Sidebar />
-                    <AppRouter />
+                    {inited && <AppRouter />}
                 </div>
             </Suspense>
         </div>

src/app/providers/router/ui/AppRouter.tsx

@@ -1,38 +1,24 @@
-import React, { memo, Suspense, useMemo } from 'react';
+import React, { memo, Suspense, useCallback } from 'react';
 import { Route, Routes } from 'react-router-dom';
-import { routeConfig } from 'shared/config/routeConfig/routeConfig';
+import {
+    AppRoutesProps,
+    routeConfig,
+} from 'shared/config/routeConfig/routeConfig';
 import { PageLoader } from 'shared/ui/PageLoader/PageLoader';
-import { useSelector } from 'react-redux';
-import { getUserAuthData } from 'entities/User';
+import { RequireAuth } from 'app/providers/router/ui/RequireAuth';
 
 const AppRouter = () => {
-    const isAuth = useSelector(getUserAuthData);
+    const renderWithWrapper = useCallback((route: AppRoutesProps) => {
+        const element = (
+            <Suspense fallback={<PageLoader />}>
+                <div className="page-wrapper">{route.element}</div>
+            </Suspense>
+        );
 
-    const routes = useMemo(() => Object.values(routeConfig).filter((route) => {
-        if (route.authOnly && !isAuth) {
-            return false;
-        }
+        return <Route key={route.path} path={route.path} element={route.authOnly ? <RequireAuth>{element}</RequireAuth> : element} />;
+    }, []);
 
-        return true;
-    }), [isAuth]);
-
-    return (
-        <Routes>
-            {routes.map(({ element, path }) => (
-                <Route
-                    key={path}
-                    path={path}
-                    element={(
-                        <Suspense fallback={<PageLoader />}>
-                            <div className="page-wrapper">
-                                {element}
-                            </div>
-                        </Suspense>
-                    )}
-                />
-            ))}
-        </Routes>
-    );
+    return <Routes>{Object.values(routeConfig).map(renderWithWrapper)}</Routes>;
 };
 
 export default memo(AppRouter);

src/app/providers/router/ui/RequireAuth.tsx

@@ -0,0 +1,15 @@
+import { useSelector } from 'react-redux';
+import { getUserAuthData } from 'entities/User';
+import { Navigate, useLocation } from 'react-router-dom';
+import { RoutePath } from 'shared/config/routeConfig/routeConfig';
+
+export function RequireAuth({ children }: { children: JSX.Element }) {
+    const auth = useSelector(getUserAuthData);
+    const location = useLocation();
+
+    if (!auth) {
+        return <Navigate to={RoutePath.main} state={{ from: location }} replace />;
+    }
+
+    return children;
+}

src/entities/User/index.ts

@@ -3,3 +3,4 @@ export { userReducer, userActions } from './model/slice/userSlice';
 export { UserSchema, User	 } from './model/types/user';
 
 export { getUserAuthData } from './model/selectors/getUserAuthData/getUserAuthData';
+export { getUserInited } from './model/selectors/getUserInited/getUserInited';

src/entities/User/model/selectors/getUserInited/getUserInited.ts

@@ -0,0 +1,3 @@
+import { StateSchema } from 'app/providers/StoreProvider';
+
+export const getUserInited = (state: StateSchema) => state?.user._inited;

src/entities/User/model/slice/userSlice.ts

@@ -3,6 +3,7 @@ import { USER_LOCALSTORAGE_KEY } from 'shared/const/localstorage';
 import { User, UserSchema } from '../types/user';
 
 const initialState: UserSchema = {
+    _inited: false,
 };
 
 export const userSlice = createSlice({
@@ -17,6 +18,7 @@ export const userSlice = createSlice({
             if (user) {
                 state.authData = JSON.parse(user);
             }
+            state._inited = true;
         },
         logout: (state) => {
             state.authData = undefined;

src/entities/User/model/types/user.ts

@@ -5,4 +5,5 @@ export interface User {
 
 export interface UserSchema {
 	authData?: User;
+	_inited: boolean;
 }

src/shared/config/routeConfig/routeConfig.tsx

@@ -4,7 +4,7 @@ import { AboutPage } from 'pages/AboutPage';
 import { NotFoundPage } from 'pages/NotFoundPage';
 import { ProfilePage } from 'pages/ProfilePage';
 
-type AppRoutesProps = RouteProps & {
+export type AppRoutesProps = RouteProps & {
 	authOnly?: boolean;
 }