chore: merge hoppscotch/release/2023.8.3 into hoppscotch/release/2023.12.0

packages/hoppscotch-backend/package.json

@@ -24,18 +24,17 @@
     "do-test": "pnpm run test"
   },
   "dependencies": {
-    "@nestjs-modules/mailer": "^1.8.1",
+    "@apollo/server": "^4.9.4",
-    "@nestjs/apollo": "^10.1.6",
+    "@nestjs-modules/mailer": "^1.9.1",
-    "@nestjs/common": "^9.2.1",
+    "@nestjs/apollo": "^12.0.9",
-    "@nestjs/core": "^9.2.1",
+    "@nestjs/common": "^10.2.6",
-    "@nestjs/graphql": "^10.1.6",
+    "@nestjs/core": "^10.2.6",
-    "@nestjs/jwt": "^10.0.1",
+    "@nestjs/graphql": "^12.0.9",
-    "@nestjs/passport": "^9.0.0",
+    "@nestjs/jwt": "^10.1.1",
-    "@nestjs/platform-express": "^9.2.1",
+    "@nestjs/passport": "^10.0.2",
-    "@nestjs/throttler": "^4.0.0",
+    "@nestjs/platform-express": "^10.2.6",
+    "@nestjs/throttler": "^5.0.0",
     "@prisma/client": "^4.16.2",
-    "apollo-server-express": "^3.11.1",
-    "apollo-server-plugin-base": "^3.7.1",
     "argon2": "^0.30.3",
     "bcrypt": "^5.1.0",
     "cookie": "^0.5.0",
@@ -43,9 +42,9 @@
     "express": "^4.17.1",
     "express-session": "^1.17.3",
     "fp-ts": "^2.13.1",
-    "graphql": "^15.5.0",
+    "graphql": "^16.8.1",
     "graphql-query-complexity": "^0.12.0",
-    "graphql-redis-subscriptions": "^2.5.0",
+    "graphql-redis-subscriptions": "^2.6.0",
     "graphql-subscriptions": "^2.0.0",
     "handlebars": "^4.7.7",
     "io-ts": "^2.2.16",
@@ -63,10 +62,11 @@
     "rxjs": "^7.6.0"
   },
   "devDependencies": {
-    "@nestjs/cli": "^9.1.5",
+    "@nestjs/cli": "^10.1.18",
-    "@nestjs/schematics": "^9.0.3",
+    "@nestjs/schematics": "^10.0.2",
-    "@nestjs/testing": "^9.2.1",
+    "@nestjs/testing": "^10.2.6",
     "@relmify/jest-fp-ts": "^2.0.2",
+    "@types/argon2": "^0.15.0",
     "@types/bcrypt": "^5.0.0",
     "@types/cookie": "^0.5.1",
     "@types/cookie-parser": "^1.4.3",

packages/hoppscotch-backend/src/app.module.ts

@@ -27,12 +27,7 @@ import { AppController } from './app.controller';
       buildSchemaOptions: {
         numberScalarMode: 'integer',
       },
-      cors: {
-        origin: process.env.WHITELISTED_ORIGINS.split(','),
-        credentials: true,
-      },
       playground: process.env.PRODUCTION !== 'true',
-      debug: process.env.PRODUCTION !== 'true',
       autoSchemaFile: true,
       installSubscriptionHandlers: true,
       subscriptions: {
@@ -62,10 +57,12 @@ import { AppController } from './app.controller';
       }),
       driver: ApolloDriver,
     }),
-    ThrottlerModule.forRoot({
+    ThrottlerModule.forRoot([
-      ttl: +process.env.RATE_LIMIT_TTL,
+      {
-      limit: +process.env.RATE_LIMIT_MAX,
+        ttl: +process.env.RATE_LIMIT_TTL,
-    }),
+        limit: +process.env.RATE_LIMIT_MAX,
+      },
+    ]),
     UserModule,
     AuthModule,
     AdminModule,

packages/hoppscotch-backend/src/gql-schema.ts

@@ -93,9 +93,7 @@ export async function emitGQLSchemaFile() {
       numberScalarMode: 'integer',
     });
 
-    const schemaString = printSchema(schema, {
+    const schemaString = printSchema(schema);
-      commentDescriptions: true,
-    });
 
     logger.log(`Writing schema to GQL_SCHEMA_EMIT_LOCATION (${destination})`);
 

packages/hoppscotch-backend/src/guards/throttler-behind-proxy.guard.ts

