feat: use new session and auth provider for the frontend

apps/web/components/Security/HeaderProfileBox.tsx

@@ -1,18 +1,18 @@
 'use client';
-import React from "react";
+import React, { use, useEffect } from "react";
 import styled from "styled-components";
 import Link from "next/link";
-import { AuthContext } from "./AuthProviderDepreceated";
 import Avvvatars from "avvvatars-react";
 import { GearIcon } from "@radix-ui/react-icons";
 import { Settings } from "lucide-react";
+import { useSession } from "@components/Contexts/SessionContext";
 
 export const HeaderProfileBox = () => {
-  const auth: any = React.useContext(AuthContext);
+  const session = useSession() as any;
 
   return (
     <ProfileArea>
-      {!auth.isAuthenticated && (
+      {!session.isAuthenticated && (
         <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>
@@ -28,13 +28,13 @@ export const HeaderProfileBox = () => {
           </ul>
         </UnidentifiedArea>
       )}
-      {auth.isAuthenticated && (
+      {session.isAuthenticated && (
         <AccountArea className="space-x-0">
           <div className="flex items-center space-x-2">
-            <div className="text-xs">{auth.userInfo.username} </div>
+            <div className="text-xs">{session.user.username} </div>
             <div className="py-4">
               <div className="shadow-sm rounded-xl">
-              <Avvvatars radius={3} size={30} value={auth.userInfo.user_uuid} style="shape" />
+                <Avvvatars radius={3} size={30} value={session.user.user_uuid} style="shape" />
               </div>
             </div>
             <Link className="text-gray-600" href={"/dash"}><Settings size={14} /></Link>