feat: init new auth

apps/web/components/ContentPlaceHolder.tsx

@@ -7,7 +7,7 @@ import useAdminStatus from './Hooks/useAdminStatus'
 function ContentPlaceHolderIfUserIsNotAdmin({ text }: { text: string }) {
     const isUserAdmin = useAdminStatus() as any
     return (
-        <div>{isUserAdmin ? text : 'No content yet'}</div>
+        <span>{isUserAdmin ? text : 'No content yet'}</span>
     )
 }
 

apps/web/components/Contexts/SessionContext.tsx

@@ -1,77 +0,0 @@
-'use client'
-import {
-  getNewAccessTokenUsingRefreshToken,
-  getUserSession,
-} from '@services/auth/auth'
-import React, { useContext, createContext, useEffect } from 'react'
-
-export const SessionContext = createContext({}) as any
-
-type Session = {
-  access_token: string
-  user: any
-  roles: any
-  isLoading: boolean
-  isAuthenticated: boolean
-}
-
-function SessionProvider({ children }: { children: React.ReactNode }) {
-  const [session, setSession] = React.useState<Session>({
-    access_token: '',
-    user: {},
-    roles: {},
-    isLoading: true,
-    isAuthenticated: false,
-  })
-
-  async function getNewAccessTokenUsingRefreshTokenUI() {
-    let data = await getNewAccessTokenUsingRefreshToken()
-    return data.access_token
-  }
-
-  async function checkSession() {
-    // Get new access token using refresh token
-    const access_token = await getNewAccessTokenUsingRefreshTokenUI()
-
-    if (access_token) {
-      // Get user session info
-      const user_session = await getUserSession(access_token)
-
-      // 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,
-      })
-    }
-  }
-
-  useEffect(() => {
-    // Check session
-    checkSession()
-  }, [])
-
-  return (
-    <SessionContext.Provider value={session}>
-      {children}
-    </SessionContext.Provider>
-  )
-}
-
-export function useSession() {
-  return useContext(SessionContext)
-}
-
-export default SessionProvider

apps/web/components/Dashboard/UI/LeftMenu.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 ToolTip from '@components/StyledElements/Tooltip/Tooltip'
 import LearnHouseDashboardLogo from '@public/dashLogo.png'
 import { logout } from '@services/auth/auth'
