Merge pull request #69 from LabSyncro/feat/auth-with-hmi

Feat/auth with hmi

Author: ngyngcphu

.env.example

@@ -11,3 +11,4 @@ GOOGLE_CLIENT_ID=
 GOOGLE_CLIENT_SECRET=
 PRINT_LABELS_ENDPOINT=
 AUTH_API_BASE_URL=
+CORS_ALLOWED_ORIGIN=

components/app/Auth/LabSelector.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { laboratoryService } from "~/services";
+
+const emit = defineEmits<{
+  (
+    e: "select",
+    lab: { id: string; name: string; room: string; branch: string }
+  ): void;
+}>();
+
+const isLoading = ref(true);
+const labs = ref<
+  Array<{ id: string; name: string; room: string; branch: string }>
+>([]);
+const selectedLabId = ref("");
+const error = ref("");
+
+onMounted(async () => {
+  try {
+    const response = await laboratoryService.getLabsManagedByAdmin(0, 500, {});
+    labs.value = response.labs;
+  } catch (err: any) {
+    error.value = err.data?.message || "Failed to load laboratories";
+  } finally {
+    isLoading.value = false;
+  }
+});
+
+function handleSelect() {
+  const selectedLab = labs.value.find((lab) => lab.id === selectedLabId.value);
+  if (selectedLab) {
+    emit("select", selectedLab);
+  }
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <div v-if="isLoading" class="text-center py-4">
+      <div
+        class="inline-block w-6 h-6 border-2 border-tertiary-darker border-t-transparent rounded-full animate-spin"
+      ></div>
+      <p class="mt-2 text-sm text-gray-500">Loading laboratories...</p>
+    </div>
+
+    <div v-else-if="error" class="text-center text-red-600">
+      {{ error }}
+    </div>
+
+    <div v-else-if="labs.length === 0" class="text-center text-gray-500">
+      No laboratories available.
+    </div>
+
+    <div v-else class="space-y-4">
+      <div class="space-y-2">
+        <Select v-model="selectedLabId">
+          <SelectTrigger id="lab-select" :disabled="isLoading">
+            <SelectValue placeholder="Select a laboratory" />
+          </SelectTrigger>
+          <SelectContent>
+            <div v-if="isLoading" class="flex items-center justify-center p-2">
+              <div
+                class="w-4 h-4 border-2 border-gray-300 border-t-primary rounded-full animate-spin"
+              ></div>
+            </div>
+            <SelectItem v-for="lab in labs" :key="lab.id" :value="lab.id">
+              {{ lab.room }}, {{ lab.branch }}
+            </SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      <Button
+        :disabled="!selectedLabId"
+        @click="handleSelect"
+        class="w-full bg-tertiary-dark hover:bg-tertiary-darker"
+      >
+        Confirm Selection
+      </Button>
+    </div>
+  </div>
+</template>

components/app/Auth/LoginButton.vue

@@ -1,11 +1,25 @@
 <script setup lang="ts">
-const { signIn, data } = useAuth();
-const router = useRouter();
+const { data, signIn } = useAuth();
+const route = useRoute();
+
+const hmiCode = computed(() => route.query.hmiCode as string | undefined);
+const defaultRoute = computed(() => data.value?.user?.defaultRoute || "/");
 
 const handleLogin = async () => {
-  await signIn('google');
-  if (data.value?.user?.defaultRoute) {
-    router.push(data.value.user.defaultRoute);
+  let callbackUrl =
+    (route.query.callbackUrl as string | undefined) || defaultRoute.value;
+
+  if (hmiCode.value && !route.query.callbackUrl) {
+    callbackUrl = `/auth/hmi?hmiCode=${hmiCode.value}`;
+  }
+
+  try {
+    await signIn("google", {
+      callbackUrl: callbackUrl,
+      redirect: true,
+    });
+  } catch (err) {
+    showError({ statusCode: 401, statusMessage: "Authentication failed" });
   }
 };
 </script>
@@ -15,11 +29,11 @@ const handleLogin = async () => {
     @click="handleLogin"
     class="w-full flex items-center justify-center gap-3 px-4 py-3 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-tertiary-darker transition-colors"
   >
-    <img 
-      class="h-5 w-5" 
-      src="https://www.svgrepo.com/show/475656/google-color.svg" 
+    <img
+      class="h-5 w-5"
+      src="https://www.svgrepo.com/show/475656/google-color.svg"
       alt="Google logo"
-    >
+    />
     <span>Sign in with Google</span>
   </button>
-</template>
+</template>

composables/useOneTimeQrCode.ts

@@ -1,5 +1,6 @@
 import QRCode from 'qrcode';
 import { useToast } from 'vue-toastification';
+import { authService } from '~/services/auth';
 
 const toast = useToast();
 
@@ -160,9 +161,21 @@ export function useOneTimeQrCode() {
   /**
    * Handle a scanned QR code to verify the token inside
    * @param scannedQrData The data from the scanned QR code
-   * @returns The user ID and any extra data if verification succeeds, null otherwise
+   * @returns The user information and any extra data if verification succeeds, null otherwise
    */
-  const verifyScannedQrCode = async (scannedQrData: string): Promise<{ userId: string; extraData?: any } | null> => {
+  const verifyScannedQrCode = async (scannedQrData: string): Promise<{
+    userId: string;
+    user: {
+      id: string;
+      name: string;
+      email: string;
+      tel?: string;
+      avatar?: string;
+      last_active_at?: string;
+      roles: Array<{ name: string; key: string; }>;
+    };
+    extraData?: Record<string, any>;
+  } | null> => {
     try {
       const qrData = JSON.parse(scannedQrData);
       const { token, userId, timestamp, expiry, ...extraData } = qrData;
@@ -174,11 +187,25 @@ export function useOneTimeQrCode() {
 
       const isValid = await verifyToken(token, userId);
       if (!isValid) {
-        toast.error("Mã QR không hợp lệ hoặc đã hết hạn");
+        toast.error("Mã QR không hợp lệ");
         return null;
       }
 
-      return { userId, extraData };
+      try {
+        const result = await authService.verifyQrToken(token, userId, timestamp);
+        return {
+          userId,
+          user: result.user,
+          extraData: Object.keys(extraData).length > 0 ? extraData : undefined
+        };
+      } catch (error: any) {
+        if (error.statusCode === 403) {
+          toast.error("Mã QR đã được sử dụng");
+        } else {
+          toast.error("Lỗi khi xác thực mã QR");
+        }
+        return null;
+      }
     } catch (error) {
       toast.error(`Lỗi khi xác thực mã QR: ${error}`);
       return null;

nuxt.config.ts

@@ -19,6 +19,17 @@ export default defineNuxtConfig({
   },
   nitro: {
     preset: 'bun',
+    routeRules: {
+      '/api/**': {
+        cors: true,
+        headers: {
+          'Access-Control-Allow-Origin': process.env.CORS_ALLOWED_ORIGIN || '',
+          'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
+          'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+          'Access-Control-Allow-Credentials': 'true'
+        }
+      }
+    }
   },
   auth: {
     isEnabled: true,
@@ -75,6 +86,7 @@ export default defineNuxtConfig({
     GOOGLE_CLIENT_ID: process.env.GOOGLE_CLIENT_ID,
     GOOGLE_CLIENT_SECRET: process.env.GOOGLE_CLIENT_SECRET,
     AUTH_SECRET: process.env.AUTH_SECRET,
+    CORS_ALLOWED_ORIGIN: process.env.CORS_ALLOWED_ORIGIN,
   },
   app: {
     head: {

pages/admin/borrows/form.vue

@@ -250,8 +250,6 @@ const handleVirtualKeyboardDetection = async (
         formState.userId = userId;
         await handleUserCodeChange(userId);
         toast.success("Xác thực người dùng thành công");
-      } else {
-        toast.error("Mã QR không hợp lệ hoặc đã hết hạn");
       }
     } catch (error) {
       toast.error("Không thể xác thực mã QR");