feat(backend,frontend,ts-utils): handle session expired

Author: IgnisDa

apps/backend/src/traits.rs

@@ -115,16 +115,16 @@ pub trait AuthProvider {
         auth_ctx
             .auth_token
             .clone()
-            .ok_or_else(|| Error::new("The auth token is not present".to_owned()))
+            .ok_or_else(|| Error::new("NO_AUTH_TOKEN".to_owned()))
     }
 
     async fn user_id_from_ctx(&self, ctx: &Context<'_>) -> GraphqlResult<String> {
+        // return Err(Error::new("NO_USER_ID".to_owned()));
         let auth_ctx = ctx.data_unchecked::<AuthContext>();
-        if let Some(id) = auth_ctx.user_id.to_owned() {
-            Ok(id)
-        } else {
-            Err(Error::new("User was not logged in"))
-        }
+        auth_ctx
+            .user_id
+            .clone()
+            .ok_or_else(|| Error::new("NO_USER_ID".to_owned()))
     }
 }
 

apps/frontend/app/lib/utilities.server.ts

@@ -16,9 +16,9 @@ import {
 	UserPreferencesDocument,
 } from "@ryot/generated/graphql/backend/graphql";
 import { UserDetailsDocument } from "@ryot/generated/graphql/backend/graphql";
-import { isEmpty } from "@ryot/ts-utils";
+import { intersection, isEmpty } from "@ryot/ts-utils";
 import { type CookieSerializeOptions, parse, serialize } from "cookie";
-import { GraphQLClient } from "graphql-request";
+import { ClientError, GraphQLClient } from "graphql-request";
 import { withoutHost } from "ufo";
 import { v4 as randomUUID } from "uuid";
 import { type ZodTypeAny, type output, z } from "zod";
@@ -33,8 +33,32 @@ import {
 
 export const API_URL = process.env.API_URL || "http://localhost:8000/backend";
 
+const RECOVERABLE_BACKEND_ERRORS = ["NO_AUTH_TOKEN", "NO_USER_ID"];
+
 export const serverGqlService = new GraphQLClient(`${API_URL}/graphql`, {
 	headers: { Connection: "keep-alive" },
+	responseMiddleware: async (response) => {
+		if (response instanceof ClientError) {
+			const errors = response.response.errors?.map((e) => e.message) || [];
+			const isRecoverable =
+				intersection(RECOVERABLE_BACKEND_ERRORS, errors).length > 0;
+			if (isRecoverable)
+				throw Response.json(
+					{},
+					{
+						headers: combineHeaders(
+							getLogoutCookies(),
+							{ Location: $path("/auth") },
+							await createToastHeaders({
+								type: "error",
+								message: "Your session has expired",
+							}),
+						),
+						status: 302,
+					},
+				);
+		}
+	},
 });
 
 export const getCookieValue = (request: Request, cookieName: string) => {

libs/ts-utils/package.json

@@ -1,13 +1,13 @@
 {
-  "name": "@ryot/ts-utils",
-  "main": "src/index.ts",
-  "dependencies": {
-    "@ryot/generated": "workspace:*",
-    "dayjs": "1.11.11",
-    "humanize-duration-ts": "2.1.1",
-    "lodash": "4.17.21"
-  },
-  "devDependencies": {
-    "@types/lodash": "4.17.6"
-  }
+	"name": "@ryot/ts-utils",
+	"main": "src/index.ts",
+	"dependencies": {
+		"@ryot/generated": "workspace:*",
+		"dayjs": "1.11.11",
+		"humanize-duration-ts": "2.1.1",
+		"lodash": "4.17.21"
+	},
+	"devDependencies": {
+		"@types/lodash": "4.17.6"
+	}
 }

libs/ts-utils/src/index.ts

@@ -7,6 +7,7 @@ import {
 import camelCase from "lodash/camelCase";
 import cloneDeep from "lodash/cloneDeep";
 import groupBy from "lodash/groupBy";
+import intersection from "lodash/intersection";
 import isEmpty from "lodash/isEmpty";
 import isEqual from "lodash/isEqual";
 import isNumber from "lodash/isNumber";
@@ -75,6 +76,7 @@ export {
 	camelCase,
 	cloneDeep,
 	groupBy,
+	intersection,
 	isEmpty,
 	isEqual,
 	isNumber,