@@ -123,7 +123,7 @@ function LeftMenu() {
         <div className="flex flex-col mx-auto pb-7 space-y-2">
           <div className="flex items-center flex-col space-y-2">
             <ToolTip
-              content={'@' + session.user.username}
+              content={'@' + session.data.user.username}
               slateBlack
               sideOffset={8}
               side="right"
@@ -134,7 +134,7 @@ function LeftMenu() {
             </ToolTip>
             <div className="flex items-center flex-col space-y-1">
               <ToolTip
-                content={session.user.username + "'s Settings"}
+                content={session.data.user.username + "'s Settings"}
                 slateBlack
                 sideOffset={8}
                 side="right"

apps/web/components/Dashboard/UserAccount/UserEditGeneral/UserEditGeneral.tsx

@@ -1,7 +1,8 @@
+'use client';
 import { updateProfile } from '@services/settings/profile'
 import React, { useEffect } from 'react'
 import { Formik, Form, Field } from 'formik'
-import { useSession } from '@components/Contexts/SessionContext'
+import { useSession } from 'next-auth/react'
 import {
   ArrowBigUpDash,
   Check,
@@ -23,7 +24,7 @@ function UserEditGeneral() {
     const file = event.target.files[0]
     setLocalAvatar(file)
     setIsLoading(true)
-    const res = await updateUserAvatar(session.user.user_uuid, file)
+    const res = await updateUserAvatar(session.data.user_uuid, file)
     // wait for 1 second to show loading animation
     await new Promise((r) => setTimeout(r, 1500))
     if (res.success === false) {
@@ -35,24 +36,24 @@ function UserEditGeneral() {
     }
   }
 
-  useEffect(() => {}, [session, session.user])
+  useEffect(() => {}, [session, session.data])
 
   return (
     <div className="ml-10 mr-10 mx-auto bg-white rounded-xl shadow-sm px-6 py-5">
-      {session.user && (
+      {session.data.user && (
         <Formik
           enableReinitialize
           initialValues={{
-            username: session.user.username,
-            first_name: session.user.first_name,
-            last_name: session.user.last_name,
-            email: session.user.email,
-            bio: session.user.bio,
+            username: session.data.user.username,
+            first_name: session.data.user.first_name,
+            last_name: session.data.user.last_name,
+            email: session.data.user.email,
+            bio: session.data.user.bio,
           }}
           onSubmit={(values, { setSubmitting }) => {
             setTimeout(() => {
               setSubmitting(false)
-              updateProfile(values, session.user.id)
+              updateProfile(values, session.data.user.id)
             }, 400)
           }}
         >

apps/web/components/Dashboard/UserAccount/UserEditPassword/UserEditPassword.tsx

@@ -1,4 +1,4 @@
-import { useSession } from '@components/Contexts/SessionContext'
+import { useSession } from 'next-auth/react'
 import { updatePassword } from '@services/settings/password'
 import { Formik, Form, Field } from 'formik'
 import React, { useEffect } from 'react'
@@ -7,7 +7,7 @@ function UserEditPassword() {
   const session = useSession() as any
 
   const updatePasswordUI = async (values: any) => {
-    let user_id = session.user.id
+    let user_id = session.data.user.id
     await updatePassword(user_id, values)
   }
 

apps/web/components/Hooks/useAdminStatus.tsx

@@ -1,24 +1,27 @@
 import { useOrg } from '@components/Contexts/OrgContext'
-import { useSession } from '@components/Contexts/SessionContext'
+import { useSession } from 'next-auth/react'
 import { useEffect } from 'react'
 
 function useAdminStatus() {
     const session = useSession() as any
     const org = useOrg() as any
+    console.log('useAdminStatus', {
+        session,
+    })
 
     // If session is not loaded, redirect to login
- 
+
     useEffect(() => {
-        if (session.isLoading) {
+        if (session.status == 'loading') {
             return
         }
-        
+
     }
-    , [session])
+        , [session])
 
     const isUserAdmin = () => {
-        if (session.isAuthenticated) {
-            const isAdmin = session.roles.some((role: any) => {
+        if (session.status == 'authenticated') {
+            const isAdmin = session?.data?.roles.some((role: any) => {
                 return (
                     role.org.id === org.id &&
                     (role.role.id === 1 ||
@@ -31,7 +34,7 @@ function useAdminStatus() {
         }
         return false
     }
-  
+
     // Return the user admin status
     return isUserAdmin()
 

apps/web/components/Objects/Activities/AI/AIActivityAsk.tsx

@@ -1,4 +1,4 @@
-import { useSession } from '@components/Contexts/SessionContext'
+import { useSession } from 'next-auth/react'
 import {
   sendActivityAIChatMessage,
   startActivityAIChatSession,
@@ -409,7 +409,7 @@ const AIMessagePlaceHolder = (props: {
               <span className="items-center">Hello</span>
               <span className="capitalize flex space-x-2 items-center">
                 <UserAvatar rounded="rounded-lg" border="border-2" width={35} />
-                <span>{session.user.username},</span>
+                <span>{session.data.user.username},</span>
               </span>
               <span>how can we help today ?</span>
             </p>

apps/web/components/Objects/Editor/ActiveAvatars.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import UserAvatar from '../UserAvatar'
-import { useSession } from '@components/Contexts/SessionContext'
+import { useSession } from 'next-auth/react'
 import { getUserAvatarMediaDirectory } from '@services/media/media';
 import { getCollaborationServerUrl } from '@services/config/config';
 import { useOrg } from '@components/Contexts/OrgContext';
@@ -27,11 +27,11 @@ function ActiveAvatars(props: ActiveAvatarsProps) {
         });
 
         // Remove the current user from the list
-        delete users[session.user.user_uuid];
+        delete users[session.data.user.user_uuid];
 
         setActiveUsers(users);
     }
-        , [props.mouseMovements, session.user, org]);
+        , [props.mouseMovements, session.data.user, org]);
 
 
     return (
@@ -50,7 +50,7 @@ function ActiveAvatars(props: ActiveAvatarsProps) {
                         <div className="h-2 w-2 rounded-full" style={{ position: 'absolute', bottom: -5, right: 16, backgroundColor: props.mouseMovements[key].color }} />
                     </div>
                 ))}
-                {session.isAuthenticated && (
+                {session.status && (
                     <div className='z-50'>
                         <UserAvatar
                             width={40}

apps/web/components/Objects/Editor/Editor.tsx

@@ -41,7 +41,7 @@ import html from 'highlight.js/lib/languages/xml'
 import python from 'highlight.js/lib/languages/python'
 import java from 'highlight.js/lib/languages/java'
 import { CourseProvider } from '@components/Contexts/CourseContext'
-import { useSession } from '@components/Contexts/SessionContext'
+import { useSession } from 'next-auth/react'
 import AIEditorToolkit from './AI/AIEditorToolkit'
 import useGetAIFeatures from '@components/AI/Hooks/useGetAIFeatures'
 import UserAvatar from '../UserAvatar'
@@ -145,7 +145,7 @@ function Editor(props: Editor) {
         CollaborationCursor.configure({
           provider: props.hocuspocusProvider,
           user: {
-            name: props.session.user.first_name + ' ' + props.session.user.last_name,
+            name: props.session.data.user.first_name + ' ' + props.session.data.user.last_name,
             color: props.userRandomColor,
           },
         }),

apps/web/components/Objects/Editor/EditorWrapper.tsx

@@ -5,7 +5,7 @@ import { updateActivity } from '@services/courses/activities'
 import { toast } from 'react-hot-toast'
 import Toast from '@components/StyledElements/Toast/Toast'
 import { OrgProvider } from '@components/Contexts/OrgContext'
-import { useSession } from '@components/Contexts/SessionContext'
+import { useSession } from 'next-auth/react'
 
 // Collaboration
 import { HocuspocusProvider } from '@hocuspocus/provider'
@@ -57,7 +57,7 @@ function EditorWrapper(props: EditorWrapperProps): JSX.Element {
   document.addEventListener("mousemove", (event) => {
     // Share any information you like
     provider?.setAwarenessField("userMouseMovement", {
-      user: session.user,
+      user: session.data.user,
       mouseX: event.clientX,
       mouseY: event.clientY,
       color: thisPageColor,
@@ -72,10 +72,10 @@ function EditorWrapper(props: EditorWrapperProps): JSX.Element {
 
 
     provider?.setAwarenessField("savings_states", {
-      [session.user.user_uuid]: {
+      [session.data.user.user_uuid]: {
         status: 'action_save',
         timestamp: new Date().toISOString(),
-        user: session.user
+        user: session.data.user
       }
     });
 

apps/web/components/Objects/UserAvatar.tsx

@@ -1,28 +1,32 @@
-import { useSession } from '@components/Contexts/SessionContext'
 import React, { useEffect } from 'react'
 import { getUriWithOrg } from '@services/config/config'
 import { useParams } from 'next/navigation'
 import { getUserAvatarMediaDirectory } from '@services/media/media'
+import { useSession } from 'next-auth/react'
 
 type UserAvatarProps = {
   width?: number
   avatar_url?: string
   use_with_session?: boolean
   rounded?:
-    | 'rounded-md'
-    | 'rounded-xl'
-    | 'rounded-lg'
-    | 'rounded-full'
-    | 'rounded'
+  | 'rounded-md'
+  | 'rounded-xl'
+  | 'rounded-lg'
+  | 'rounded-full'
+  | 'rounded'
   border?: 'border-2' | 'border-4' | 'border-8'
   borderColor?: string
-  predefined_avatar?: 'ai' | 'empty' 
+  predefined_avatar?: 'ai' | 'empty'
 }
 
 function UserAvatar(props: UserAvatarProps) {
   const session = useSession() as any
   const params = useParams() as any
 
+  function checkUrlProtocol(url: string): boolean {
+    return url.startsWith('https://') || url.startsWith('http://');
+  }
+
   const predefinedAvatarFunc = () => {
     if (props.predefined_avatar === 'ai') {
       return getUriWithOrg(params.orgslug, '/ai_avatar.png')
@@ -35,10 +39,10 @@ function UserAvatar(props: UserAvatarProps) {
 
   const predefinedAvatar = predefinedAvatarFunc()
   const emptyAvatar = getUriWithOrg(params.orgslug, '/empty_avatar.png') as any
-  const uploadedAvatar = getUserAvatarMediaDirectory(
-    session.user.user_uuid,
-    session.user.avatar_image
-  ) as any
+  const uploadedAvatar =  (session.status == 'authenticated') && (checkUrlProtocol(session?.data?.user?.avatar_image)) ? session?.data?.user?.avatar_image : getUserAvatarMediaDirectory(
+    session?.data?.user?.user_uuid,
+    session?.data?.user?.avatar_image
+  )
 
   const useAvatar = () => {
     if (props.predefined_avatar) {
@@ -47,7 +51,7 @@ function UserAvatar(props: UserAvatarProps) {
       if (props.avatar_url) {
         return props.avatar_url
       } else {
-        if (session.user.avatar_image) {
+        if (session?.data?.user?.avatar_image) {
           return uploadedAvatar
         } else {
           return emptyAvatar
@@ -57,8 +61,10 @@ function UserAvatar(props: UserAvatarProps) {
   }
 
   useEffect(() => {
+
     
-  }, [session])
+
+  }, [session.status])
 
   return (
     <img
@@ -66,13 +72,10 @@ function UserAvatar(props: UserAvatarProps) {
       width={props.width ? props.width : 50}
       height={props.width ? props.width : 50}
       src={useAvatar()}
-      className={`${
-        props.avatar_url && session.user.avatar_image ? '' : 'bg-gray-700'
-      }  ${props.border ? 'border ' + props.border : ''} ${
-        props.borderColor ? props.borderColor : 'border-white'
-      } shadow-xl aspect-square w-[${props.width ? props.width : 50}px] h-[${
-        props.width ? props.width : 50
-      }px] ${props.rounded ? props.rounded : 'rounded-xl'}`}
+      className={`${props.avatar_url && session?.data?.user?.avatar_image ? '' : 'bg-gray-700'
+        }  ${props.border ? 'border ' + props.border : ''} ${props.borderColor ? props.borderColor : 'border-white'
+        } shadow-xl aspect-square w-[${props.width ? props.width : 50}px] h-[${props.width ? props.width : 50
+        }px] ${props.rounded ? props.rounded : 'rounded-xl'}`}
     />
   )
 }

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">