fetch auth session data from token

frontend/components/AppSidebar.vue

@@ -15,6 +15,7 @@ import {
 const route = useRoute();
 
 const store = useWarrenStore();
+const session = useAuthSession();
 
 async function selectWarren(id: string) {
     await store.setCurrentWarren(id, '/');
@@ -77,7 +78,7 @@ async function selectWarren(id: string) {
             </SidebarGroup>
         </SidebarContent>
         <SidebarFooter>
-            <SidebarUser />
+            <SidebarUser v-if="session != null" :user="session.user" />
         </SidebarFooter>
     </Sidebar>
 </template>

frontend/components/SidebarUser.vue

@@ -13,14 +13,15 @@ import {
 } from '@/components/ui/dropdown-menu';
 import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
 import { logout } from '~/lib/api/auth/logout';
+import type { AuthUser } from '~/types/auth';
 
 const { isMobile } = useSidebar();
+const { user } = defineProps<{
+    user: AuthUser;
+}>();
 
-const user = {
-    name: '409',
-    email: 'user@example.com',
-    avatar: 'https://cdn.discordapp.com/avatars/285424924049276939/0368b00056c416cae689ab1434c0aac0.webp',
-};
+const AVATAR =
+    'https://cdn.discordapp.com/avatars/285424924049276939/0368b00056c416cae689ab1434c0aac0.webp';
 </script>
 
 <template>
@@ -34,7 +35,7 @@ const user = {
                         tooltip="Settings"
                     >
                         <Avatar class="h-8 w-8 rounded-lg">
-                            <AvatarImage :src="user.avatar" />
+                            <AvatarImage :src="AVATAR" />
                             <AvatarFallback class="rounded-lg"
                                 >A</AvatarFallback
                             >
@@ -66,10 +67,7 @@ const user = {
                             class="flex items-center gap-2 px-1 py-1.5 text-left text-sm"
                         >
                             <Avatar class="h-8 w-8 rounded-lg">
-                                <AvatarImage
-                                    :src="user.avatar"
-                                    :alt="user.name"
-                                />
+                                <AvatarImage :src="AVATAR" :alt="user.name" />
                                 <AvatarFallback class="rounded-lg">
                                     CN
                                 </AvatarFallback>
@@ -86,7 +84,7 @@ const user = {
                             </div>
                         </div>
                     </DropdownMenuLabel>
-                    <DropdownMenuSeparator />
+                    <!-- <DropdownMenuSeparator />
                     <DropdownMenuGroup>
                         <DropdownMenuItem>
                             <Icon name="lucide:user" />
@@ -99,7 +97,7 @@ const user = {
                             <Icon name="lucide:settings" />
                             Settings
                         </DropdownMenuItem>
-                    </DropdownMenuGroup>
+                    </DropdownMenuGroup> -->
                     <DropdownMenuSeparator />
                     <DropdownMenuItem @click="logout">
                         <Icon name="lucide:door-open" />

frontend/lib/api/auth/getSession.ts

@@ -0,0 +1,42 @@
+import type { AuthSessionType, AuthUser } from '~/types/auth';
+import type { ApiResponse } from '~/types/api';
+
+export async function getAuthSessionData(params: {
+    sessionType: AuthSessionType;
+    sessionId: string;
+}): Promise<
+    { success: true; user: AuthUser; expiresAt: number } | { success: false }
+> {
+    const { data, status } = await useFetch<
+        ApiResponse<{
+            user: AuthUser;
+            expiresAt: number;
+        }>
+    >(getApiUrl('auth/session'), {
+        method: 'GET',
+        key: new Date().getTime().toString(),
+        headers: {
+            authorization: `${params.sessionType} ${params.sessionId}`,
+        },
+    });
+
+    if (status.value !== 'success' || data.value == null) {
+        return {
+            success: false,
+        };
+    }
+
+    const { id, name, email, admin } = data.value.data.user;
+    const expiresAt = data.value.data.expiresAt;
+
+    return {
+        success: true,
+        user: {
+            id,
+            name,
+            email,
+            admin,
+        },
+        expiresAt,
+    };
+}

frontend/lib/api/auth/login.ts

@@ -1,10 +1,12 @@
 import { toast } from 'vue-sonner';
 import type { ApiResponse } from '~/types/api';
+import { getAuthSessionData } from './getSession';
 
 export async function loginUser(
     email: string,
     password: string
 ): Promise<{ success: boolean }> {
+    console.log('logging in...', email, password);
     const { data, error } = await useFetch<ApiResponse<{ token: string }>>(
         getApiUrl('auth/login'),
         {
@@ -30,7 +32,24 @@ export async function loginUser(
         };
     }
 
-    useAuthSession().value = { type: 'WarrenAuth', id: data.value.data.token };
+    // TODO: Get this data directly from the login request
+    const sessionData = await getAuthSessionData({
+        sessionType: 'WarrenAuth',
+        sessionId: data.value.data.token,
+    });
+
+    if (!sessionData.success) {
+        return {
+            success: false,
+        };
+    }
+
+    useAuthSession().value = {
+        type: 'WarrenAuth',
+        id: data.value.data.token,
+        user: sessionData.user,
+        expiresAt: sessionData.expiresAt,
+    };
 
     toast.success('Login', {
         description: `Successfully logged in`,

frontend/types/auth.ts

@@ -2,4 +2,14 @@ export type AuthSessionType = 'WarrenAuth';
 export interface AuthSession {
     type: AuthSessionType;
     id: string;
+
+    user: AuthUser;
+    expiresAt: number;
+}
+
+export interface AuthUser {
+    id: string;
+    name: string;
+    email: string;
+    admin: boolean;
 }