feat: init new auth

apps/web/components/Security/AdminAuthorization.tsx

@@ -1,6 +1,6 @@
 'use client'
 import { useOrg } from '@components/Contexts/OrgContext'
-import { useSession } from '@components/Contexts/SessionContext'
+import { useSession } from 'next-auth/react'
 import useAdminStatus from '@components/Hooks/useAdminStatus'
 import { usePathname, useRouter } from 'next/navigation'
 import React from 'react'
@@ -33,7 +33,7 @@ function AdminAuthorization(props: AuthorizationProps) {
 
   // Verify if the user is authenticated
   const isUserAuthenticated = () => {
-    if (session.isAuthenticated === true) {
+    if (session.status === 'authenticated') {
       return true
     } else {
       return false
@@ -59,7 +59,6 @@ function AdminAuthorization(props: AuthorizationProps) {
     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) {
@@ -92,7 +91,7 @@ function AdminAuthorization(props: AuthorizationProps) {
   }
 
   React.useEffect(() => {
-    if (session.isLoading) {
+    if (session.status == 'loading') {
       return
     }
 

apps/web/components/Security/AuthenticatedClientElement.tsx

@@ -1,6 +1,6 @@
 'use client'
 import React from 'react'
-import { useSession } from '@components/Contexts/SessionContext'
+import { useSession } from 'next-auth/react'
 import { useOrg } from '@components/Contexts/OrgContext'
 
 interface AuthenticatedClientElementProps {
@@ -8,11 +8,11 @@ interface AuthenticatedClientElementProps {
   checkMethod: 'authentication' | 'roles'
   orgId?: string
   ressourceType?:
-    | 'collections'
-    | 'courses'
-    | 'activities'
-    | 'users'
-    | 'organizations'
+  | 'collections'
+  | 'courses'
+  | 'activities'
+  | 'users'
+  | 'organizations'
   action?: 'create' | 'update' | 'delete' | 'read'
 }
 
@@ -49,19 +49,19 @@ export const AuthenticatedClientElement = (
   }
 
   function check() {
-    if (session.isAuthenticated === false) {
+    if (session.status == 'authenticated') {
       setIsAllowed(false)
       return
     } else {
       if (props.checkMethod === 'authentication') {
-        setIsAllowed(session.isAuthenticated)
-      } else if (props.checkMethod === 'roles') {
+        setIsAllowed(session.status == 'authenticated')
+      } else if (props.checkMethod === 'roles' && session.status == 'authenticated') {
         return setIsAllowed(
           isUserAllowed(
-            session.roles,
+            session?.data?.roles,
             props.action!,
             props.ressourceType!,
-            org.org_uuid
+            org?.org_uuid
           )
         )
       }
@@ -69,7 +69,7 @@ export const AuthenticatedClientElement = (
   }
 
   React.useEffect(() => {
-    if (session.isLoading) {
+    if (session.status == 'loading') {
       return
     }
 

apps/web/components/Security/HeaderProfileBox.tsx

@@ -3,21 +3,22 @@ import React, { useEffect } from 'react'
 import styled from 'styled-components'
 import Link from 'next/link'
 import { Settings } from 'lucide-react'
-import { useSession } from '@components/Contexts/SessionContext'
 import UserAvatar from '@components/Objects/UserAvatar'
 import useAdminStatus from '@components/Hooks/useAdminStatus'
+import { useSession } from 'next-auth/react'
 
 export const HeaderProfileBox = () => {
   const session = useSession() as any
   const isUserAdmin = useAdminStatus() as any
 
   useEffect(() => {
+    console.log(session)
   }
   , [session])
 
   return (
     <ProfileArea>
-      {!session.isAuthenticated && (
+      {session.status == 'unauthenticated' && (
         <UnidentifiedArea className="flex text-sm text-gray-700 font-bold p-1.5 px-2 rounded-lg">
           <ul className="flex space-x-3 items-center">
             <li>
@@ -29,11 +30,11 @@ export const HeaderProfileBox = () => {
           </ul>
         </UnidentifiedArea>
       )}
-      {session.isAuthenticated && (
+      {session.status == 'authenticated' && (
         <AccountArea className="space-x-0">
           <div className="flex items-center space-x-2">
             <div className='flex items-center space-x-2' >
-              <p className='text-sm'>{session.user.username}</p>
+              <p className='text-sm'>{session.data.user.username}</p>
               {isUserAdmin && <div className="text-[10px] bg-rose-300 px-2 font-bold rounded-md shadow-inner py-1">ADMIN</div>}
             </div>
             <div className="py-4">