fix: admin pages authorization issues

apps/web/app/install/install.tsx

@@ -1,17 +1,12 @@
 'use client'
-import React, { use, useEffect } from 'react'
+import React, { useEffect } from 'react'
 import { INSTALL_STEPS } from './steps/steps'
 import GeneralWrapperStyled from '@components/StyledElements/Wrappers/GeneralWrapper'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { Suspense } from 'react'
 
 
-
-
-
 function InstallClient() {
-
-
     return (
         <GeneralWrapperStyled>
             <Suspense>

apps/web/app/orgs/[orgslug]/dash/layout.tsx

@@ -1,17 +1,20 @@
 import SessionProvider from '@components/Contexts/SessionContext'
 import LeftMenu from '@components/Dashboard/UI/LeftMenu'
+import AdminAuthorization from '@components/Security/AdminAuthorization'
 import React from 'react'
 
 function DashboardLayout({ children, params }: { children: React.ReactNode, params: any }) {
     return (
         <>
             <SessionProvider>
+                <AdminAuthorization authorizationMode="page">
                     <div className='flex'>
                         <LeftMenu />
                         <div className='flex w-full'>
                             {children}
                         </div>
                     </div>
+                </AdminAuthorization>
             </SessionProvider>
         </>
     )

apps/web/app/orgs/[orgslug]/dash/page.tsx

@@ -4,6 +4,7 @@ import learnhousetextlogo from '../../../../public/learnhouse_logo.png'
 import learnhouseiconlogo from '../../../../public/learnhouse_bigicon.png'
 import { BookCopy, School, Settings, Users } from 'lucide-react'
 import Link from 'next/link'
+import AdminAuthorization from '@components/Security/AdminAuthorization'
 
 function DashboardHome() {
     return (
@@ -11,6 +12,7 @@ function DashboardHome() {
             <div className='mx-auto pb-10'>
                 <Image alt='learnhouse logo' width={230} src={learnhousetextlogo}></Image>
             </div>
+            <AdminAuthorization authorizationMode="component">
                 <div className='flex space-x-10'>
                     <Link href={`/dash/courses`} className='flex bg-white shadow-lg p-[35px] w-[250px] rounded-lg items-center mx-auto hover:scale-105 transition-all ease-linear cursor-pointer'>
                         <div className='flex flex-col mx-auto space-y-2'>
@@ -35,7 +37,9 @@ function DashboardHome() {
                     </Link>
 
                 </div>
+            </AdminAuthorization>
             <div className='flex flex-col space-y-10 '>
+                <AdminAuthorization authorizationMode="component">
                     <div className='h-1 w-[100px] bg-neutral-200 rounded-full mx-auto'></div>
                     <div className="flex justify-center items-center">
                         <Link href={'https://learn.learnhouse.io/'} className='flex mt-[40px]  bg-black space-x-2 items-center py-3 px-7 rounded-lg shadow-lg hover:scale-105 transition-all ease-linear cursor-pointer'>
@@ -44,6 +48,8 @@ function DashboardHome() {
                         </Link>
                     </div>
                     <div className='mx-auto mt-[40px] w-28 h-1 bg-neutral-200 rounded-full'></div>
+                </AdminAuthorization>
+
                 <Link href={'/dash/user-account/settings/general'} className='flex bg-white shadow-lg p-[15px] items-center rounded-lg  items-center mx-auto hover:scale-105 transition-all ease-linear cursor-pointer'>
                     <div className='flex flex-row mx-auto space-x-3 items-center'>
                         <Settings className=' text-gray-500' size={20}></Settings>

apps/web/components/Contexts/SessionContext.tsx

@@ -1,13 +1,9 @@
 'use client';
 import { getNewAccessTokenUsingRefreshToken, getUserSession } from '@services/auth/auth';
-import { usePathname, useRouter, useSearchParams } from 'next/navigation'
 import React, { useContext, createContext, useEffect } from 'react'
-import { useOrg } from './OrgContext';
 
 export const SessionContext = createContext({}) as any;
 
-const PATHS_THAT_REQUIRE_AUTH = ['/dash'];
-
 type Session = {
     access_token: string;
     user: any;
@@ -18,10 +14,6 @@ type Session = {
 
 function SessionProvider({ children }: { children: React.ReactNode }) {
     const [session, setSession] = React.useState<Session>({ access_token: "", user: {}, roles: {}, isLoading: true, isAuthenticated: false });
-    const org = useOrg() as any;
-    const pathname = usePathname()
-    const router = useRouter()
-
 
     async function getNewAccessTokenUsingRefreshTokenUI() {
         let data = await getNewAccessTokenUsingRefreshToken();
@@ -39,6 +31,10 @@ function SessionProvider({ children }: { children: React.ReactNode }) {
             // Set session
             setSession({ access_token: access_token, user: user_session.user, roles: user_session.roles, isLoading: false, isAuthenticated: true });
         }
+
+        if (!access_token) {
+            setSession({ access_token: "", user: {}, roles: {}, isLoading: false, isAuthenticated: false });
+        }
     }
 
 
@@ -47,8 +43,6 @@ function SessionProvider({ children }: { children: React.ReactNode }) {
         // Check session
         checkSession();
 
-
-
     }, [])
 
     return (

apps/web/components/Dashboard/UI/LeftMenu.tsx

@@ -8,8 +8,9 @@ import { ArrowLeft, Book, BookCopy, Home, LogOut, School, Settings, Users } from
 import Image from 'next/image';
 import Link from 'next/link'
 import { useRouter } from 'next/navigation';
-import React, { use, useEffect } from 'react'
+import React, { useEffect } from 'react'
 import UserAvatar from '../../Objects/UserAvatar';
+import AdminAuthorization from '@components/Security/AdminAuthorization';
 
 function LeftMenu() {
     const org = useOrg() as any;
@@ -59,6 +60,7 @@ function LeftMenu() {
                     {/* <ToolTip content={"Back to " + org?.name + "'s Home"} slateBlack sideOffset={8} side='right'  >
                         <Link className='bg-white text-black hover:text-white rounded-lg p-2 hover:bg-white/10 transition-all ease-linear' href={`/`} ><ArrowLeft className='hover:text-white' size={18} /></Link>
                     </ToolTip> */}
+                    <AdminAuthorization authorizationMode="component">
                         <ToolTip content={"Home"} slateBlack sideOffset={8} side='right'  >
                             <Link className='bg-white/5 rounded-lg p-2 hover:bg-white/10 transition-all ease-linear' href={`/dash`} ><Home size={18} /></Link>
                         </ToolTip>
@@ -71,6 +73,7 @@ function LeftMenu() {
                         <ToolTip content={"Organization"} slateBlack sideOffset={8} side='right'  >
                             <Link className='bg-white/5 rounded-lg p-2 hover:bg-white/10 transition-all ease-linear' href={`/dash/org/settings/general`} ><School size={18} /></Link>
                         </ToolTip>
+                    </AdminAuthorization>
                 </div>
                 <div className='flex flex-col mx-auto pb-7 space-y-2'>
 

apps/web/components/Security/AdminAuthorization.tsx

@@ -0,0 +1,139 @@
+'use client';
+import { useOrg } from '@components/Contexts/OrgContext';
+import { useSession } from '@components/Contexts/SessionContext';
+import { usePathname, useRouter } from 'next/navigation';
+import React from 'react'
+
+type AuthorizationProps = {
+    children: React.ReactNode;
+    // Authorize components rendering or page rendering
+    authorizationMode: 'component' | 'page';
+}
+
+const ADMIN_PATHS = [
+    '/dash/org/*',
+    '/dash/org',
+    '/dash/users/*',
+    '/dash/users',
+    '/dash/courses/*',
+    '/dash/courses',
+    '/dash/org/settings/general',
+]
+
+function AdminAuthorization(props: AuthorizationProps) {
+    const session = useSession() as any;
+    const org = useOrg() as any;
+    const pathname = usePathname();
+    const router = useRouter();
+
+    // States 
+    const [isLoading, setIsLoading] = React.useState(true);
+    const [isAuthorized, setIsAuthorized] = React.useState(false);
+
+
+    // Verify if the user is authenticated
+    const isUserAuthenticated = () => {
+        if (session.isAuthenticated === true) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
+
+    // Verify if the user is an Admin (1), Maintainer (2) or Member (3) of the organization
+    const isUserAdmin = () => {
+        const isAdmin = session.roles.some((role: any) => {
+            return (
+                role.org.id === org.id &&
+                (role.role.id === 1 ||
+                    role.role.id === 2 ||
+                    role.role.role_uuid === 'role_global_admin' ||
+                    role.role.role_uuid === 'role_global_maintainer'
+                )
+            );
+        });
+        return isAdmin;
+    };
+
+    function checkPathname(pattern: string, pathname: string) {
+        // Escape special characters in the pattern and replace '*' with a regex pattern
+        const regexPattern = new RegExp(`^${pattern.replace(/\//g, '\\/').replace(/\*/g, '.*')}$`);
+
+        // Test if the pathname matches the regex pattern
+        const isMatch = regexPattern.test(pathname);
+
+        return isMatch;
+    }
+
+
+    const Authorize = () => {
+        if (props.authorizationMode === 'page') {
+
+            // Check if user is in an admin path 
+            if (ADMIN_PATHS.some((path) => checkPathname(path, pathname))) {
+                console.log('Admin path')
+                if (isUserAuthenticated()) {
+                    // Check if the user is an Admin
+                    if (isUserAdmin()) {
+                        setIsAuthorized(true);
+                    }
+                    else {
+                        setIsAuthorized(false);
+                        router.push('/dash');
+                    }
+                }
+                else {
+                    router.push('/login');
+                }
+            }
+
+            else {
+                if (isUserAuthenticated()) {
+                    setIsAuthorized(true);
+                }
+                else {
+                    setIsAuthorized(false);
+                    router.push('/login');
+                }
+            }
+        }
+
+        if (props.authorizationMode === 'component') {
+            // Component mode
+            if (isUserAuthenticated() && isUserAdmin()) {
+                setIsAuthorized(true);
+            }
+            else {
+                setIsAuthorized(false);
+            }
+        }
+    }
+
+    React.useEffect(() => {
+        if (session.isLoading) {
+            return;
+        }
+
+        Authorize();
+        setIsLoading(false);
+    }, [session, org, pathname])
+
+
+
+    return (
+        <>
+
+            {props.authorizationMode === 'component' && isAuthorized === true && props.children}
+            {props.authorizationMode === 'page' && isAuthorized === true && !isLoading && props.children}
+            {props.authorizationMode === 'page' && isAuthorized === false && !isLoading &&
+                <div className='flex justify-center items-center h-screen'>
+                    <h1 className='text-2xl'>You are not authorized to access this page</h1>
+                </div>
+            }
+
+        </>
+    )
+}
+
+export default AdminAuthorization

apps/web/components/Security/AuthenticatedClientElement.tsx

@@ -1,8 +1,5 @@
 'use client';
 import React from "react";
-import useSWR, { mutate } from "swr";
-import { getAPIUrl } from "@services/config/config";
-import { swrFetcher } from "@services/utils/ts/requests";
 import { useSession } from "@components/Contexts/SessionContext";
 import { useOrg } from "@components/Contexts/OrgContext";
 

apps/web/components/Security/HeaderProfileBox.tsx

@@ -1,5 +1,5 @@
 'use client';
-import React, { use, useEffect } from "react";
+import React, { useEffect } from "react";
 import styled from "styled-components";
 import Link from "next/link";
 import Avvvatars from "avvvatars-react";