fix: blank screen in admin dashboard on authentication problems (#3385)

* fix: dashboard logs out user when cookie expires or is unauthorized

* fix: handles the 401 error thrown when trying to refresh tokens

* chore: updated wrong logic when returning state in refresh token function

* feat: introduced auth exchange to urql client to check for errors on each backend call

* fix: prevent multiple window reloads

---------

Co-authored-by: jamesgeorge007 <jamesgeorge998001@gmail.com>

packages/hoppscotch-sh-admin/src/main.ts

@@ -1,5 +1,6 @@
 import { createApp } from 'vue';
-import urql, { createClient } from '@urql/vue';
+import urql, { createClient, cacheExchange, fetchExchange } from '@urql/vue';
+import { authExchange } from '@urql/exchange-auth';
 import App from './App.vue';
 
 // STYLES
@@ -11,9 +12,10 @@ import '@fontsource-variable/inter';
 import '@fontsource-variable/material-symbols-rounded';
 import '@fontsource-variable/roboto-mono';
 // END STYLES
-
 import { HOPP_MODULES } from './modules';
 import { auth } from './helpers/auth';
+import { pipe } from 'fp-ts/function';
+import * as O from 'fp-ts/Option';
 
 // Top-level await is not available in our targets
 (async () => {
@@ -27,6 +29,28 @@ import { auth } from './helpers/auth';
           credentials: 'include',
         };
       },
+      exchanges: [
+        cacheExchange,
+        authExchange(async () => {
+          return {
+            addAuthToOperation(operation) {
+              return operation;
+            },
+
+            async refreshAuth() {
+              pipe(
+                await auth.performAuthRefresh(),
+                O.getOrElseW(async () => await auth.signOutUser(true))
+              );
+            },
+
+            didAuthError(error, _operation) {
+              return error.message === '[GraphQL] Unauthorized';
+            },
+          };
+        }),
+        fetchExchange,
+      ],
     })
   );