refresh token before requests

vis97c · vis97c · commit 3d11443c1b73 · 2025-03-22T16:31:49.000-05:00
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/app.vue b/app.vue
@@ -11,7 +11,7 @@
 		</div>
 		<div v-else class="flx --flxColumn --flx-start-stretch --gap-0">
 			<div
-				v-if="SESSION.user && !isAdmin && APP.instance?.banner?.message"
+				v-if="SESSION.token && !isAdmin && APP.instance?.banner?.message"
 				class="x-banner flx --flxColumn --flx-center --gap-0 --width-100 --maxWidth --mX"
 			>
 				<div
@@ -61,7 +61,7 @@
 										</li>
 										<DropdownUser />
 										<DropdownAdmin />
-										<li v-if="!SESSION.user && route.path != '/ingresar'">
+										<li v-if="!SESSION.token && route.path != '/ingresar'">
 											<XamuActionLink to="/ingresar">
 												<XamuIconFa
 													name="circle-user"
@@ -135,7 +135,7 @@
 										</p>
 									</div>
 									<div
-										v-else-if="!SESSION.user && route.path != '/ingresar'"
+										v-else-if="!SESSION.token && route.path != '/ingresar'"
 										class="txt --txtAlign-center --gap-10"
 									>
 										<h4>Modo lectura</h4>
diff --git a/components/PaginatedTable.vue b/components/PaginatedTable.vue
@@ -10,7 +10,7 @@
 			</div>
 			<XamuPaginationContent
 				v-slot="{ content }"
-				v-bind="{ page, url, noContentMessage, preventAutoload, theme }"
+				v-bind="{ page, url, noContentMessage, preventAutoload, theme, client }"
 				with-route
 				:defaults="{ page: true, ...defaults }"
 				class="flx --flxColumn --flx-start-end"
@@ -76,6 +76,7 @@
 		noContentMessage?: string;
 		tableProps?: Omit<iTableProps<TMi>, "nodes" | "refresh">;
 		theme?: tThemeModifier | tThemeTuple;
+		client?: boolean;
 	}
 
 	/**
diff --git a/components/dropdown/Admin.vue b/components/dropdown/Admin.vue
@@ -1,6 +1,6 @@
 <template>
 	<XamuDropdown
-		v-if="SESSION.user && SESSION.canAdmin"
+		v-if="SESSION.token && SESSION.canAdmin"
 		:position="['bottom', 'right']"
 		invert-theme
 	>
@@ -22,7 +22,7 @@
 		</template>
 		<template #default="{ invertedTheme }">
 			<nav
-				v-if="SESSION.canDevelop || SESSION.user"
+				v-if="SESSION.canDevelop || SESSION.token"
 				class="list flx --flxColumn --gap-20 --minWidth-180 --maxWidth-100 --txtColor"
 			>
 				<ul v-if="SESSION.canDevelop" class="list-group --gap-5">
diff --git a/components/dropdown/Enrollment.vue b/components/dropdown/Enrollment.vue
@@ -1,5 +1,5 @@
 <template>
-	<XamuDropdown v-if="SESSION.user && enrolledCount" :position="['bottom', 'left']" invert-theme>
+	<XamuDropdown v-if="SESSION.token && enrolledCount" :position="['bottom', 'left']" invert-theme>
 		<template #toggle="{ setModel, model }">
 			<li>
 				<XamuActionButtonToggle
diff --git a/components/dropdown/User.vue b/components/dropdown/User.vue
@@ -1,5 +1,5 @@
 <template>
-	<XamuDropdown v-if="SESSION.user" :position="['bottom', 'right']" invert-theme>
+	<XamuDropdown v-if="SESSION.token" :position="['bottom', 'right']" invert-theme>
 		<template #toggle="{ setModel, model }">
 			<li>
 				<XamuActionLink
diff --git a/composables/utils.ts b/composables/utils.ts
@@ -46,21 +46,38 @@ export function useMinMilis(minutes: number) {
 	return minutes * 60 * 1000;
 }
 
-export function useFetchQuery<R>(
+/**
+ * Fetch wrapper
+ *
+ * Refresh auth token before each request
+ * @see https://stackoverflow.com/questions/47803495/error-firebase-id-token-has-expired
+ */
+export async function useFetchQuery<R>(
 	url: string,
 	{
 		options,
 		...query
 	}: Record<string, any> & { options?: Omit<NitroFetchOptions<NitroFetchRequest>, "query"> } = {}
 ) {
 	const SESSION = useSessionStore();
+	const { $clientAuth } = useNuxtApp();
+	const { cache } = useRuntimeConfig().public;
+	let authorization = SESSION.token || "";
+
+	// Refresh token, before server request
+	if (import.meta.client && SESSION.user) {
+		const newToken = await $clientAuth?.currentUser?.getIdToken();
+
+		authorization = newToken || authorization;
+
+		SESSION.setUser(SESSION.user, authorization);
+	}
 
 	return $fetch<R>(url, {
-		cache: "no-cache",
 		credentials: "same-origin",
 		...options,
 		query,
-		headers: { authorization: SESSION.token || "", ...options?.headers },
+		headers: { authorization, "Cache-Control": cache.frequent, ...options?.headers },
 	});
 }
 
