🔥 wip: add namespace support

[skip ci]

cmd/server/web/src/components/ui/user-nav.tsx

@@ -1,8 +1,4 @@
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "./avatar";
+import {Avatar, AvatarFallback, AvatarImage,} from "./avatar";
 import {Button} from "./button";
 import {
   DropdownMenu,
@@ -15,17 +11,17 @@ import {
 } from "./dropdown-menu";
 import {useContext} from "react";
 import AuthContext, {Auth} from "@/context/auth-provider.tsx";
-import {useNavigate} from "react-router-dom";
 import axios from "@/api/axios.ts";
 
 export function UserNav() {
   const {setAuth} = useContext(AuthContext);
-  const navigate = useNavigate();
 
   const logout = async () => {
     try {
       const savedAuthData = localStorage.getItem('authData');
-      const authData: Auth = JSON.parse(savedAuthData);
+
+// Check if savedAuthData is not null before parsing
+      const authData: Auth = savedAuthData ? JSON.parse(savedAuthData) : null;
       const accessToken = authData ? authData.access_token : '';
 
       const response = await axios.post('/api/v1/logout_user',
@@ -41,6 +37,9 @@ export function UserNav() {
       if (response.status === 200) {
         // Clearing auth data from localStorage and context
         localStorage.removeItem('authData');
+        if (setAuth) {
+          setAuth(null);
+        }
 
         // Redirect to the login page or another page as per your application flow
         location.href = '/login';

cmd/server/web/src/context/auth-provider.tsx

@@ -1,8 +1,8 @@
 import {createContext, Dispatch, PropsWithChildren, SetStateAction, useMemo, useState} from "react";
 
 interface AuthContextProps {
-  auth?: Auth;
-  setAuth?: Dispatch<SetStateAction<Auth>>;
+  auth?: Auth | null;
+  setAuth?: Dispatch<SetStateAction<Auth | null>>;
 }
 
 const AuthContext = createContext<AuthContextProps>({});
@@ -28,9 +28,10 @@ export type Auth = {
 export const AuthProvider = ({ children }: PropsWithChildren<{}>) => {
   // Loading auth data from localStorage
   const savedAuthData = localStorage.getItem('authData');
-  const initialAuth: Auth = savedAuthData ? JSON.parse(savedAuthData) : undefined;
+  const initialAuth: Auth | null = savedAuthData ? JSON.parse(savedAuthData) : null;
 
-  const [auth, setAuth] = useState<Auth>(initialAuth);
+  // Allow the state to be Auth or null
+  const [auth, setAuth] = useState<Auth | null>(initialAuth);
 
   const value = useMemo(() => ({ auth, setAuth }), [auth, setAuth]);
 

cmd/server/web/src/pages/register/components/user-register-form.tsx

@@ -22,7 +22,7 @@ export function UserRegisterForm({className, ...props}: UserRegisterFormProps) {
   const [name, setName] = useState<string>("")
   const [email, setEmail] = useState<string>("")
   const [password, setPassword] = useState<string>("")
-  const {auth, setAuth} = useAuth();
+  const {auth} = useAuth();
 
   async function onSubmit(event: React.SyntheticEvent) {
     event.preventDefault()