feat: init new auth

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'}`}
     />
   )
 }