logged in required

src/components/app-router.jsx

@@ -6,15 +6,16 @@ import Playlists from '../pages/playlists';
 import Playlist from '../pages/playlist';
 import Files from '../pages/files';
 import Authentication from '../pages/auth';
+import { LoginRequired } from '../tools/grant-access';
 
 const AppRouter = () => {
     return (
         <Routes>
             <Route path="/" element={<Home />} />
-            <Route path="/planning" element={<Planning />} />
-            <Route path="/playlists" element={<Playlists />} />
-            <Route path="/files" element={<Files />} />
-            <Route path="/playlist/:id" element={<Playlist />} />
+            <Route path="/planning" element={<LoginRequired children={<Planning />} />} />
+            <Route path="/playlists" element={<LoginRequired children={<Playlists />} />} />
+            <Route path="/files" element={<LoginRequired children={<Files />} />} />
+            <Route path="/playlist/:id" element={<LoginRequired children={<Playlist />} />} />
             <Route path="/auth" element={<Authentication />} />
             <Route path="*" element={<NotFound />} />
         </Routes>

src/pages/auth.jsx

@@ -6,10 +6,11 @@ import { useEffect, useState } from 'react';
 import setNotification from './errors/error-notification';
 import API from '../services/api';
 
-const Authentication = () => {
+const Authentication = ({ redirect }) => {
     const { user, setUser } = useAuth();
     const navigate = useNavigate();
     const [isLoading, setIsLoading] = useState(false);
+    const [loggedIn, setLoggedIn] = useState(false);
 
     useEffect(() => {
         if (user) navigate('/');
@@ -36,7 +37,11 @@ const Authentication = () => {
                 if (res.status === 200) {
                     setUser(res.data);
                     localStorage.setItem('user', res.data);
+                    if (redirect) {
+                        setLoggedIn(true);
+                    } else {
                         navigate('/');
+                    }
                 } else {
                     setNotification(true, res.message);
                     setIsLoading(false);
@@ -48,6 +53,8 @@ const Authentication = () => {
             });
     };
 
+    if (loggedIn) return redirect;
+
     return (
         <Container size={420} my={40}>
             <Title

src/tools/grant-access.jsx

@@ -1,8 +1,23 @@
 import { useAuth } from './auth-provider';
+import Authentication from '../pages/auth';
+
+export const Perm = {
+    CREATE_ROLE: 0,
+    CREATE_PLAYLIST: 1,
+    VIEW_PLAYLIST: 2,
+    OWN_PLAYLIST: 3,
+    EDIT_PLAYLIST: 4,
+};
 
 const GrantAccess = ({ roles, children }) => {
     const { user } = useAuth();
     return roles.includes(user) ? children : null;
 };
 
+export const LoginRequired = ({ children }) => {
+    const { user } = useAuth();
+    if (!user) return <Authentication redirect={children} />;
+    else return children;
+};
+
 export default GrantAccess;