handle auth

src/components/layout/Layout.tsx

@@ -1,17 +1,17 @@
 import { FC } from 'react';
-// import { Sidebar } from './sidebar/Sidebar';
+import { Sidebar } from '../sidebar/Sidebar';
 import { Box, Toolbar } from '@mui/material';
 
 interface LayoutProps {
   children: React.ReactNode;
 }
 
-// const drawerWidth = 240;
+const drawerWidth = 240;
 
 export const Layout: FC<LayoutProps> = ({ children }) => {
   return (
     <Box sx={{ display: 'flex' }}>
-      {/* <Sidebar drawerWidth={drawerWidth} /> */}
+      <Sidebar drawerWidth={drawerWidth} />
 
       <Box component='main' sx={{ flexGrow: 1, px: 3, py: 2 }}>
         <Toolbar />

src/guards/AuthGuard.tsx

@@ -1,9 +1,32 @@
 import { Navigate, Outlet } from 'react-router-dom';
 import { PublicRoutes } from '../config/routes';
+import { Layout } from '../components/layout/Layout';
+import { useEffect, useMemo, useState } from 'react';
+import PocketBase from 'pocketbase';
 
 const AuthGuard = () => {
-  const user = true;
+  const pb = useMemo(
-  return user ? <Outlet /> : <Navigate replace to={PublicRoutes.HOME} />;
+    () => new PocketBase(import.meta.env.VITE_BASE_URL_API),
+    []
+  );
+
+  const [, setToken] = useState(pb.authStore.token);
+  const [user, setUser] = useState(pb.authStore.model);
+
+  useEffect(() => {
+    return pb.authStore.onChange((token, model) => {
+      setToken(token);
+      setUser(model);
+    });
+  }, [pb.authStore]);
+
+  return user ? (
+    <Layout>
+      <Outlet />
+    </Layout>
+  ) : (
+    <Navigate replace to={PublicRoutes.HOME} />
+  );
 };
 
 export default AuthGuard;

src/services/auth/login.ts

@@ -1,7 +1,5 @@
 import PocketBase from 'pocketbase';
 
-const pb = new PocketBase(import.meta.env.VITE_BASE_URL_API);
-
 export interface LoginResponse {
   record: {
     avatar: string;
@@ -19,6 +17,7 @@ export const login = async (
   email: string,
   password: string
 ): Promise<LoginResponse> => {
+  const pb = new PocketBase(import.meta.env.VITE_BASE_URL_API);
   const collection = 'users';
 
   try {
@@ -26,12 +25,6 @@ export const login = async (
       .collection(collection)
       .authWithPassword(email, password);
 
-    document.cookie = pb.authStore.exportToCookie({
-      maxAge: 3600000,
-      httpOnly: false,
-    });
-
-    pb.authStore.clear();
     return {
       record: {
         avatar: authData.record.avatar,