in the middle, working for login and logout test,

002_source/ionic_mobile/src/db/UserMetas/type.d.ts

@@ -1,5 +1,19 @@
 import type { BillingAddress } from '@/components/dashboard/user_meta/type.d';
 
+// DBUserMeta type definitions
+export interface DBUserMeta {
+  name: string;
+  avatar: string;
+  email: string;
+  phone: string;
+  quota: number;
+  status: 'active' | 'blocked' | 'pending';
+  //
+  collectionId: string;
+  id: string;
+  createdAt: Date;
+}
+
 // UserMeta type definitions
 export interface UserMeta {
   id: string;

002_source/ionic_mobile/src/lib/getStudentAvatar.tsx

@@ -0,0 +1,5 @@
+import { DBUserMeta } from '../db/UserMetas/type';
+
+export function getStudentAvatar(studentMeta: DBUserMeta) {
+  return `url(http://localhost:8090/api/files/${studentMeta.collectionId}/${studentMeta.id}/${studentMeta.avatar})`;
+}

002_source/ionic_mobile/src/pages/auth/AuthorizedTest/index.tsx

@@ -49,6 +49,7 @@ function AuthorizedTest(): React.JSX.Element {
         <IonGrid className="ion-padding">
           <IonCol>
             <IonRow>Authorized page test</IonRow>
+            {JSON.stringify({ user })}
             {/*  */}
             <IonRow>
               <IonButton onClick={handleViewStudentInfoOnClick}>{t('view-student-info')}</IonButton>

002_source/ionic_mobile/src/pages/auth/Home/index.tsx

@@ -24,7 +24,7 @@ import { LoadingScreen } from '../../../components/LoadingScreen';
 
 const AuthHome = () => {
   const { t } = useTranslation();
-  const { user } = useUser();
+  const { user, checkSession } = useUser();
   const router = useIonRouter();
 
   const [showLoading, setShowLoading] = useState<boolean>(true);
@@ -32,19 +32,29 @@ const AuthHome = () => {
     show: false,
     message: '',
   });
+  const [checkingSession, setCheckingSession] = useState<boolean>(true);
 
   useEffect(() => {
-    if (!user) {
-    } else {
-      if (user?.id) {
+    if (!checkingSession) {
+      if (!user) {
+        router.push(Paths.AuthLogin);
+      } else {
         router.push(Paths.AuthorizedTest);
       }
     }
     setShowLoading(false);
-  }, []);
+  }, [user, checkingSession]);
+
+  useEffect(() => {
+    checkSession?.()
+      .then(() => {
+        setCheckingSession(false);
+      })
+      .catch((err) => console.error(err));
+  }, [checkSession]);
 
   if (showLoading) return <LoadingScreen />;
-  if (showError) return <>{showError.message}</>;
+  // if (showError) return <>{showError.message}</>;
 
   return (
     <IonPage className={'styles.homePage'}>

002_source/ionic_mobile/src/pages/auth/StudentInfo/index.tsx

@@ -1,41 +1,35 @@
 import {
-  IonAvatar,
-  IonBackButton,
   IonButton,
-  IonButtons,
-  IonCardTitle,
   IonCol,
   IonContent,
   IonFooter,
   IonGrid,
   IonHeader,
-  IonIcon,
-  IonImg,
-  IonInput,
-  IonLabel,
   IonPage,
   IonRow,
   IonText,
-  IonToolbar,
   useIonRouter,
 } from '@ionic/react';
 import styles from './style.module.scss';
-import _ from 'lodash';
-import { Router, useParams } from 'react-router';
+import { useParams } from 'react-router';
 import { Wave } from '../../../components/Wave';
 import { Paths } from '../../../Paths';
 import { useEffect, useState } from 'react';
 import { getUserMetaById } from '../../../db/UserMetas/GetById';
 import { useTranslation } from 'react-i18next';
-import { UserMeta } from '../../../db/UserMetas/type';
+import { DBUserMeta } from '../../../db/UserMetas/type';
 import { LoadingScreen } from '../../../components/LoadingScreen';
+import { getStudentAvatar } from '../../../lib/getStudentAvatar';
+import { authClient } from '../../../lib/auth/custom/client';
+import { useUser } from '../../../hooks/use-user';
 
 function StudentInfo(): React.JSX.Element {
   const router = useIonRouter();
   const { id } = useParams<{ id: string }>();
   const { t } = useTranslation();
 
-  const [studentMeta, setStudentMeta] = useState<UserMeta>();
+  const [studentMeta, setStudentMeta] = useState<DBUserMeta>();
+  const test = useUser();
 
   const [showLoading, setShowLoading] = useState<boolean>(true);
   const [showError, setShowError] = useState<{ show: boolean; message: string }>({ show: false, message: '' });
@@ -51,7 +45,7 @@ function StudentInfo(): React.JSX.Element {
   async function handleFetchUserMeta() {
     try {
       const result = await getUserMetaById(id);
-      const tempStudentMeta = result as unknown as UserMeta;
+      const tempStudentMeta = result as unknown as DBUserMeta;
 
       setStudentMeta(tempStudentMeta);
       setShowLoading(false);
@@ -61,11 +55,21 @@ function StudentInfo(): React.JSX.Element {
     }
   }
 
+  async function handleLogoutOnClick() {
+    try {
+      await authClient.signOut();
+      router.push(Paths.AuthLogin);
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
   useEffect(() => {
     void handleFetchUserMeta();
   }, []);
 
   if (showLoading) return <LoadingScreen />;
+  if (!studentMeta) return <LoadingScreen />;
   if (showError.show) return <>{showError.message}</>;
 
   return (
@@ -78,7 +82,7 @@ function StudentInfo(): React.JSX.Element {
             <IonCol size={'3'}>
               <div
                 style={{
-                  backgroundImage: `url("https://docs-demo.ionic.io/assets/madison.jpg")`,
+                  backgroundImage: getStudentAvatar(studentMeta),
                   backgroundSize: 'cover',
                   backgroundPosition: 'center',
                   backgroundRepeat: 'no-repeat',
@@ -129,7 +133,11 @@ function StudentInfo(): React.JSX.Element {
           </IonRow>
           {/*  */}
           <IonRow className="ion-justify-content-center">
-            <IonButton onClick={handleBackOnClick}>Back</IonButton>
+            <IonButton onClick={handleBackOnClick}>{t('back')}</IonButton>
+          </IonRow>
+
+          <IonRow className="ion-justify-content-center">
+            <IonButton onClick={handleLogoutOnClick}>{t('logout')}</IonButton>
           </IonRow>
         </IonGrid>
       </IonContent>