save

.env.example

@@ -1,2 +1,3 @@
-BACKEND_EXAMPLE=http://localhost:8080
-FILE_SERVICE_HOST=http://files.localhost
+STOCK_SERVICE_HOST=http://localhost:7070
+STOCK_SERVICE_WS_HOST=localhost:7070
+POCKETBASE_URL=

package.json

@@ -10,10 +10,10 @@
     "test": "jest --passWithNoTests --setupFiles dotenv/config",
     "preview": "vite preview",
     "prepare": "node .husky/install.mjs",
-    "format": "prettier --write ./src"
+    "format": "prettier --write ./src --log-level silent"
   },
   "dependencies": {
-    "@budgetbuddyde/types": "^1.0.20",
+    "@budgetbuddyde/types": "^1.0.24",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.14.15",
@@ -32,9 +32,11 @@
     "dotenv": "^16.3.1",
     "framer-motion": "^10.16.4",
     "lodash": "^4.17.21",
+    "pocketbase": "^0.21.1",
     "react": "^18.2.0",
     "react-apexcharts": "^1.4.1",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.51.2",
     "react-router-dom": "^6.17.0",
     "socket.io-client": "^4.7.5",
     "vite-plugin-ejs": "^1.7.0",

src/app.config.ts

@@ -15,6 +15,7 @@ export type TAppConfig = {
   table: {
     cellSize: TableCellProps['size'];
   };
+  authProvider: Record<string, string>;
   allowedFileTypes: string[];
 };
 
@@ -31,5 +32,9 @@ export const AppConfig: TAppConfig = {
   table: {
     cellSize: 'medium',
   },
+  authProvider: {
+    github: 'GitHub',
+    // "google": "Google",
+  },
   allowedFileTypes: ['image/jpeg', 'image/jpg', 'image/png', 'image/webp'],
 };

src/components/Auth/Auth.context.tsx

@@ -1,12 +1,16 @@
 import React from 'react';
-import {TSession, TUser} from '@budgetbuddyde/types';
-import {AuthService} from './Auth.service';
+import {pb} from '@/pocketbase.ts';
+import {type TUser, ZUser} from '@budgetbuddyde/types';
 
 export interface IAuthContext {
   loading: boolean;
-  session: TSession | null;
-  setSession: React.Dispatch<React.SetStateAction<IAuthContext['session']>>;
-  authOptions: Pick<TUser, 'uuid' | 'password'>;
+  sessionUser: TUser | null;
+  setSession: React.Dispatch<React.SetStateAction<IAuthContext['sessionUser']>>;
+  /**
+   * @deprecated Due to the switch to Pocketbase as an backend, there is no need to store the uuid and password in the context anymore.
+   */
+  authOptions: null;
+  logout: () => void;
 }
 
 export const AuthContext = React.createContext({} as IAuthContext);
@@ -23,27 +27,54 @@ export type AuthProviderProps = React.PropsWithChildren;
 
 export const AuthProvider: React.FC<AuthProviderProps> = ({children}) => {
   const [loading, setLoading] = React.useState(true);
-  const [session, setSession] = React.useState<IAuthContext['session']>(null);
+  const [sessionUser, setSessionUser] = React.useState<IAuthContext['sessionUser']>(null);
 
-  const authOptions: Pick<TUser, 'uuid' | 'password'> = React.useMemo(() => {
-    if (!session) return {uuid: '', password: ''};
-    return {
-      uuid: session.uuid,
-      password: session.password,
-    };
-  }, [session]);
+  const authOptions: IAuthContext['authOptions'] = React.useMemo(() => {
+    return null;
+  }, [sessionUser]);
 
-  const retrieveCurrentSession = async () => {
+  const retrieveCurrentSession = () => {
     setLoading(true);
-    const [session, error] = await AuthService.validate();
-    if (error) console.error(error);
-    if (session) setSession(session);
+    try {
+      const model = pb.authStore.isValid && pb.authStore.isAuthRecord ? pb.authStore.model : null;
+      const parsingResult = ZUser.safeParse(model);
+      if (!parsingResult.success) {
+        console.error(parsingResult.error);
+        return;
+      }
+      setSessionUser(parsingResult.data);
+    } catch (e) {
+      console.error(e);
+      setSessionUser(null);
+    }
+
     setLoading(false);
   };
 
+  const logout = () => {
+    pb.authStore.clear();
+  };
+
   React.useLayoutEffect(() => {
     retrieveCurrentSession();
+    const authStoreListener = pb.authStore.onChange((_token, model) => {
+      const parsingResult = ZUser.safeParse(model);
+      if (!parsingResult.success) {
+        console.error(parsingResult.error);
+        return;
+      }
+      setSessionUser(parsingResult.data);
+    });
+
+    return () => {
+      authStoreListener();
+    };
   }, []);
 
-  return <AuthContext.Provider value={{loading, session, setSession, authOptions}} children={children} />;
+  return (
+    <AuthContext.Provider
+      value={{loading, sessionUser, setSession: setSessionUser, authOptions, logout}}
+      children={children}
+    />
+  );
 };

src/components/Auth/Layout/index.ts

@@ -1,4 +1,3 @@
 export * from './Auth.layout';
 export * from './withAuthLayout';
 export * from './Unauthentificated.layout';
-export * from './NotVerified.component';