@@ -70,6 +87,8 @@ export const useLogger: tLogger = async (...args): Promise<void> => {
 	if (!logData) return;
 
 	try {
+		const { useDocumentCreate } = await import("~/composables/firestore");
+
 		useDocumentCreate<LogRef>("logs", logData);
 	} catch (err) {
 		console.error("Error logging to db", err);
diff --git a/error.vue b/error.vue
@@ -18,7 +18,7 @@
 									<span>Reintentar</span>
 								</XamuActionLink>
 								<XamuActionLink
-									v-if="SESSION.user"
+									v-if="SESSION.token"
 									aria-label="Cerrar sesion y reintentar"
 									@click="
 										clearError();
diff --git a/middleware/guest-only.ts b/middleware/guest-only.ts
@@ -6,7 +6,7 @@
 export default defineNuxtRouteMiddleware(async () => {
 	const SESSION = useSessionStore();
 
-	if (!SESSION.user) return;
+	if (!SESSION.token) return;
 
 	// User is authenticated
 	return navigateTo("/", { redirectCode: 302 });
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -3,6 +3,7 @@ import path from "node:path";
 
 import locale from "@open-xamu-co/ui-common-helpers/es";
 
+import packageJson from "./package.json" assert { type: "json" };
 import {
 	debugCSS,
 	debugNuxt,
@@ -92,6 +93,7 @@ export default defineNuxtConfig({
 		compressPublicAssets: true,
 	},
 	vite: {
+		server: { fs: { strict: "resolutions" in packageJson && !debugNuxt } },
 		resolve: { preserveSymlinks: true },
 		css: {
 			postcss: require("@open-xamu-co/ui-styles/postcss")[
diff --git a/package.json b/package.json
@@ -55,7 +55,7 @@
     "@nuxt/scripts": "^0.11.2",
     "@open-xamu-co/ui-common-enums": "^3.0.0-next.7",
     "@open-xamu-co/ui-common-helpers": "^3.0.0-next.19",
-    "@open-xamu-co/ui-components-vue": "^3.0.0-next.67",
+    "@open-xamu-co/ui-components-vue": "^3.0.0-next.68",
     "@open-xamu-co/ui-nuxt": "^3.0.0-next.11",
     "@pinia-plugin-persistedstate/nuxt": "^1.2.1",
     "@pinia/nuxt": "^0.10.1",
diff --git a/pages/administrar/cursos.vue b/pages/administrar/cursos.vue
@@ -17,6 +17,7 @@
 				deleteNode: useDocumentDelete,
 				properties: [{ value: 'createdBy', alias: 'Creado por' }],
 			}"
+			client
 		>
 			<template #headActions="{ refreshData }">
 				<XamuActionButtonToggle
@@ -40,6 +41,7 @@
 						deleteNode: useDocumentDelete,
 						properties: [{ value: 'createdBy', alias: 'Creado por' }],
 					}"
+					client
 				>
 					<template #headActions="{ refreshData }">
 						<XamuActionButtonToggle
diff --git a/pages/administrar/registros.vue b/pages/administrar/registros.vue
@@ -9,9 +9,8 @@
 		<PaginatedTable
 			:page="logsPage"
 			url="api:all:logs"
-			:defaults="{
-				level: 1,
-			}"
+			:map-node="mapLog"
+			:defaults="{ level: 1 }"
 			:table-props="{
 				deleteNode: useDocumentDelete,
 				properties: [
@@ -21,6 +20,7 @@
 					},
 				],
 			}"
+			client
 		>
 			<template #headActions="{ refreshData }">
 				<XamuActionButtonToggle
@@ -52,6 +52,13 @@
 		middleware: ["can-develop"],
 	});
 
+	function mapLog({ createdBy, updatedBy, ...log }: Log) {
+		return {
+			...log,
+			createdBy,
+		};
+	}
+
 	const logsPage: iGetPage<Log> = (pagination) => {
 		return useFetchQuery<iPage<Log> | undefined>("/api/all/logs", pagination);
 	};
diff --git a/pages/cursos/[courseId].vue b/pages/cursos/[courseId].vue
@@ -37,7 +37,7 @@
 						</div>
 					</XamuBoxMessage>
 				</div>
-				<div v-if="SESSION.user" class="flx --flxColumn --flx-start --width-100">
+				<div v-if="SESSION.token" class="flx --flxColumn --flx-start --width-100">
 					<div class="txt">
 						<h4 class="">Herramientas:</h4>
 						<p v-if="SESSION.canDevelop && withScrapingErrors" class="">
@@ -56,7 +56,7 @@
 							>
 								<XamuIconFa name="hand-fist" :size="20" />
 							</XamuActionButton>
-							<template v-if="SESSION.user">
+							<template v-if="SESSION.token">
 								<XamuActionButtonToggle
 									tooltip="Notificarme"
 									:disabled="!APP.instance?.flags?.trackCourses"
@@ -215,7 +215,7 @@
 								{
 									value: 'inscrito',
 									component: TableEnroll,
-									hidden: !SESSION.user,
+									hidden: !SESSION.token,
 								},
 								{ value: 'profesores', component: TableTeachersList },
 								{ value: 'horarios', component: TableWeek },
@@ -243,7 +243,7 @@
 								{
 									value: 'inscrito',
 									component: TableEnroll,
-									hidden: !SESSION.user,
+									hidden: !SESSION.token,
 								},
 								{ value: 'profesores', component: TableTeachersList },
 								{ value: 'horarios', component: TableWeek },
@@ -334,7 +334,7 @@
 		async () => {
 			const code = indexedCourse.value?.code;
 
-			if (!code || !SESSION.user) return [];
+			if (!code || !SESSION.token) return [];
 
 			const teachersEdges = await useFetchQuery<iPageEdge<Teacher, string>[]>(
 				"/api/teachers/search",
@@ -621,7 +621,7 @@
 	// lifecycle
 	onBeforeUnmount(unsub);
 	onMounted(() => {
-		if (import.meta.server || !SESSION.user || !$clientFirestore) return;
+		if (import.meta.server || !SESSION.token || !$clientFirestore) return;
 
 		onActivated(() => (deactivated.value = false));
 		onDeactivated(() => (deactivated.value = true));
@@ -677,7 +677,7 @@
 			const scrapedDiffMilis = nowMilis - scrapedAtMilis;
 
 			// Prevent scraping until fixed
-			if (scrapedWithErrorsAt) return;
+			if (scrapedWithErrorsAt || !SESSION.token) return;
 
 			// Do once & update if updated more than threshold
 			if (scrapedAt && scrapedDiffMilis < useMinMilis(minutes)) {
diff --git a/pages/index.vue b/pages/index.vue
@@ -7,7 +7,7 @@
 		<SearchCourse
 			v-slot="{ searchCourse, searching }"
 			:values="values"
-			:disabled="!SESSION.user || disabledSIASearch"
+			:disabled="!SESSION.token || disabledSIASearch"
 		>
 			<XamuBaseBox
 				class="x-box flx --flxColumn --flx-start-stretch --width-100 --p-20:md"
@@ -39,7 +39,7 @@
 					</div>
 					<XamuActionButton
 						:size="eSizes.LG"
-						:disabled="!SESSION.user || disabledSIASearch || searching"
+						:disabled="!SESSION.token || disabledSIASearch || searching"
 						type="submit"
 						:tooltip="search ? 'Buscar curso' : 'Descubrir cursos disponibles'"
 						hydrate-never
@@ -161,7 +161,7 @@
 				</XamuLoaderContent>
 			</XamuBaseBox>
 		</SearchCourse>
-		<section v-if="SESSION.user" class="flx --flxColumn --flx-center --width-100">
+		<section v-if="SESSION.token" class="flx --flxColumn --flx-center --width-100">
 			<div class="txt">
 				<h3 class="--txtColor-dark5">Otros recursos</h3>
 			</div>
@@ -188,7 +188,7 @@
 		</section>
 		<section class="txt --txtAlign-center --txtSize-xs --txtColor-dark5 --minWidth-100">
 			<div class="">
-				<template v-if="SESSION.user">
+				<template v-if="SESSION.token">
 					<p>
 						Visita cada pagina de curso para obtener los cupos en tiempo real (Antiguo
 						SIA).
diff --git a/plugins/firebase.ts b/plugins/firebase.ts
@@ -66,10 +66,10 @@ async function setAppState(provide?: ClientProvide) {
 			if (!authUser) return SESSION.unsetSession();
 
 			const { uid, displayName: name, email, photoURL, isAnonymous } = authUser;
-			const token = await authUser.getIdToken(true);
+			const token = await authUser.getIdToken();
 			const userRef: DocumentReference<User> = doc(clientFirestore, "users", uid);
 
-			unsubUser = onSnapshot(userRef, (snapshot) => {
+			unsubUser = onSnapshot(userRef, async (snapshot) => {
 				// Create user on firestore.
 				if (!snapshot.exists()) {
 					const user = { uid, name, email, photoURL, isAnonymous, role: 3 };
diff --git a/resources/utils/enviroment.ts b/resources/utils/enviroment.ts
@@ -54,5 +54,16 @@ export const runtimeConfig = {
 		debugScrapper,
 		instance,
 		countriesUrl,
+		cache: {
+			none: "no-cache, must-revalidate",
+			/** Cache for a few minutes */
+			frequent: "public, max-age=120, stale-while-revalidate=60",
+			/** Cache for an hour */
+			normal: "public, max-age=3600, must-revalidate",
+			/** Cache for a month */
+			midterm: "public, max-age=2592000, must-revalidate",
+			/** Cache for a year */
+			longterm: "public, max-age=31536000, must-revalidate",
+		},
 	},
 };
diff --git a/server/api/groups/scrape.get.ts b/server/api/groups/scrape.get.ts
@@ -742,6 +742,12 @@ export default defineConditionallyCachedEventHandler(async (event, instance, aut
 
 			await puppetBrowser.close(); // Close browser
 
+			debugFirebaseServer(
+				event,
+				"api:groups:scrape:updateCourse",
+				`Success scraping: ${code}, ${SIAScraps.name}`
+			);
+
 			// Prevent updating if missing groups
 			if (SIAScraps.groups) {
 				// Index teachers
diff --git a/yarn.lock b/yarn.lock
@@ -2654,9 +2654,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@open-xamu-co/ui-components-vue@npm:^3.0.0-next.53, @open-xamu-co/ui-components-vue@npm:^3.0.0-next.67":
-  version: 3.0.0-next.67
-  resolution: "@open-xamu-co/ui-components-vue@npm:3.0.0-next.67"
+"@open-xamu-co/ui-components-vue@npm:^3.0.0-next.53, @open-xamu-co/ui-components-vue@npm:^3.0.0-next.68":
+  version: 3.0.0-next.68
+  resolution: "@open-xamu-co/ui-components-vue@npm:3.0.0-next.68"
   dependencies:
     "@fortawesome/fontawesome-common-types": "npm:^6.4.0"
     "@open-xamu-co/ui-common-enums": "npm:^3.0.0-next.7"
@@ -2669,7 +2669,7 @@ __metadata:
   peerDependenciesMeta:
     vue-router:
       optional: true
-  checksum: 10c0/430e127e3b741568faff629a7447c25bf5730c9ceef289c5077bc2ee8c5e20d80cb12d168e55409387e01cf66df2d7b04ab85f3d998a8515f8cd2771485a20b5
+  checksum: 10c0/d09e4962ffad58288019e7b64b5bc78096f6944eeec37e70d659bb2bf956efc8330957ea0ebaf930cbeccf62ed2574c20560bd6297879dd0a5dc24fae3dbf381
   languageName: node
   linkType: hard
 
@@ -6167,7 +6167,7 @@ __metadata:
     "@open-xamu-co/ui-common-enums": "npm:^3.0.0-next.7"
     "@open-xamu-co/ui-common-helpers": "npm:^3.0.0-next.19"
     "@open-xamu-co/ui-common-types": "npm:^3.0.0-next.23"
-    "@open-xamu-co/ui-components-vue": "npm:^3.0.0-next.67"
+    "@open-xamu-co/ui-components-vue": "npm:^3.0.0-next.68"
     "@open-xamu-co/ui-nuxt": "npm:^3.0.0-next.11"
     "@open-xamu-co/ui-styles": "npm:^3.0.0-next.36"
     "@pinia-plugin-persistedstate/nuxt": "npm:^1.2.1"