@@ -3,8 +3,7 @@ import { Injectable } from '@nestjs/common';
 
 @Injectable()
 export class ThrottlerBehindProxyGuard extends ThrottlerGuard {
-  protected getTracker(req: Record<string, any>): string {
+  protected async getTracker(req: Record<string, any>): Promise<string> {
     return req.ips.length ? req.ips[0] : req.ip; // individualize IP extraction to meet your own needs
-    // learn more: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Forwarded-For#directives
   }
 }

packages/hoppscotch-backend/src/plugins/GQLComplexityPlugin.ts

@@ -1,8 +1,9 @@
 import { GraphQLSchemaHost } from '@nestjs/graphql';
 import {
   ApolloServerPlugin,
+  BaseContext,
   GraphQLRequestListener,
-} from 'apollo-server-plugin-base';
+} from '@apollo/server';
 import { Plugin } from '@nestjs/apollo';
 import { GraphQLError } from 'graphql';
 import {
@@ -17,7 +18,7 @@ const COMPLEXITY_LIMIT = 50;
 export class GQLComplexityPlugin implements ApolloServerPlugin {
   constructor(private gqlSchemaHost: GraphQLSchemaHost) {}
 
-  async requestDidStart(): Promise<GraphQLRequestListener> {
+  async requestDidStart(): Promise<GraphQLRequestListener<BaseContext>> {
     const { schema } = this.gqlSchemaHost;
 
     return {

packages/hoppscotch-backend/src/team-collection/team-collection.service.spec.ts

@@ -1,5 +1,5 @@
 import { Team, TeamCollection as DBTeamCollection } from '@prisma/client';
-import { mock, mockDeep, mockReset } from 'jest-mock-extended';
+import { mockDeep, mockReset } from 'jest-mock-extended';
 import {
   TEAM_COLL_DEST_SAME,
   TEAM_COLL_INVALID_JSON,
@@ -17,9 +17,6 @@ import { PrismaService } from 'src/prisma/prisma.service';
 import { PubSubService } from 'src/pubsub/pubsub.service';
 import { AuthUser } from 'src/types/AuthUser';
 import { TeamCollectionService } from './team-collection.service';
-import { TeamCollection } from './team-collection.model';
-import { TeamCollectionModule } from './team-collection.module';
-import * as E from 'fp-ts/Either';
 
 const mockPrisma = mockDeep<PrismaService>();
 const mockPubSub = mockDeep<PubSubService>();

packages/hoppscotch-backend/src/team-environments/team-environments.service.spec.ts

@@ -301,7 +301,7 @@ describe('TeamEnvironmentsService', () => {
 
   describe('createDuplicateEnvironment', () => {
     test('should successfully duplicate an existing team environment', async () => {
-      mockPrisma.teamEnvironment.findFirst.mockResolvedValueOnce(
+      mockPrisma.teamEnvironment.findFirstOrThrow.mockResolvedValueOnce(
         teamEnvironment,
       );
 
@@ -322,7 +322,9 @@ describe('TeamEnvironmentsService', () => {
     });
 
     test('should throw TEAM_ENVIRONMMENT_NOT_FOUND if provided id is invalid', async () => {
-      mockPrisma.teamEnvironment.findFirst.mockRejectedValue('NotFoundError');
+      mockPrisma.teamEnvironment.findFirstOrThrow.mockRejectedValue(
+        'NotFoundError',
+      );
 
       const result = await teamEnvironmentsService.createDuplicateEnvironment(
         teamEnvironment.id,
@@ -332,7 +334,7 @@ describe('TeamEnvironmentsService', () => {
     });
 
     test('should send pubsub message to "team_environment/<teamID>/created" if team environment is updated successfully', async () => {
-      mockPrisma.teamEnvironment.findFirst.mockResolvedValueOnce(
+      mockPrisma.teamEnvironment.findFirstOrThrow.mockResolvedValueOnce(
         teamEnvironment,
       );
 

packages/hoppscotch-backend/src/team-environments/team-environments.service.ts

@@ -183,11 +183,10 @@ export class TeamEnvironmentsService {
    */
   async createDuplicateEnvironment(id: string) {
     try {
-      const environment = await this.prisma.teamEnvironment.findFirst({
+      const environment = await this.prisma.teamEnvironment.findFirstOrThrow({
         where: {
           id: id,
         },
-        rejectOnNotFound: true,
       });
 
       const result = await this.prisma.teamEnvironment.create({

packages/hoppscotch-backend/src/user-history/user-history.service.spec.ts

@@ -142,13 +142,15 @@ describe('UserHistoryService', () => {
   });
   describe('createUserHistory', () => {
     test('Should resolve right and create a REST request to users history and return a `UserHistory` object', async () => {
+      const executedOn = new Date();
+
       mockPrisma.userHistory.create.mockResolvedValueOnce({
         userUid: 'abc',
         id: '1',
         request: [{}],
         responseMetadata: [{}],
         reqType: ReqType.REST,
-        executedOn: new Date(),
+        executedOn,
         isStarred: false,
       });
 
@@ -158,7 +160,7 @@ describe('UserHistoryService', () => {
         request: JSON.stringify([{}]),
         responseMetadata: JSON.stringify([{}]),
         reqType: ReqType.REST,
-        executedOn: new Date(),
+        executedOn,
         isStarred: false,
       };
 
@@ -172,13 +174,15 @@ describe('UserHistoryService', () => {
       ).toEqualRight(userHistory);
     });
     test('Should resolve right and create a GQL request to users history and return a `UserHistory` object', async () => {
+      const executedOn = new Date();
+
       mockPrisma.userHistory.create.mockResolvedValueOnce({
         userUid: 'abc',
         id: '1',
         request: [{}],
         responseMetadata: [{}],
         reqType: ReqType.GQL,
-        executedOn: new Date(),
+        executedOn,
         isStarred: false,
       });
 
@@ -188,7 +192,7 @@ describe('UserHistoryService', () => {
         request: JSON.stringify([{}]),
         responseMetadata: JSON.stringify([{}]),
         reqType: ReqType.GQL,
-        executedOn: new Date(),
+        executedOn,
         isStarred: false,
       };
 
@@ -212,13 +216,15 @@ describe('UserHistoryService', () => {
       ).toEqualLeft(USER_HISTORY_INVALID_REQ_TYPE);
     });
     test('Should create a GQL request to users history and publish a created subscription', async () => {
+      const executedOn = new Date();
+
       mockPrisma.userHistory.create.mockResolvedValueOnce({
         userUid: 'abc',
         id: '1',
         request: [{}],
         responseMetadata: [{}],
         reqType: ReqType.GQL,
-        executedOn: new Date(),
+        executedOn,
         isStarred: false,
       });
 
@@ -228,7 +234,7 @@ describe('UserHistoryService', () => {
         request: JSON.stringify([{}]),
         responseMetadata: JSON.stringify([{}]),
         reqType: ReqType.GQL,
-        executedOn: new Date(),
+        executedOn,
         isStarred: false,
       };
 
@@ -245,13 +251,15 @@ describe('UserHistoryService', () => {
       );
     });
     test('Should create a REST request to users history and publish a created subscription', async () => {
+      const executedOn = new Date();
+
       mockPrisma.userHistory.create.mockResolvedValueOnce({
         userUid: 'abc',
         id: '1',
         request: [{}],
         responseMetadata: [{}],
         reqType: ReqType.REST,
-        executedOn: new Date(),
+        executedOn,
         isStarred: false,
       });
 
@@ -261,7 +269,7 @@ describe('UserHistoryService', () => {
         request: JSON.stringify([{}]),
         responseMetadata: JSON.stringify([{}]),
         reqType: ReqType.REST,
-        executedOn: new Date(),
+        executedOn,
         isStarred: false,
       };
 
@@ -323,13 +331,15 @@ describe('UserHistoryService', () => {
       ).toEqualLeft(USER_HISTORY_NOT_FOUND);
     });
     test('Should star/unstar a request in the history and publish a updated subscription', async () => {
+      const executedOn = new Date();
+
       mockPrisma.userHistory.findFirst.mockResolvedValueOnce({
         userUid: 'abc',
         id: '1',
         request: [{}],
         responseMetadata: [{}],
         reqType: ReqType.REST,
-        executedOn: new Date(),
+        executedOn,
         isStarred: false,
       });
 
@@ -339,7 +349,7 @@ describe('UserHistoryService', () => {
         request: [{}],
         responseMetadata: [{}],
         reqType: ReqType.REST,
-        executedOn: new Date(),
+        executedOn,
         isStarred: true,
       });
 
@@ -349,7 +359,7 @@ describe('UserHistoryService', () => {
         request: JSON.stringify([{}]),
         responseMetadata: JSON.stringify([{}]),
         reqType: ReqType.REST,
-        executedOn: new Date(),
+        executedOn,
         isStarred: true,
       };
 

packages/hoppscotch-sh-admin/locales/en.json

@@ -39,6 +39,7 @@
     "delete_user_success": "User deleted successfully!!",
     "email": "Email",
     "email_failure": "Failed to send invitation",
+    "email_signin_failure": "Failed to login with Email",
     "email_success": "Email invitation sent successfully",
     "enter_team_email": "Please enter email of team owner!!",
     "error": "Something went wrong",
@@ -50,6 +51,7 @@
     "logout": "Logout",
     "magic_link_sign_in": "Click on the link to sign in.",
     "magic_link_success": "We sent a magic link to",
+    "microsoft_signin_failure": "Failed to login with Microsoft",
     "non_admin_logged_in": "Logged in as non admin user.",
     "non_admin_login": "You are logged in. But you're not an admin",
     "privacy_policy": "Privacy Policy",

packages/hoppscotch-sh-admin/src/components.d.ts

@@ -1,39 +1,40 @@
 // generated by unplugin-vue-components
 // We suggest you to commit this file into source control
 // Read more: https://github.com/vuejs/core/pull/3399
-import '@vue/runtime-core';
+import '@vue/runtime-core'
 
-export {};
+export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
-    AppHeader: typeof import('./components/app/Header.vue')['default'];
+    AppHeader: typeof import('./components/app/Header.vue')['default']
-    AppLogin: typeof import('./components/app/Login.vue')['default'];
+    AppLogin: typeof import('./components/app/Login.vue')['default']
-    AppLogout: typeof import('./components/app/Logout.vue')['default'];
+    AppLogout: typeof import('./components/app/Logout.vue')['default']
-    AppModal: typeof import('./components/app/Modal.vue')['default'];
+    AppModal: typeof import('./components/app/Modal.vue')['default']
-    AppSidebar: typeof import('./components/app/Sidebar.vue')['default'];
+    AppSidebar: typeof import('./components/app/Sidebar.vue')['default']
-    AppToast: typeof import('./components/app/Toast.vue')['default'];
+    AppToast: typeof import('./components/app/Toast.vue')['default']
-    DashboardMetricsCard: typeof import('./components/dashboard/MetricsCard.vue')['default'];
+    DashboardMetricsCard: typeof import('./components/dashboard/MetricsCard.vue')['default']
-    HoppButtonPrimary: typeof import('@hoppscotch/ui')['HoppButtonPrimary'];
+    HoppButtonPrimary: typeof import('@hoppscotch/ui')['HoppButtonPrimary']
-    HoppButtonSecondary: typeof import('@hoppscotch/ui')['HoppButtonSecondary'];
+    HoppButtonSecondary: typeof import('@hoppscotch/ui')['HoppButtonSecondary']
-    HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor'];
+    HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor']
-    HoppSmartAutoComplete: typeof import('@hoppscotch/ui')['HoppSmartAutoComplete'];
+    HoppSmartAutoComplete: typeof import('@hoppscotch/ui')['HoppSmartAutoComplete']
-    HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal'];
+    HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal']
-    HoppSmartInput: typeof import('@hoppscotch/ui')['HoppSmartInput'];
+    HoppSmartInput: typeof import('@hoppscotch/ui')['HoppSmartInput']
-    HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem'];
+    HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem']
-    HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal'];
+    HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal']
-    HoppSmartPicture: typeof import('@hoppscotch/ui')['HoppSmartPicture'];
+    HoppSmartPicture: typeof import('@hoppscotch/ui')['HoppSmartPicture']
-    HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner'];
+    HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner']
-    IconLucideChevronDown: typeof import('~icons/lucide/chevron-down')['default'];
+    IconLucideChevronDown: typeof import('~icons/lucide/chevron-down')['default']
-    IconLucideInbox: typeof import('~icons/lucide/inbox')['default'];
+    IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
-    TeamsAdd: typeof import('./components/teams/Add.vue')['default'];
+    TeamsAdd: typeof import('./components/teams/Add.vue')['default']
-    TeamsDetails: typeof import('./components/teams/Details.vue')['default'];
+    TeamsDetails: typeof import('./components/teams/Details.vue')['default']
-    TeamsInvite: typeof import('./components/teams/Invite.vue')['default'];
+    TeamsInvite: typeof import('./components/teams/Invite.vue')['default']
-    TeamsMembers: typeof import('./components/teams/Members.vue')['default'];
+    TeamsMembers: typeof import('./components/teams/Members.vue')['default']
-    TeamsPendingInvites: typeof import('./components/teams/PendingInvites.vue')['default'];
+    TeamsPendingInvites: typeof import('./components/teams/PendingInvites.vue')['default']
-    TeamsTable: typeof import('./components/teams/Table.vue')['default'];
+    TeamsTable: typeof import('./components/teams/Table.vue')['default']
-    Tippy: typeof import('vue-tippy')['Tippy'];
+    Tippy: typeof import('vue-tippy')['Tippy']
-    UsersInviteModal: typeof import('./components/users/InviteModal.vue')['default'];
+    UsersInviteModal: typeof import('./components/users/InviteModal.vue')['default']
-    UsersTable: typeof import('./components/users/Table.vue')['default'];
+    UsersTable: typeof import('./components/users/Table.vue')['default']
   }
+
 }

packages/hoppscotch-sh-admin/src/components/app/Header.vue

@@ -89,8 +89,8 @@ const t = useI18n();
 const { isOpen, isExpanded } = useSidebar();
 
 const currentUser = useReadonlyStream(
-  auth.getProbableUserStream(),
+  auth.getCurrentUserStream(),
-  auth.getProbableUser()
+  auth.getCurrentUser()
 );
 
 const expandSidebar = () => {

packages/hoppscotch-sh-admin/src/components/app/Login.vue

@@ -184,91 +184,71 @@ onMounted(() => {
   subscribeToStream(currentUser$, (user) => {
     if (user && !user.isAdmin) {
       nonAdminUser.value = true;
-      toast.error(`${t('state.non_admin_login')}`);
+      toast.error(t('state.non_admin_login'));
     }
   });
 });
 
-async function signInWithGoogle() {
+const signInWithGoogle = () => {
   signingInWithGoogle.value = true;
 
   try {
-    await auth.signInUserWithGoogle();
+    auth.signInUserWithGoogle();
   } catch (e) {
     console.error(e);
-    /*
+    toast.error(t('state.google_signin_failure'));
-    A auth/account-exists-with-different-credential Firebase error wont happen between Google and any other providers
-    Seems Google account overwrites accounts of other providers https://github.com/firebase/firebase-android-sdk/issues/25
-    */
-    toast.error(`${t('state.google_signin_failure')}`);
   }
 
   signingInWithGoogle.value = false;
-}
+};
-async function signInWithGithub() {
+
+const signInWithGithub = () => {
   signingInWithGitHub.value = true;
 
   try {
-    await auth.signInUserWithGithub();
+    auth.signInUserWithGithub();
   } catch (e) {
     console.error(e);
-    /*
+    toast.error(t('state.github_signin_failure'));
-    A auth/account-exists-with-different-credential Firebase error wont happen between Google and any other providers
-    Seems Google account overwrites accounts of other providers https://github.com/firebase/firebase-android-sdk/issues/25
-    */
-    toast.error(`${t('state.github_signin_failure')}`);
   }
 
   signingInWithGitHub.value = false;
-}
+};
 
-async function signInWithMicrosoft() {
+const signInWithMicrosoft = () => {
   signingInWithMicrosoft.value = true;
 
   try {
-    await auth.signInUserWithMicrosoft();
+    auth.signInUserWithMicrosoft();
   } catch (e) {
     console.error(e);
-    /*
+    toast.error(t('state.microsoft_signin_failure'));
-    A auth/account-exists-with-different-credential Firebase error wont happen between MS with Google or Github
-    If a Github account exists and user then logs in with MS email we get a "Something went wrong toast" and console errors and MS replaces GH as only provider.
-    The error messages are as follows:
-        FirebaseError: Firebase: Error (auth/popup-closed-by-user).
-        @firebase/auth: Auth (9.6.11): INTERNAL ASSERTION FAILED: Pending promise was never set
-    They may be related to https://github.com/firebase/firebaseui-web/issues/947
-    */
-    toast.error(`${t('state.error')}`);
   }
 
   signingInWithMicrosoft.value = false;
-}
+};
-async function signInWithEmail() {
-  signingInWithEmail.value = true;
 
-  await auth
+const signInWithEmail = async () => {
-    .signInWithEmail(form.value.email)
+  signingInWithEmail.value = true;
-    .then(() => {
+  try {
-      mode.value = 'email-sent';
+    await auth.signInWithEmail(form.value.email);
-      setLocalConfig('emailForSignIn', form.value.email);
+    mode.value = 'email-sent';
-    })
+    setLocalConfig('emailForSignIn', form.value.email);
-    .catch((e: any) => {
+  } catch (e) {
-      console.error(e);
+    console.error(e);
-      toast.error(e.message);
+    toast.error(t('state.email_signin_failure'));
-      signingInWithEmail.value = false;
+  }
-    })
+  signingInWithEmail.value = false;
-    .finally(() => {
+};
-      signingInWithEmail.value = false;
-    });
-}
 
 const logout = async () => {
   try {
     await auth.signOutUser();
     window.location.reload();
-    toast.success(`${t('state.logged_out')}`);
+    toast.success(t('state.logged_out'));
   } catch (e) {
     console.error(e);
-    toast.error(`${t('state.error')}`);
+    toast.error(t('state.error'));
   }
 };
 </script>

packages/hoppscotch-sh-admin/src/components/teams/Invite.vue

@@ -200,7 +200,7 @@ import {
 } from '../../helpers/backend/graphql';
 import { useToast } from '~/composables/toast';
 import { useMutation, useQuery } from '@urql/vue';
-import { Email, EmailCodec } from '~/helpers/backend/Email';
+import { Email, EmailCodec } from '~/helpers/Email';
 import IconTrash from '~icons/lucide/trash';
 import IconPlus from '~icons/lucide/plus';
 import IconCircleDot from '~icons/lucide/circle-dot';

packages/hoppscotch-sh-admin/src/composables/auth.ts

@@ -1,62 +0,0 @@
-import { platform } from '~/platform';
-import { AuthEvent, HoppUser } from '~/platform/auth';
-import { Subscription } from 'rxjs';
-import { onBeforeUnmount, onMounted, watch, WatchStopHandle } from 'vue';
-import { useReadonlyStream } from './stream';
-
-/**
- * A Vue composable function that is called when the auth status
- * is being updated to being logged in (fired multiple times),
- * this is also called on component mount if the login
- * was already resolved before mount.
- */
-export function onLoggedIn(exec: (user: HoppUser) => void) {
-  const currentUser = useReadonlyStream(
-    platform.auth.getCurrentUserStream(),
-    platform.auth.getCurrentUser()
-  );
-
-  let watchStop: WatchStopHandle | null = null;
-
-  onMounted(() => {
-    if (currentUser.value) exec(currentUser.value);
-
-    watchStop = watch(currentUser, (newVal, prev) => {
-      if (prev === null && newVal !== null) {
-        exec(newVal);
-      }
-    });
-  });
-
-  onBeforeUnmount(() => {
-    watchStop?.();
-  });
-}
-
-/**
- * A Vue composable function that calls its param function
- * when a new event (login, logout etc.) happens in
- * the auth system.
- *
- * NOTE: Unlike `onLoggedIn` for which the callback will be called once on mount with the current state,
- * here the callback will only be called on authentication event occurances.
- * You might want to check the auth state from an `onMounted` hook or something
- * if you want to access the initial state
- *
- * @param func A function which accepts an event
- */
-export function onAuthEvent(func: (ev: AuthEvent) => void) {
-  const authEvents$ = platform.auth.getAuthEventsStream();
-
-  let sub: Subscription | null = null;
-
-  onMounted(() => {
-    sub = authEvents$.subscribe((ev) => {
-      func(ev);
-    });
-  });
-
-  onBeforeUnmount(() => {
-    sub?.unsubscribe();
-  });
-}

packages/hoppscotch-sh-admin/src/helpers/auth.ts

@@ -1,12 +1,14 @@
-import axios from 'axios';
 import { BehaviorSubject, Subject } from 'rxjs';
 import {
   getLocalConfig,
   removeLocalConfig,
   setLocalConfig,
 } from './localpersistence';
-import { Ref, ref, watch } from 'vue';
+import { Ref, ref } from 'vue';
 import * as O from 'fp-ts/Option';
+import authQuery from './backend/rest/authQuery';
+import { COOKIES_NOT_FOUND, UNAUTHORIZED } from './errors';
+
 /**
  * A common (and required) set of fields that describe a user.
  */
@@ -23,22 +25,16 @@ export type HoppUser = {
   /** URL to the profile picture of the user */
   photoURL: string | null;
 
-  // Regarding `provider` and `accessToken`:
-  // The current implementation and use case for these 2 fields are super weird due to legacy.
-  // Currrently these fields are only basically populated for Github Auth as we need the access token issued
-  // by it to implement Gist submission. I would really love refactor to make this thing more sane.
-
   /** Name of the provider authenticating (NOTE: See notes on `platform/auth.ts`) */
   provider?: string;
   /** Access Token for the auth of the user against the given `provider`. */
   accessToken?: string;
   emailVerified: boolean;
-
+  /** Flag to check for admin status */
   isAdmin: boolean;
 };
 
 export type AuthEvent =
-  | { event: 'probable_login'; user: HoppUser } // We have previous login state, but the app is waiting for authentication
   | { event: 'login'; user: HoppUser } // We are authenticated
   | { event: 'logout' } // No authentication and we have no previous state
   | { event: 'token_refresh' }; // We have previous login state, but the app is waiting for authentication
@@ -51,17 +47,11 @@ export type GithubSignInResult =
 export const authEvents$ = new Subject<
   AuthEvent | { event: 'token_refresh' }
 >();
-const currentUser$ = new BehaviorSubject<HoppUser | null>(null);
-export const probableUser$ = new BehaviorSubject<HoppUser | null>(null);
 
-async function logout() {
+const currentUser$ = new BehaviorSubject<HoppUser | null>(null);
-  await axios.get(`${import.meta.env.VITE_BACKEND_API_URL}/auth/logout`, {
-    withCredentials: true,
-  });
-}
 
 const signOut = async (reloadWindow = false) => {
-  await logout();
+  await authQuery.logout();
 
   // Reload the window if both `access_token` and `refresh_token`is invalid
   // there by the user is taken to the login page
@@ -69,7 +59,6 @@ const signOut = async (reloadWindow = false) => {
     window.location.reload();
   }
 
-  probableUser$.next(null);
   currentUser$.next(null);
   removeLocalConfig('login_state');
 
@@ -78,142 +67,66 @@ const signOut = async (reloadWindow = false) => {
   });
 };
 
-async function signInUserWithGithubFB() {
+const getInitialUserDetails = async () => {
-  window.location.href = `${
+  const res = await authQuery.getUserDetails();
-    import.meta.env.VITE_BACKEND_API_URL
-  }/auth/github?redirect_uri=${import.meta.env.VITE_ADMIN_URL}`;
-}
-
-async function signInUserWithGoogleFB() {
-  window.location.href = `${
-    import.meta.env.VITE_BACKEND_API_URL
-  }/auth/google?redirect_uri=${import.meta.env.VITE_ADMIN_URL}`;
-}
-
-async function signInUserWithMicrosoftFB() {
-  window.location.href = `${
-    import.meta.env.VITE_BACKEND_API_URL
-  }/auth/microsoft?redirect_uri=${import.meta.env.VITE_ADMIN_URL}`;
-}
-
-async function getInitialUserDetails() {
-  const res = await axios.post<{
-    data?: {
-      me?: {
-        uid: string;
-        displayName: string;
-        email: string;
-        photoURL: string;
-        isAdmin: boolean;
-        createdOn: string;
-        // emailVerified: boolean
-      };
-    };
-    errors?: Array<{
-      message: string;
-    }>;
-  }>(
-    `${import.meta.env.VITE_BACKEND_GQL_URL}`,
-    {
-      query: `query Me {
-      me {
-        uid
-        displayName
-        email
-        photoURL
-        isAdmin
-        createdOn
-      }
-    }`,
-    },
-    {
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      withCredentials: true,
-    }
-  );
-
   return res.data;
-}
+};
-
 const isGettingInitialUser: Ref<null | boolean> = ref(null);
 
-function setUser(user: HoppUser | null) {
+const setUser = (user: HoppUser | null) => {
   currentUser$.next(user);
-  probableUser$.next(user);
-
   setLocalConfig('login_state', JSON.stringify(user));
-}
+};
 
-async function setInitialUser() {
+const setInitialUser = async () => {
   isGettingInitialUser.value = true;
   const res = await getInitialUserDetails();
 
-  const error = res.errors && res.errors[0];
+  if (res.errors?.[0]) {
+    const [error] = res.errors;
 
-  // no cookies sent. so the user is not logged in
+    if (error.message === COOKIES_NOT_FOUND) {
-  if (error && error.message === 'auth/cookies_not_found') {
-    setUser(null);
-    isGettingInitialUser.value = false;
-    return;
-  }
-
-  // cookies sent, but it is expired, we need to refresh the token
-  if (error && error.message === 'Unauthorized') {
-    const isRefreshSuccess = await refreshToken();
-
-    if (isRefreshSuccess) {
-      setInitialUser();
-    } else {
       setUser(null);
-      await signOut(true);
+    } else if (error.message === UNAUTHORIZED) {
-      isGettingInitialUser.value = false;
+      const isRefreshSuccess = await refreshToken();
+
+      if (isRefreshSuccess) {
+        setInitialUser();
+      } else {
+        setUser(null);
+        signOut(true);
+      }
     }
-
+  } else if (res.data?.me) {
-    return;
+    const { uid, displayName, email, photoURL, isAdmin } = res.data.me;
-  }
-
-  // no errors, we have a valid user
-  if (res.data && res.data.me) {
-    const hoppBackendUser = res.data.me;
 
     const hoppUser: HoppUser = {
-      uid: hoppBackendUser.uid,
+      uid,
-      displayName: hoppBackendUser.displayName,
+      displayName,
-      email: hoppBackendUser.email,
+      email,
-      photoURL: hoppBackendUser.photoURL,
+      photoURL,
-      // all our signin methods currently guarantees the email is verified
       emailVerified: true,
-      isAdmin: hoppBackendUser.isAdmin,
+      isAdmin,
     };
 
     if (!hoppUser.isAdmin) {
-      const isAdmin = await elevateUser();
+      hoppUser.isAdmin = await elevateUser();
-      hoppUser.isAdmin = isAdmin;
     }
 
     setUser(hoppUser);
 
-    isGettingInitialUser.value = false;
-
     authEvents$.next({
       event: 'login',
       user: hoppUser,
     });
-
-    return;
   }
-}
+
+  isGettingInitialUser.value = false;
+};
 
 const refreshToken = async () => {
   try {
-    const res = await axios.get(
+    const res = await authQuery.refreshToken();
-      `${import.meta.env.VITE_BACKEND_API_URL}/auth/refresh`,
-      {
-        withCredentials: true,
-      }
-    );
     authEvents$.next({
       event: 'token_refresh',
     });
@@ -223,157 +136,67 @@ const refreshToken = async () => {
   }
 };
 
-async function elevateUser() {
+const elevateUser = async () => {
-  const res = await axios.get(
+  const res = await authQuery.elevateUser();
-    `${import.meta.env.VITE_BACKEND_API_URL}/auth/verify/admin`,
+  return Boolean(res.data?.isAdmin);
-    {
+};
-      withCredentials: true,
-    }
-  );
 
-  return !!res.data?.isAdmin;
+const sendMagicLink = async (email: string) => {
-}
+  const res = await authQuery.sendMagicLink(email);
-
+  if (!res.data?.deviceIdentifier) {
-async function sendMagicLink(email: string) {
-  const res = await axios.post(
-    `${import.meta.env.VITE_BACKEND_API_URL}/auth/signin?origin=admin`,
-    {
-      email,
-    },
-    {
-      withCredentials: true,
-    }
-  );
-
-  if (res.data && res.data.deviceIdentifier) {
-    setLocalConfig('deviceIdentifier', res.data.deviceIdentifier);
-  } else {
     throw new Error('test: does not get device identifier');
   }
-
+  setLocalConfig('deviceIdentifier', res.data.deviceIdentifier);
   return res.data;
-}
+};
 
 export const auth = {
   getCurrentUserStream: () => currentUser$,
   getAuthEventsStream: () => authEvents$,
-  getProbableUserStream: () => probableUser$,
-
   getCurrentUser: () => currentUser$.value,
-  getProbableUser: () => probableUser$.value,
 
-  getBackendHeaders() {
+  performAuthInit: () => {
-    return {};
+    const currentUser = JSON.parse(getLocalConfig('login_state') ?? 'null');
-  },
+    currentUser$.next(currentUser);
-  getGQLClientOptions() {
+    return setInitialUser();
-    return {
-      fetchOptions: {
-        credentials: 'include',
-      },
-    };
   },
 
-  /**
+  signInWithEmail: (email: string) => sendMagicLink(email),
-   * it is not possible for us to know if the current cookie is expired because we cannot access http-only cookies from js
-   * hence just returning if the currentUser$ has a value associated with it
-   */
-  willBackendHaveAuthError() {
-    return !currentUser$.value;
-  },
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  onBackendGQLClientShouldReconnect(func: () => void) {
-    authEvents$.subscribe((event) => {
-      if (
-        event.event == 'login' ||
-        event.event == 'logout' ||
-        event.event == 'token_refresh'
-      ) {
-        func();
-      }
-    });
-  },
 
-  /**
+  isSignInWithEmailLink: (url: string) => {
-   * we cannot access our auth cookies from javascript, so leaving this as null
-   */
-  getDevOptsBackendIDToken() {
-    return null;
-  },
-  async performAuthInit() {
-    const probableUser = JSON.parse(getLocalConfig('login_state') ?? 'null');
-    probableUser$.next(probableUser);
-    await setInitialUser();
-  },
-
-  waitProbableLoginToConfirm() {
-    return new Promise<void>((resolve, reject) => {
-      if (this.getCurrentUser()) {
-        resolve();
-      }
-
-      if (!probableUser$.value) reject(new Error('no_probable_user'));
-
-      const unwatch = watch(isGettingInitialUser, (val) => {
-        if (val === true || val === false) {
-          resolve();
-          unwatch();
-        }
-      });
-    });
-  },
-
-  async signInWithEmail(email: string) {
-    await sendMagicLink(email);
-  },
-
-  isSignInWithEmailLink(url: string) {
     const urlObject = new URL(url);
     const searchParams = new URLSearchParams(urlObject.search);
-
+    return Boolean(searchParams.get('token'));
-    return !!searchParams.get('token');
   },
 
-  async verifyEmailAddress() {
+  signInUserWithGoogle: () => {
-    return;
+    window.location.href = `${
+      import.meta.env.VITE_BACKEND_API_URL
+    }/auth/google?redirect_uri=${import.meta.env.VITE_ADMIN_URL}`;
   },
-  async signInUserWithGoogle() {
+
-    await signInUserWithGoogleFB();
+  signInUserWithGithub: () => {
+    window.location.href = `${
+      import.meta.env.VITE_BACKEND_API_URL
+    }/auth/github?redirect_uri=${import.meta.env.VITE_ADMIN_URL}`;
   },
-  async signInUserWithGithub() {
+
-    await signInUserWithGithubFB();
+  signInUserWithMicrosoft: () => {
-    return undefined;
+    window.location.href = `${
+      import.meta.env.VITE_BACKEND_API_URL
+    }/auth/microsoft?redirect_uri=${import.meta.env.VITE_ADMIN_URL}`;
   },
-  async signInUserWithMicrosoft() {
+
-    await signInUserWithMicrosoftFB();
+  signInWithEmailLink: (url: string) => {
-  },
-  async signInWithEmailLink(email: string, url: string) {
     const urlObject = new URL(url);
     const searchParams = new URLSearchParams(urlObject.search);
-
     const token = searchParams.get('token');
     const deviceIdentifier = getLocalConfig('deviceIdentifier');
 
-    await axios.post(
+    return authQuery.signInWithEmailLink(token, deviceIdentifier);
-      `${import.meta.env.VITE_BACKEND_API_URL}/auth/verify`,
-      {
-        token: token,
-        deviceIdentifier,
-      },
-      {
-        withCredentials: true,
-      }
-    );
-  },
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  async setEmailAddress(_email: string) {
-    return;
-  },
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  async setDisplayName(name: string) {
-    return;
   },
 
-  async performAuthRefresh() {
+  performAuthRefresh: async () => {
     const isRefreshSuccess = await refreshToken();
 
     if (isRefreshSuccess) {
@@ -386,12 +209,10 @@ export const auth = {
     }
   },
 
-  async signOutUser(reloadWindow = false) {
+  signOutUser: (reloadWindow = false) => signOut(reloadWindow),
-    await signOut(reloadWindow);
-  },
 
-  async processMagicLink() {
+  processMagicLink: async () => {
-    if (this.isSignInWithEmailLink(window.location.href)) {
+    if (auth.isSignInWithEmailLink(window.location.href)) {
       const deviceIdentifier = getLocalConfig('deviceIdentifier');
 
       if (!deviceIdentifier) {
@@ -400,7 +221,7 @@ export const auth = {
         );
       }
 
-      await this.signInWithEmailLink(deviceIdentifier, window.location.href);
+      await auth.signInWithEmailLink(window.location.href);
 
       removeLocalConfig('deviceIdentifier');
       window.location.href = import.meta.env.VITE_ADMIN_URL;

packages/hoppscotch-sh-admin/src/helpers/axiosConfig.ts

@@ -0,0 +1,20 @@
+import axios from 'axios';
+
+const baseConfig = {
+  headers: {
+    'Content-type': 'application/json',
+  },
+  withCredentials: true,
+};
+
+const gqlApi = axios.create({
+  ...baseConfig,
+  baseURL: import.meta.env.VITE_BACKEND_GQL_URL,
+});
+
+const restApi = axios.create({
+  ...baseConfig,
+  baseURL: import.meta.env.VITE_BACKEND_API_URL,
+});
+
+export { gqlApi, restApi };

packages/hoppscotch-sh-admin/src/helpers/backend/rest/authQuery.ts

@@ -0,0 +1,32 @@
+import { gqlApi, restApi } from '~/helpers/axiosConfig';
+
+export default {
+  getUserDetails: () =>
+    gqlApi.post('', {
+      query: `query Me {
+      me {
+        uid
+        displayName
+        email
+        photoURL
+        isAdmin
+        createdOn
+      }
+    }`,
+    }),
+  refreshToken: () => restApi.get('/auth/refresh'),
+  elevateUser: () => restApi.get('/auth/verify/admin'),
+  sendMagicLink: (email: string) =>
+    restApi.post('/auth/signin?origin=admin', {
+      email,
+    }),
+  signInWithEmailLink: (
+    token: string | null,
+    deviceIdentifier: string | null
+  ) =>
+    restApi.post('/auth/verify', {
+      token,
+      deviceIdentifier,
+    }),
+  logout: () => restApi.get('/auth/logout'),
+};

packages/hoppscotch-sh-admin/src/helpers/error.ts

@@ -1,3 +0,0 @@
-export const throwError = (message: string): never => {
-  throw new Error(message)
-}

packages/hoppscotch-sh-admin/src/helpers/errors.ts

@@ -0,0 +1,9 @@
+/* No cookies were found in the auth request
+ * (AuthService)
+ */
+export const COOKIES_NOT_FOUND = 'auth/cookies_not_found' as const;
+
+export const UNAUTHORIZED = 'Unauthorized' as const;
+
+// Sometimes the backend returns Unauthorized error message as follows:
+export const GRAPHQL_UNAUTHORIZED = '[GraphQL] Unauthorized' as const;

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

@@ -16,6 +16,7 @@ import { HOPP_MODULES } from './modules';
 import { auth } from './helpers/auth';
 import { pipe } from 'fp-ts/function';
 import * as O from 'fp-ts/Option';
+import { GRAPHQL_UNAUTHORIZED } from './helpers/errors';
 
 // Top-level await is not available in our targets
 (async () => {
@@ -40,12 +41,12 @@ import * as O from 'fp-ts/Option';
             async refreshAuth() {
               pipe(
                 await auth.performAuthRefresh(),
-                O.getOrElseW(async () => await auth.signOutUser(true))
+                O.getOrElseW(() => auth.signOutUser(true))
               );
             },
 
             didAuthError(error, _operation) {
-              return error.message === '[GraphQL] Unauthorized';
+              return error.message === GRAPHQL_UNAUTHORIZED;
             },
           };
         }),

packages/hoppscotch-sh-admin/src/pages/enter.vue

@@ -13,8 +13,8 @@ import { auth } from '~/helpers/auth';
 const signingInWithEmail = ref(false);
 const error = ref(null);
 
-onBeforeMount(() => {
+onBeforeMount(async () => {
-  auth.performAuthInit();
+  await auth.performAuthInit();
 });
 
 onMounted(async () => {