chore: changed name of template to user-invitation

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

packages/codemirror-lang-graphql/package.json

@@ -17,12 +17,12 @@
   "types": "dist/index.d.ts",
   "sideEffects": false,
   "dependencies": {
-    "@codemirror/language": "^6.9.0",
-    "@lezer/highlight": "^1.1.6",
-    "@lezer/lr": "^1.3.10"
+    "@codemirror/language": "^6.9.2",
+    "@lezer/highlight": "1.1.4",
+    "@lezer/lr": "^1.3.13"
   },
   "devDependencies": {
-    "@lezer/generator": "^1.5.0",
+    "@lezer/generator": "^1.5.1",
     "mocha": "^9.2.2",
     "rollup": "^3.29.3",
     "rollup-plugin-dts": "^6.0.2",

packages/hoppscotch-backend/package.json

@@ -24,18 +24,17 @@
     "do-test": "pnpm run test"
   },
   "dependencies": {
-    "@nestjs-modules/mailer": "^1.8.1",
-    "@nestjs/apollo": "^10.1.6",
-    "@nestjs/common": "^9.2.1",
-    "@nestjs/core": "^9.2.1",
-    "@nestjs/graphql": "^10.1.6",
-    "@nestjs/jwt": "^10.0.1",
-    "@nestjs/passport": "^9.0.0",
-    "@nestjs/platform-express": "^9.2.1",
-    "@nestjs/throttler": "^4.0.0",
+    "@apollo/server": "^4.9.4",
+    "@nestjs-modules/mailer": "^1.9.1",
+    "@nestjs/apollo": "^12.0.9",
+    "@nestjs/common": "^10.2.6",
+    "@nestjs/core": "^10.2.6",
+    "@nestjs/graphql": "^12.0.9",
+    "@nestjs/jwt": "^10.1.1",
+    "@nestjs/passport": "^10.0.2",
+    "@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/schematics": "^9.0.3",
-    "@nestjs/testing": "^9.2.1",
+    "@nestjs/cli": "^10.1.18",
+    "@nestjs/schematics": "^10.0.2",
+    "@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/admin/admin.service.ts

@@ -74,7 +74,7 @@ export class AdminService {
 
     try {
       await this.mailerService.sendUserInvitationEmail(inviteeEmail, {
-        template: 'code-your-own',
+        template: 'user-invitation',
         variables: {
           inviteeEmail: inviteeEmail,
           magicLink: `${process.env.VITE_BASE_URL}`,

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({
-      ttl: +process.env.RATE_LIMIT_TTL,
-      limit: +process.env.RATE_LIMIT_MAX,
-    }),
+    ThrottlerModule.forRoot([
+      {
+        ttl: +process.env.RATE_LIMIT_TTL,
+        limit: +process.env.RATE_LIMIT_MAX,
+      },
+    ]),
     UserModule,
     AuthModule,
     AdminModule,

packages/hoppscotch-backend/src/auth/auth.service.ts

@@ -229,7 +229,7 @@ export class AuthService {
     }
 
     await this.mailerService.sendEmail(email, {
-      template: 'code-your-own',
+      template: 'user-invitation',
       variables: {
         inviteeEmail: email,
         magicLink: `${url}/enter?token=${generatedTokens.token}`,

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

@@ -93,9 +93,7 @@ export async function emitGQLSchemaFile() {
       numberScalarMode: 'integer',
     });
 
-    const schemaString = printSchema(schema, {
-      commentDescriptions: true,
-    });
+    const schemaString = printSchema(schema);
 
     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/mailer/MailDescriptions.ts

@@ -8,7 +8,7 @@ export type MailDescription = {
 };
 
 export type UserMagicLinkMailDescription = {
-  template: 'code-your-own';
+  template: 'user-invitation';
   variables: {
     inviteeEmail: string;
     magicLink: string;
@@ -16,7 +16,7 @@ export type UserMagicLinkMailDescription = {
 };
 
 export type AdminUserInvitationMailDescription = {
-  template: 'code-your-own';
+  template: 'user-invitation';
   variables: {
     inviteeEmail: string;
     magicLink: string;

packages/hoppscotch-backend/src/mailer/mailer.service.ts

@@ -27,7 +27,7 @@ export class MailerService {
       case 'team-invitation':
         return `${mailDesc.variables.invitee} invited you to join ${mailDesc.variables.invite_team_name} in Hoppscotch`;
 
-      case 'code-your-own':
+      case 'user-invitation':
         return 'Sign in to Hoppscotch';
     }
   }

packages/hoppscotch-backend/src/mailer/templates/team-invitation.hbs

@@ -14,7 +14,7 @@
   -->
     <style type="text/css" rel="stylesheet" media="all">
     /* Base ------------------------------ */
-    
+
     @import url("https://fonts.googleapis.com/css?family=Nunito+Sans:400,700&display=swap");
     body {
       width: 100% !important;
@@ -22,19 +22,19 @@
       margin: 0;
       -webkit-text-size-adjust: none;
     }
-    
+
     a {
       color: #3869D4;
     }
-    
+
     a img {
       border: none;
     }
-    
+
     td {
       word-break: break-word;
     }
-    
+
     .preheader {
       display: none !important;
       visibility: hidden;
@@ -47,13 +47,13 @@
       overflow: hidden;
     }
     /* Type ------------------------------ */
-    
+
     body,
     td,
     th {
       font-family: "Nunito Sans", Helvetica, Arial, sans-serif;
     }
-    
+
     h1 {
       margin-top: 0;
       color: #333333;
@@ -61,7 +61,7 @@
       font-weight: bold;
       text-align: left;
     }
-    
+
     h2 {
       margin-top: 0;
       color: #333333;
@@ -69,7 +69,7 @@
       font-weight: bold;
       text-align: left;
     }
-    
+
     h3 {
       margin-top: 0;
       color: #333333;
@@ -77,12 +77,12 @@
       font-weight: bold;
       text-align: left;
     }
-    
+
     td,
     th {
       font-size: 16px;
     }
-    
+
     p,
     ul,
     ol,
@@ -91,25 +91,25 @@
       font-size: 16px;
       line-height: 1.625;
     }
-    
+
     p.sub {
       font-size: 13px;
     }
     /* Utilities ------------------------------ */
-    
+
     .align-right {
       text-align: right;
     }
-    
+
     .align-left {
       text-align: left;
     }
-    
+
     .align-center {
       text-align: center;
     }
     /* Buttons ------------------------------ */
-    
+
     .button {
       background-color: #3869D4;
       border-top: 10px solid #3869D4;
@@ -124,7 +124,7 @@
       -webkit-text-size-adjust: none;
       box-sizing: border-box;
     }
-    
+
     .button--green {
       background-color: #22BC66;
       border-top: 10px solid #22BC66;
@@ -132,7 +132,7 @@
       border-bottom: 10px solid #22BC66;
       border-left: 18px solid #22BC66;
     }
-    
+
     .button--red {
       background-color: #FF6136;
       border-top: 10px solid #FF6136;
@@ -140,7 +140,7 @@
       border-bottom: 10px solid #FF6136;
       border-left: 18px solid #FF6136;
     }
-    
+
     @media only screen and (max-width: 500px) {
       .button {
         width: 100% !important;
@@ -148,21 +148,21 @@
       }
     }
     /* Attribute list ------------------------------ */
-    
+
     .attributes {
       margin: 0 0 21px;
     }
-    
+
     .attributes_content {
       background-color: #F4F4F7;
       padding: 16px;
     }
-    
+
     .attributes_item {
       padding: 0;
     }
     /* Related Items ------------------------------ */
-    
+
     .related {
       width: 100%;
       margin: 0;
@@ -171,31 +171,31 @@
       -premailer-cellpadding: 0;
       -premailer-cellspacing: 0;
     }
-    
+
     .related_item {
       padding: 10px 0;
       color: #CBCCCF;
       font-size: 15px;
       line-height: 18px;
     }
-    
+
     .related_item-title {
       display: block;
       margin: .5em 0 0;
     }
-    
+
     .related_item-thumb {
       display: block;
       padding-bottom: 10px;
     }
-    
+
     .related_heading {
       border-top: 1px solid #CBCCCF;
       text-align: center;
       padding: 25px 0 10px;
     }
     /* Discount Code ------------------------------ */
-    
+
     .discount {
       width: 100%;
       margin: 0;
@@ -206,33 +206,33 @@
       background-color: #F4F4F7;
       border: 2px dashed #CBCCCF;
     }
-    
+
     .discount_heading {
       text-align: center;
     }
-    
+
     .discount_body {
       text-align: center;
       font-size: 15px;
     }
     /* Social Icons ------------------------------ */
-    
+
     .social {
       width: auto;
     }
-    
+
     .social td {
       padding: 0;
       width: auto;
     }
-    
+
     .social_icon {
       height: 20px;
       margin: 0 8px 10px 8px;
       padding: 0;
     }
     /* Data table ------------------------------ */
-    
+
     .purchase {
       width: 100%;
       margin: 0;
@@ -241,7 +241,7 @@
       -premailer-cellpadding: 0;
       -premailer-cellspacing: 0;
     }
-    
+
     .purchase_content {
       width: 100%;
       margin: 0;
@@ -250,50 +250,50 @@
       -premailer-cellpadding: 0;
       -premailer-cellspacing: 0;
     }
-    
+
     .purchase_item {
       padding: 10px 0;
       color: #51545E;
       font-size: 15px;
       line-height: 18px;
     }
-    
+
     .purchase_heading {
       padding-bottom: 8px;
       border-bottom: 1px solid #EAEAEC;
     }
-    
+
     .purchase_heading p {
       margin: 0;
       color: #85878E;
       font-size: 12px;
     }
-    
+
     .purchase_footer {
       padding-top: 15px;
       border-top: 1px solid #EAEAEC;
     }
-    
+
     .purchase_total {
       margin: 0;
       text-align: right;
       font-weight: bold;
       color: #333333;
     }
-    
+
     .purchase_total--label {
       padding: 0 15px 0 0;
     }
-    
+
     body {
       background-color: #F2F4F6;
       color: #51545E;
     }
-    
+
     p {
       color: #51545E;
     }
-    
+
     .email-wrapper {
       width: 100%;
       margin: 0;
@@ -303,7 +303,7 @@
       -premailer-cellspacing: 0;
       background-color: #F2F4F6;
     }
-    
+
     .email-content {
       width: 100%;
       margin: 0;
@@ -313,16 +313,16 @@
       -premailer-cellspacing: 0;
     }
     /* Masthead ----------------------- */
-    
+
     .email-masthead {
       padding: 25px 0;
       text-align: center;
     }
-    
+
     .email-masthead_logo {
       width: 94px;
     }
-    
+
     .email-masthead_name {
       font-size: 16px;
       font-weight: bold;
@@ -331,7 +331,7 @@
       text-shadow: 0 1px 0 white;
     }
     /* Body ------------------------------ */
-    
+
     .email-body {
       width: 100%;
       margin: 0;
@@ -340,7 +340,7 @@
       -premailer-cellpadding: 0;
       -premailer-cellspacing: 0;
     }
-    
+
     .email-body_inner {
       width: 570px;
       margin: 0 auto;
@@ -350,7 +350,7 @@
       -premailer-cellspacing: 0;
       background-color: #FFFFFF;
     }
-    
+
     .email-footer {
       width: 570px;
       margin: 0 auto;
@@ -360,11 +360,11 @@
       -premailer-cellspacing: 0;
       text-align: center;
     }
-    
+
     .email-footer p {
       color: #A8AAAF;
     }
-    
+
     .body-action {
       width: 100%;
       margin: 30px auto;
@@ -374,25 +374,25 @@
       -premailer-cellspacing: 0;
       text-align: center;
     }
-    
+
     .body-sub {
       margin-top: 25px;
       padding-top: 25px;
       border-top: 1px solid #EAEAEC;
     }
-    
+
     .content-cell {
       padding: 45px;
     }
     /*Media Queries ------------------------------ */
-    
+
     @media only screen and (max-width: 600px) {
       .email-body_inner,
       .email-footer {
         width: 100% !important;
       }
     }
-    
+
     @media (prefers-color-scheme: dark) {
       body,
       .email-body,

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-common/package.json

@@ -17,22 +17,22 @@
     "postinstall": "pnpm run gql-codegen",
     "do-test": "pnpm run test",
     "do-lint": "pnpm run prod-lint",
-    "do-typecheck": "pnpm run lint",
+    "do-typecheck": "node type-check.mjs",
     "do-lintfix": "pnpm run lintfix"
   },
   "dependencies": {
     "@apidevtools/swagger-parser": "^10.1.0",
-    "@codemirror/autocomplete": "^6.9.0",
-    "@codemirror/commands": "^6.2.4",
-    "@codemirror/lang-javascript": "^6.1.9",
+    "@codemirror/autocomplete": "^6.10.2",
+    "@codemirror/commands": "^6.3.0",
+    "@codemirror/lang-javascript": "^6.2.1",
     "@codemirror/lang-json": "^6.0.1",
     "@codemirror/lang-xml": "^6.0.2",
-    "@codemirror/language": "^6.9.0",
+    "@codemirror/language": "^6.9.2",
     "@codemirror/legacy-modes": "^6.3.3",
-    "@codemirror/lint": "^6.4.0",
-    "@codemirror/search": "^6.5.1",
-    "@codemirror/state": "^6.2.1",
-    "@codemirror/view": "^6.16.0",
+    "@codemirror/lint": "^6.4.2",
+    "@codemirror/search": "^6.5.4",
+    "@codemirror/state": "^6.3.1",
+    "@codemirror/view": "^6.22.0",
     "@fontsource-variable/inter": "^5.0.8",
     "@fontsource-variable/material-symbols-rounded": "^5.0.7",
     "@fontsource-variable/roboto-mono": "^5.0.9",
@@ -41,9 +41,7 @@
     "@hoppscotch/js-sandbox": "workspace:^",
     "@hoppscotch/ui": "workspace:^",
     "@hoppscotch/vue-toasted": "^0.1.0",
-    "@lezer/highlight": "^1.1.6",
-    "@sentry/tracing": "^7.64.0",
-    "@sentry/vue": "^7.64.0",
+    "@lezer/highlight": "1.1.4",
     "@urql/core": "^4.1.1",
     "@urql/devtools": "^2.0.3",
     "@urql/exchange-auth": "^2.1.6",
@@ -138,6 +136,7 @@
     "eslint": "^8.47.0",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-vue": "^9.17.0",
+    "glob": "^10.3.10",
     "npm-run-all": "^4.1.5",
     "openapi-types": "^12.1.3",
     "rollup-plugin-polyfill-node": "^0.12.0",

packages/hoppscotch-common/src/components/collections/index.vue

@@ -18,13 +18,12 @@
       "
     >
       <WorkspaceCurrent :section="t('tab.collections')" />
-
-      <HoppSmartInput
+      <input
         v-model="filterTexts"
-        :placeholder="t('action.search')"
-        input-styles="py-2 pl-4 pr-2 bg-transparent !border-0"
         type="search"
-        :autofocus="false"
+        autocomplete="off"
+        class="flex w-full p-4 py-2 bg-transparent h-8"
+        :placeholder="t('action.search')"
         :disabled="collectionsType.type === 'team-collections'"
       />
     </div>

packages/hoppscotch-common/src/components/environments/Selector.vue

@@ -66,7 +66,7 @@
           />
           <HoppSmartTabs
             v-model="selectedEnvTab"
-            :styles="`sticky overflow-x-auto my-2 border border-divider rounded flex-shrink-0 z-0 top-0 bg-primary ${
+            :styles="`sticky overflow-x-auto my-2 border border-divider rounded flex-shrink-0 z-10 top-0 bg-primary ${
               !isTeamSelected || workspace.type === 'personal'
                 ? 'bg-primaryLight'
                 : ''

packages/hoppscotch-common/src/components/graphql/Sidebar.vue

@@ -30,8 +30,8 @@
             v-model="graphqlFieldsFilterText"
             type="search"
             autocomplete="off"
+            class="flex w-full p-4 py-2 bg-transparent h-8"
             :placeholder="`${t('action.search')}`"
-            class="flex flex-1 p-4 py-2 bg-transparent"
           />
           <div class="flex">
             <HoppButtonSecondary

packages/hoppscotch-common/src/components/history/index.vue

@@ -9,7 +9,7 @@
           v-model="filterText"
           type="search"
           autocomplete="off"
-          class="flex flex-1 p-4 py-2 bg-transparent"
+          class="flex w-full p-4 py-2 bg-transparent h-8"
           :placeholder="`${t('action.search')}`"
         />
         <div class="flex">

packages/hoppscotch-common/src/components/http/Headers.vue

@@ -256,7 +256,7 @@ import * as E from "fp-ts/Either"
 import * as O from "fp-ts/Option"
 import * as A from "fp-ts/Array"
 import draggable from "vuedraggable-es"
-import { RequestOptionTabs } from "./RequestOptions.vue"
+import { RESTOptionTabs } from "./RequestOptions.vue"
 import { useCodemirror } from "@composables/codemirror"
 import { commonHeaders } from "~/helpers/headers"
 import { useI18n } from "@composables/i18n"
@@ -295,7 +295,7 @@ const deletionToast = ref<{ goAway: (delay: number) => void } | null>(null)
 const props = defineProps<{ modelValue: HoppRESTRequest }>()
 
 const emit = defineEmits<{
-  (e: "change-tab", value: RequestOptionTabs): void
+  (e: "change-tab", value: RESTOptionTabs): void
   (e: "update:modelValue", value: HoppRESTRequest): void
 }>()
 

packages/hoppscotch-common/src/components/teams/Edit.vue

@@ -35,12 +35,12 @@
           v-if="
             !teamDetails.loading &&
             E.isRight(teamDetails.data) &&
-            teamDetails.data.right.team.teamMembers
+            teamDetails.data.right.team?.teamMembers
           "
           class="border rounded border-divider"
         >
           <HoppSmartPlaceholder
-            v-if="teamDetails.data.right.team.teamMembers === 0"
+            v-if="teamDetails.data.right.team.teamMembers.length === 0"
             :src="`/images/states/${colorMode.value}/add_group.svg`"
             :alt="`${t('empty.members')}`"
             :text="t('empty.members')"

packages/hoppscotch-common/src/components/teams/Invite.vue

@@ -88,7 +88,7 @@
             >
               <div
                 v-for="(invitee, index) in pendingInvites.data.right.team
-                  .teamInvitations"
+                  ?.teamInvitations"
                 :key="`invitee-${index}`"
                 class="flex divide-x divide-dividerLight"
               >
@@ -122,7 +122,7 @@
             <HoppSmartPlaceholder
               v-if="
                 E.isRight(pendingInvites.data) &&
-                pendingInvites.data.right.team.teamInvitations.length === 0
+                pendingInvites.data.right.team?.teamInvitations.length === 0
               "
               :text="t('empty.pending_invites')"
             >

packages/hoppscotch-common/src/helpers/actions.ts

@@ -6,7 +6,7 @@ import { Ref, onBeforeUnmount, onMounted, reactive, watch } from "vue"
 import { BehaviorSubject } from "rxjs"
 import { HoppRESTDocument } from "./rest/document"
 import { HoppGQLRequest, HoppRESTRequest } from "@hoppscotch/data"
-import { RequestOptionTabs } from "~/components/http/RequestOptions.vue"
+import { RESTOptionTabs } from "~/components/http/RequestOptions.vue"
 import { HoppGQLSaveContext } from "./graphql/document"
 import { GQLOptionTabs } from "~/components/graphql/RequestOptions.vue"
 import { computed } from "vue"
@@ -113,7 +113,7 @@ type HoppActionArgsMap = {
         request: HoppGQLRequest
       }
   "request.open-tab": {
-    tab: RequestOptionTabs | GQLOptionTabs
+    tab: RESTOptionTabs | GQLOptionTabs
   }
 
   "tab.duplicate-tab": {

packages/hoppscotch-common/src/modules/i18n.ts

@@ -58,7 +58,13 @@ export const FALLBACK_LANG = pipe(
 )
 
 // A reference to the i18n instance
-let i18nInstance: I18n<any, any, any> | null = null
+let i18nInstance: I18n<
+  Record<string, unknown>,
+  Record<string, unknown>,
+  Record<string, unknown>,
+  string,
+  true
+> | null = null
 
 const resolveCurrentLocale = () =>
   pipe(
@@ -119,7 +125,6 @@ export const changeAppLanguage = async (locale: string) => {
  * Returns the i18n instance
  */
 export function getI18n() {
-  // @ts-expect-error Something weird with the i18n errors
   return i18nInstance!.global.t
 }
 

packages/hoppscotch-common/src/modules/sentry.ts

@@ -1,200 +0,0 @@
-import { HoppModule } from "."
-import * as Sentry from "@sentry/vue"
-import { BrowserTracing } from "@sentry/tracing"
-import { Route } from "@sentry/vue/types/router"
-import { RouteLocationNormalized, Router } from "vue-router"
-import { settingsStore } from "~/newstore/settings"
-import { App } from "vue"
-import { APP_IS_IN_DEV_MODE } from "~/helpers/dev"
-import { gqlClientError$ } from "~/helpers/backend/GQLClient"
-import { platform } from "~/platform"
-
-/**
- * The tag names we allow giving to Sentry
- */
-type SentryTag = "BACKEND_OPERATIONS"
-
-interface SentryVueRouter {
-  onError: (fn: (err: Error) => void) => void
-  beforeEach: (fn: (to: Route, from: Route, next: () => void) => void) => void
-}
-
-function normalizedRouteToSentryRoute(route: RouteLocationNormalized): Route {
-  return {
-    matched: route.matched,
-    // route.params' type translates just to a fancy version of this, hence assertion
-    params: route.params as Route["params"],
-    path: route.path,
-    // route.query's type translates just to a fancy version of this, hence assertion
-    query: route.query as Route["query"],
-    name: route.name,
-  }
-}
-
-function getInstrumentationVueRouter(router: Router): SentryVueRouter {
-  return <SentryVueRouter>{
-    onError: router.onError,
-    beforeEach(func) {
-      router.beforeEach((to, from, next) => {
-        func(
-          normalizedRouteToSentryRoute(to),
-          normalizedRouteToSentryRoute(from),
-          next
-        )
-      })
-    },
-  }
-}
-
-let sentryActive = false
-
-function initSentry(dsn: string, router: Router, app: App) {
-  Sentry.init({
-    app,
-    dsn,
-    release: import.meta.env.VITE_SENTRY_RELEASE_TAG ?? undefined,
-    environment: APP_IS_IN_DEV_MODE
-      ? "dev"
-      : import.meta.env.VITE_SENTRY_ENVIRONMENT,
-    integrations: [
-      new BrowserTracing({
-        routingInstrumentation: Sentry.vueRouterInstrumentation(
-          getInstrumentationVueRouter(router)
-        ),
-        // TODO: We may want to limit this later on
-        tracingOrigins: [new URL(import.meta.env.VITE_BACKEND_GQL_URL).origin],
-      }),
-    ],
-    tracesSampleRate: 0.8,
-  })
-  sentryActive = true
-}
-
-function deinitSentry() {
-  Sentry.close()
-  sentryActive = false
-}
-
-/**
- * Reports a set of related errors to Sentry
- * @param errs The errors to report
- * @param tag The tag for the errord
- * @param extraTags Additional tag data to add
- * @param extras Extra information to attach
- */
-function reportErrors(
-  errs: Error[],
-  tag: SentryTag,
-  extraTags: Record<string, string | number | boolean> | null = null,
-  extras: any = undefined
-) {
-  if (sentryActive) {
-    Sentry.withScope((scope) => {
-      scope.setTag("tag", tag)
-      if (extraTags) {
-        Object.entries(extraTags).forEach(([key, value]) => {
-          scope.setTag(key, value)
-        })
-      }
-      if (extras !== null && extras === undefined) scope.setExtras(extras)
-
-      scope.addAttachment({
-        filename: "extras-dump.json",
-        data: JSON.stringify(extras),
-        contentType: "application/json",
-      })
-
-      errs.forEach((err) => Sentry.captureException(err))
-    })
-  }
-}
-
-/**
- * Reports a specific error to Sentry
- * @param err The error to report
- * @param tag The tag for the error
- * @param extraTags Additional tag data to add
- * @param extras Extra information to attach
- */
-function reportError(
-  err: Error,
-  tag: SentryTag,
-  extraTags: Record<string, string | number | boolean> | null = null,
-  extras: any = undefined
-) {
-  reportErrors([err], tag, extraTags, extras)
-}
-
-/**
- * Subscribes to events occuring in various subsystems in the app
- * for personalized error reporting
- */
-function subscribeToAppEventsForReporting() {
-  gqlClientError$.subscribe((ev) => {
-    switch (ev.type) {
-      case "SUBSCRIPTION_CONN_CALLBACK_ERR_REPORT":
-        reportErrors(ev.errors, "BACKEND_OPERATIONS", { from: ev.type })
-        break
-
-      case "CLIENT_REPORTED_ERROR":
-        reportError(
-          ev.error,
-          "BACKEND_OPERATIONS",
-          { from: ev.type },
-          { op: ev.op }
-        )
-        break
-
-      case "GQL_CLIENT_REPORTED_ERROR":
-        reportError(
-          new Error("Backend Query Failed"),
-          "BACKEND_OPERATIONS",
-          { opType: ev.opType },
-          {
-            opResult: ev.opResult,
-          }
-        )
-        break
-    }
-  })
-}
-
-/**
- * Subscribe to app system events for adding
- * additional data tags for the error reporting
- */
-function subscribeForAppDataTags() {
-  const currentUser$ = platform.auth.getCurrentUserStream()
-
-  currentUser$.subscribe((user) => {
-    if (sentryActive) {
-      Sentry.setTag("user_logged_in", !!user)
-    }
-  })
-}
-
-export default <HoppModule>{
-  onRouterInit(app, router) {
-    if (!import.meta.env.VITE_SENTRY_DSN) {
-      console.log(
-        "Sentry tracing is not enabled because 'VITE_SENTRY_DSN' env is not defined"
-      )
-      return
-    }
-
-    if (settingsStore.value.TELEMETRY_ENABLED) {
-      initSentry(import.meta.env.VITE_SENTRY_DSN, router, app)
-    }
-
-    settingsStore.subject$.subscribe(({ TELEMETRY_ENABLED }) => {
-      if (!TELEMETRY_ENABLED && sentryActive) {
-        deinitSentry()
-      } else if (TELEMETRY_ENABLED && !sentryActive) {
-        initSentry(import.meta.env.VITE_SENTRY_DSN!, router, app)
-      }
-    })
-
-    subscribeToAppEventsForReporting()
-    subscribeForAppDataTags()
-  },
-}

packages/hoppscotch-common/src/pages/settings.vue

@@ -60,6 +60,7 @@
             <div class="py-4 space-y-4">
               <div class="flex items-center">
                 <HoppSmartToggle
+                  v-if="hasPlatformTelemetry"
                   :on="TELEMETRY_ENABLED"
                   @change="showConfirmModal"
                 >
@@ -134,6 +135,7 @@ import { InterceptorService } from "~/services/interceptor.service"
 import { pipe } from "fp-ts/function"
 import * as O from "fp-ts/Option"
 import * as A from "fp-ts/Array"
+import { platform } from "~/platform"
 
 const t = useI18n()
 const colorMode = useColorMode()
@@ -163,6 +165,8 @@ const TELEMETRY_ENABLED = useSetting("TELEMETRY_ENABLED")
 const EXPAND_NAVIGATION = useSetting("EXPAND_NAVIGATION")
 const SIDEBAR_ON_LEFT = useSetting("SIDEBAR_ON_LEFT")
 
+const hasPlatformTelemetry = Boolean(platform.platformFeatureFlags.hasTelemetry)
+
 const confirmRemove = ref(false)
 
 const proxySettings = computed(() => ({

packages/hoppscotch-common/src/platform/index.ts

@@ -26,6 +26,7 @@ export type PlatformDef = {
   additionalInspectors?: InspectorsPlatformDef
   platformFeatureFlags: {
     exportAsGIST: boolean
+    hasTelemetry: boolean
   }
 }
 

packages/hoppscotch-common/src/workers/regex.js

@@ -1,10 +1,10 @@
 function generateREForProtocol(protocol) {
   return [
     new RegExp(
-      `${protocol}(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]).){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$`
+      `${protocol}(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]).){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])(:[0-9]+)?(\\/[^?#]*)?(\\?[^#]*)?(#.*)?$`
     ),
     new RegExp(
-      `${protocol}(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]).)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9-]*[A-Za-z0-9/])$`
+      `${protocol}(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]).)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9-]*[A-Za-z0-9/])(:[0-9]+)?(\\/[^?#]*)?(\\?[^#]*)?(#.*)?$`
     ),
   ]
 }

packages/hoppscotch-common/type-check.mjs

@@ -0,0 +1,92 @@
+import fs from "fs"
+import { glob } from "glob"
+import path from "path"
+import ts from "typescript"
+import vueTsc from "vue-tsc"
+
+import { fileURLToPath } from "url"
+
+/**
+ * Helper function to find files to perform type check on
+ */
+const findFilesToPerformTypeCheck = (directoryPaths, filePatterns) => {
+  const files = []
+
+  directoryPaths.forEach((directoryPath) => {
+    if (!fs.existsSync(directoryPath)) {
+      console.error(`Directory not found: ${directoryPath}`)
+      process.exit(1)
+    }
+
+    files.push(
+      ...glob.sync(filePatterns, {
+        cwd: directoryPath,
+        ignore: ["**/__tests__/**", "**/*.d.ts"],
+        absolute: true,
+      })
+    )
+  })
+  return files
+}
+
+// Derive the current file's directory path `__dirname` from the URL of this module `__filename`
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+// Define the directory paths and file patterns to perform type checks on
+const directoryPaths = [path.resolve(__dirname, "src", "services")]
+const filePatterns = ["**/*.ts"]
+
+const tsConfigFileName = path.resolve(__dirname, "tsconfig.json")
+const tsConfig = ts.readConfigFile(tsConfigFileName, ts.sys.readFile)
+const { options } = ts.parseJsonConfigFileContent(
+  tsConfig.config,
+  ts.sys,
+  __dirname
+)
+
+const files = findFilesToPerformTypeCheck(directoryPaths, filePatterns)
+
+const host = ts.createCompilerHost(options)
+const program = vueTsc.createProgram({
+  rootNames: files,
+  options: { ...options, noEmit: true },
+  host,
+})
+
+// Perform type checking
+const diagnostics = ts
+  .getPreEmitDiagnostics(program)
+  // Filter diagnostics to include only errors from files in the specified directory
+  .filter(({ file }) => {
+    if (!file) {
+      return false
+    }
+    return directoryPaths.some((directoryPath) =>
+      path.resolve(file.fileName).includes(directoryPath)
+    )
+  })
+
+if (!diagnostics.length) {
+  console.log("Type checking passed.")
+
+  // Success
+  process.exit(0)
+}
+
+console.log("TypeScript diagnostics:")
+
+const formatHost = {
+  getCanonicalFileName: (fileName) => fileName,
+  getCurrentDirectory: host.getCurrentDirectory,
+  getNewLine: () => ts.sys.newLine,
+}
+
+const formattedDiagnostics = ts.formatDiagnosticsWithColorAndContext(
+  diagnostics,
+  formatHost
+)
+console.error(formattedDiagnostics)
+
+// Failure
+process.exit(1)

packages/hoppscotch-data/package.json

@@ -6,7 +6,9 @@
   "main": "dist/hoppscotch-data.cjs",
   "module": "dist/hoppscotch-data.js",
   "types": "./dist/index.d.ts",
-  "files": [ "dist/*" ],
+  "files": [
+    "dist/*"
+  ],
   "scripts": {
     "build:code": "vite build",
     "build:decl": "tsc --project tsconfig.decl.json",
@@ -32,14 +34,16 @@
   },
   "homepage": "https://github.com/hoppscotch/hoppscotch#readme",
   "devDependencies": {
-    "@types/lodash": "^4.14.181",
-    "typescript": "^4.6.3",
-    "vite": "^3.2.3"
+    "@types/lodash": "^4.14.200",
+    "typescript": "^5.2.2",
+    "vite": "^4.5.0"
   },
   "dependencies": {
-    "fp-ts": "^2.11.10",
-    "io-ts": "^2.2.16",
+    "fp-ts": "^2.16.1",
+    "io-ts": "^2.2.20",
     "lodash": "^4.17.21",
-    "parser-ts": "^0.6.16"
+    "parser-ts": "^0.7.0",
+    "verzod": "^0.1.1",
+    "zod": "^3.22.4"
   }
 }

packages/hoppscotch-data/src/environment/index.ts

@@ -1,14 +1,22 @@
-import { pipe } from "fp-ts/function"
 import * as E from "fp-ts/Either"
+import { pipe } from "fp-ts/function"
+import { InferredEntity, createVersionedEntity } from "verzod"
 
-export type Environment = {
-  id?: string
-  name: string
-  variables: {
-    key: string
-    value: string
-  }[]
-}
+import V0_VERSION from "./v/0"
+
+export const Environment = createVersionedEntity({
+  latestVersion: 0,
+  versionMap: {
+    0: V0_VERSION
+  },
+  getVersion(x) {
+    return V0_VERSION.schema.safeParse(x).success
+      ? 0
+      : null
+  }
+})
+
+export type Environment = InferredEntity<typeof Environment>
 
 const REGEX_ENV_VAR = /<<([^>]*)>>/g // "<<myVariable>>"
 

packages/hoppscotch-data/src/environment/v/0.ts

@@ -0,0 +1,18 @@
+import { z } from "zod"
+import { defineVersion } from "verzod"
+
+export const V0_SCHEMA = z.object({
+  id: z.optional(z.string()),
+  name: z.string(),
+  variables: z.array(
+    z.object({
+      key: z.string(),
+      value: z.string(),
+    })
+  )
+})
+
+export default defineVersion({
+  initial: true,
+  schema: V0_SCHEMA
+})

packages/hoppscotch-data/src/graphql/HoppGQLAuth.ts

@@ -1,43 +0,0 @@
-export type HoppGQLAuthNone = {
-  authType: "none"
-}
-
-export type HoppGQLAuthBasic = {
-  authType: "basic"
-
-  username: string
-  password: string
-}
-
-export type HoppGQLAuthBearer = {
-  authType: "bearer"
-
-  token: string
-}
-
-export type HoppGQLAuthOAuth2 = {
-  authType: "oauth-2"
-
-  token: string
-  oidcDiscoveryURL: string
-  authURL: string
-  accessTokenURL: string
-  clientID: string
-  scope: string
-}
-
-export type HoppGQLAuthAPIKey = {
-  authType: "api-key"
-
-  key: string
-  value: string
-  addTo: string
-}
-
-export type HoppGQLAuth = { authActive: boolean } & (
-  | HoppGQLAuthNone
-  | HoppGQLAuthBasic
-  | HoppGQLAuthBearer
-  | HoppGQLAuthOAuth2
-  | HoppGQLAuthAPIKey
-)

packages/hoppscotch-data/src/graphql/index.ts

@@ -1,51 +1,75 @@
-import { HoppGQLAuth } from "./HoppGQLAuth"
+import { InferredEntity, createVersionedEntity } from "verzod"
+import { z } from "zod"
+import V1_VERSION from "./v/1"
+import V2_VERSION from "./v/2"
 
-export * from "./HoppGQLAuth"
+export { GQLHeader } from "./v/1"
+export {
+  HoppGQLAuth,
+  HoppGQLAuthAPIKey,
+  HoppGQLAuthBasic,
+  HoppGQLAuthBearer,
+  HoppGQLAuthNone,
+  HoppGQLAuthOAuth2,
+} from "./v/2"
 
 export const GQL_REQ_SCHEMA_VERSION = 2
 
-export type GQLHeader = {
-  key: string
-  value: string
-  active: boolean
-}
+const versionedObject = z.object({
+  v: z.number(),
+})
 
-export type HoppGQLRequest = {
-  id?: string
-  v: number
-  name: string
-  url: string
-  headers: GQLHeader[]
-  query: string
-  variables: string
-  auth: HoppGQLAuth
-}
+export const HoppGQLRequest = createVersionedEntity({
+  latestVersion: 2,
+  versionMap: {
+    1: V1_VERSION,
+    2: V2_VERSION,
+  },
+  getVersion(x) {
+    const result = versionedObject.safeParse(x)
 
-export function translateToGQLRequest(x: any): HoppGQLRequest {
-  if (x.v && x.v === GQL_REQ_SCHEMA_VERSION) return x
+    return result.success ? result.data.v : null
+  },
+})
 
-  // Old request
-  const name = x.name ?? "Untitled"
-  const url = x.url ?? ""
-  const headers = x.headers ?? []
-  const query = x.query ?? ""
-  const variables = x.variables ?? []
-  const auth = x.auth ?? {
-    authType: "none",
-    authActive: true,
+export type HoppGQLRequest = InferredEntity<typeof HoppGQLRequest>
+
+const DEFAULT_QUERY = `
+query Request {
+  method
+  url
+  headers {
+    key
+    value
   }
+}`.trim()
 
+export function getDefaultGQLRequest(): HoppGQLRequest {
   return {
     v: GQL_REQ_SCHEMA_VERSION,
-    name,
-    url,
-    headers,
-    query,
-    variables,
-    auth
+    name: "Untitled",
+    url: "https://echo.hoppscotch.io/graphql",
+    headers: [],
+    variables: `
+{
+  "id": "1"
+}`.trim(),
+    query: DEFAULT_QUERY,
+    auth: {
+      authType: "none",
+      authActive: true,
+    },
   }
 }
 
+/**
+ * @deprecated This function is deprecated. Use `HoppGQLRequest` instead.
+ */
+export function translateToGQLRequest(x: unknown): HoppGQLRequest {
+  const result = HoppGQLRequest.safeParse(x)
+  return result.type === "ok" ? result.value : getDefaultGQLRequest()
+}
+
 export function makeGQLRequest(x: Omit<HoppGQLRequest, "v">): HoppGQLRequest {
   return {
     v: GQL_REQ_SCHEMA_VERSION,

packages/hoppscotch-data/src/graphql/v/1.ts

@@ -0,0 +1,24 @@
+import { z } from "zod"
+import { defineVersion } from "verzod"
+
+export const GQLHeader = z.object({
+  key: z.string(),
+  value: z.string(),
+  active: z.boolean()
+})
+
+export type GQLHeader = z.infer<typeof GQLHeader>
+
+export const V1_SCHEMA = z.object({
+  v: z.literal(1),
+  name: z.string(),
+  url: z.string(),
+  headers: z.array(GQLHeader),
+  query: z.string(),
+  variables: z.string(),
+})
+
+export default defineVersion({
+  initial: true,
+  schema: V1_SCHEMA
+})

packages/hoppscotch-data/src/graphql/v/2.ts

@@ -0,0 +1,91 @@
+import { z } from "zod"
+import { defineVersion } from "verzod"
+import { GQLHeader, V1_SCHEMA } from "./1"
+
+export const HoppGQLAuthNone = z.object({
+  authType: z.literal("none")
+})
+
+export type HoppGQLAuthNone = z.infer<typeof HoppGQLAuthNone>
+
+export const HoppGQLAuthBasic = z.object({
+  authType: z.literal("basic"),
+
+  username: z.string(),
+  password: z.string()
+})
+
+export type HoppGQLAuthBasic = z.infer<typeof HoppGQLAuthBasic>
+
+export const HoppGQLAuthBearer = z.object({
+  authType: z.literal("bearer"),
+
+  token: z.string()
+})
+
+export type HoppGQLAuthBearer = z.infer<typeof HoppGQLAuthBearer>
+
+export const HoppGQLAuthOAuth2 = z.object({
+  authType: z.literal("oauth-2"),
+
+  token: z.string(),
+  oidcDiscoveryURL: z.string(),
+  authURL: z.string(),
+  accessTokenURL: z.string(),
+  clientID: z.string(),
+  scope: z.string()
+})
+
+export type HoppGQLAuthOAuth2 = z.infer<typeof HoppGQLAuthOAuth2>
+
+export const HoppGQLAuthAPIKey = z.object({
+  authType: z.literal("api-key"),
+
+  key: z.string(),
+  value: z.string(),
+  addTo: z.string()
+})
+
+export type HoppGQLAuthAPIKey = z.infer<typeof HoppGQLAuthAPIKey>
+
+export const HoppGQLAuth = z.discriminatedUnion("authType", [
+  HoppGQLAuthNone,
+  HoppGQLAuthBasic,
+  HoppGQLAuthBearer,
+  HoppGQLAuthOAuth2,
+  HoppGQLAuthAPIKey
+]).and(
+  z.object({
+    authActive: z.boolean()
+  })
+)
+
+export type HoppGQLAuth = z.infer<typeof HoppGQLAuth>
+
+const V2_SCHEMA = z.object({
+  id: z.optional(z.string()),
+  v: z.literal(2),
+
+  name: z.string(),
+  url: z.string(),
+  headers: z.array(GQLHeader),
+  query: z.string(),
+  variables: z.string(),
+
+  auth: HoppGQLAuth
+})
+
+export default defineVersion({
+  initial: false,
+  schema: V2_SCHEMA,
+  up(old: z.infer<typeof V1_SCHEMA>) {
+    return <z.infer<typeof V2_SCHEMA>>{
+      ...old,
+      v: 2,
+      auth: {
+        authActive: true,
+        authType: "none",
+      }
+    }
+  }
+})

packages/hoppscotch-data/src/rest/HoppRESTAuth.ts

@@ -1,43 +0,0 @@
-export type HoppRESTAuthNone = {
-  authType: "none"
-}
-
-export type HoppRESTAuthBasic = {
-  authType: "basic"
-
-  username: string
-  password: string
-}
-
-export type HoppRESTAuthBearer = {
-  authType: "bearer"
-
-  token: string
-}
-
-export type HoppRESTAuthOAuth2 = {
-  authType: "oauth-2"
-
-  token: string
-  oidcDiscoveryURL: string
-  authURL: string
-  accessTokenURL: string
-  clientID: string
-  scope: string
-}
-
-export type HoppRESTAuthAPIKey = {
-  authType: "api-key"
-
-  key: string
-  value: string
-  addTo: string
-}
-
-export type HoppRESTAuth = { authActive: boolean } & (
-  | HoppRESTAuthNone
-  | HoppRESTAuthBasic
-  | HoppRESTAuthBearer
-  | HoppRESTAuthOAuth2
-  | HoppRESTAuthAPIKey
-)

packages/hoppscotch-data/src/rest/content-types.ts

@@ -11,3 +11,5 @@ export const knownContentTypes = {
 }
 
 export type ValidContentTypes = keyof typeof knownContentTypes
+
+export const ValidContentTypesList = Object.keys(knownContentTypes) as ValidContentTypes[]

packages/hoppscotch-data/src/rest/index.ts

@@ -1,66 +1,58 @@
-import cloneDeep from "lodash/cloneDeep"
 import * as Eq from "fp-ts/Eq"
 import * as S from "fp-ts/string"
-import { ValidContentTypes } from "./content-types"
-import { HoppRESTAuth } from "./HoppRESTAuth"
+import cloneDeep from "lodash/cloneDeep"
+import V0_VERSION from "./v/0"
+import V1_VERSION from "./v/1"
+import { createVersionedEntity, InferredEntity } from "verzod"
 import { lodashIsEqualEq, mapThenEq, undefinedEq } from "../utils/eq"
+import {
+  HoppRESTAuth,
+  HoppRESTReqBody,
+  HoppRESTHeaders,
+  HoppRESTParams,
+} from "./v/1"
+import { z } from "zod"
 
 export * from "./content-types"
-export * from "./HoppRESTAuth"
+export {
+  FormDataKeyValue,
+  HoppRESTReqBodyFormData,
+  HoppRESTAuth,
+  HoppRESTAuthAPIKey,
+  HoppRESTAuthBasic,
+  HoppRESTAuthBearer,
+  HoppRESTAuthNone,
+  HoppRESTAuthOAuth2,
+  HoppRESTReqBody,
+} from "./v/1"
 
-export const RESTReqSchemaVersion = "1"
+const versionedObject = z.object({
+  // v is a stringified number
+  v: z.string().regex(/^\d+$/).transform(Number),
+})
 
-export type HoppRESTParam = {
-  key: string
-  value: string
-  active: boolean
-}
+export const HoppRESTRequest = createVersionedEntity({
+  latestVersion: 1,
+  versionMap: {
+    0: V0_VERSION,
+    1: V1_VERSION,
+  },
+  getVersion(data) {
+    // For V1 onwards we have the v string storing the number
+    const versionCheck = versionedObject.safeParse(data)
 
-export type HoppRESTHeader = {
-  key: string
-  value: string
-  active: boolean
-}
+    if (versionCheck.success) return versionCheck.data.v
 
-export type FormDataKeyValue = {
-  key: string
-  active: boolean
-} & ({ isFile: true; value: Blob[] } | { isFile: false; value: string })
+    // For V0 we have to check the schema
+    const result = V0_VERSION.schema.safeParse(data)
 
-export type HoppRESTReqBodyFormData = {
-  contentType: "multipart/form-data"
-  body: FormDataKeyValue[]
-}
+    return result.success ? 0 : null
+  },
+})
 
-export type HoppRESTReqBody =
-  | {
-      contentType: Exclude<ValidContentTypes, "multipart/form-data">
-      body: string
-    }
-  | HoppRESTReqBodyFormData
-  | {
-      contentType: null
-      body: null
-    }
+export type HoppRESTRequest = InferredEntity<typeof HoppRESTRequest>
 
-export interface HoppRESTRequest {
-  v: string
-  id?: string // Firebase Firestore ID
-
-  name: string
-  method: string
-  endpoint: string
-  params: HoppRESTParam[]
-  headers: HoppRESTHeader[]
-  preRequestScript: string
-  testScript: string
-
-  auth: HoppRESTAuth
-
-  body: HoppRESTReqBody
-}
-
-export const HoppRESTRequestEq = Eq.struct<HoppRESTRequest>({
+const HoppRESTRequestEq = Eq.struct<HoppRESTRequest>({
   id: undefinedEq(S.Eq),
   v: S.Eq,
   auth: lodashIsEqualEq,
@@ -80,6 +72,11 @@ export const HoppRESTRequestEq = Eq.struct<HoppRESTRequest>({
   testScript: S.Eq,
 })
 
+export const RESTReqSchemaVersion = "1"
+
+export type HoppRESTParam = HoppRESTRequest["params"][number]
+export type HoppRESTHeader = HoppRESTRequest["headers"][number]
+
 export const isEqualHoppRESTRequest = HoppRESTRequestEq.equals
 
 /**
@@ -87,6 +84,9 @@ export const isEqualHoppRESTRequest = HoppRESTRequestEq.equals
  * If we fail to detect certain bits, we just resolve it to the default value
  * @param x The value to extract REST Request data from
  * @param defaultReq The default REST Request to source from
+ *
+ * @deprecated Usage of this function is no longer recommended and is only here
+ * for legacy reasons and will be removed
  */
 export function safelyExtractRESTRequest(
   x: unknown,
@@ -94,40 +94,53 @@ export function safelyExtractRESTRequest(
 ): HoppRESTRequest {
   const req = cloneDeep(defaultReq)
 
-  // TODO: A cleaner way to do this ?
   if (!!x && typeof x === "object") {
-    if (x.hasOwnProperty("v") && typeof x.v === "string")
-      req.v = x.v
+    if ("id" in x && typeof x.id === "string") req.id = x.id
 
-    if (x.hasOwnProperty("id") && typeof x.id === "string")
-      req.id = x.id
+    if ("name" in x && typeof x.name === "string") req.name = x.name
 
-    if (x.hasOwnProperty("name") && typeof x.name === "string")
-      req.name = x.name
+    if ("method" in x && typeof x.method === "string") req.method = x.method
 
-    if (x.hasOwnProperty("method") && typeof x.method === "string")
-      req.method = x.method
-
-    if (x.hasOwnProperty("endpoint") && typeof x.endpoint === "string")
+    if ("endpoint" in x && typeof x.endpoint === "string")
       req.endpoint = x.endpoint
 
-    if (x.hasOwnProperty("preRequestScript") && typeof x.preRequestScript === "string")
+    if ("preRequestScript" in x && typeof x.preRequestScript === "string")
       req.preRequestScript = x.preRequestScript
 
-    if (x.hasOwnProperty("testScript") && typeof x.testScript === "string")
+    if ("testScript" in x && typeof x.testScript === "string")
       req.testScript = x.testScript
 
-    if (x.hasOwnProperty("body") && typeof x.body === "object" && !!x.body)
-      req.body = x.body as any // TODO: Deep nested checks
+    if ("body" in x) {
+      const result = HoppRESTReqBody.safeParse(x.body)
 
-    if (x.hasOwnProperty("auth") && typeof x.auth === "object" && !!x.auth)
-      req.auth = x.auth as any // TODO: Deep nested checks
+      if (result.success) {
+        req.body = result.data
+      }
+    }
 
-    if (x.hasOwnProperty("params") && Array.isArray(x.params))
-      req.params = x.params // TODO: Deep nested checks
+    if ("auth" in x) {
+      const result = HoppRESTAuth.safeParse(x.auth)
 
-    if (x.hasOwnProperty("headers") && Array.isArray(x.headers))
-      req.headers = x.headers // TODO: Deep nested checks
+      if (result.success) {
+        req.auth = result.data
+      }
+    }
+
+    if ("params" in x) {
+      const result = HoppRESTParams.safeParse(x.params)
+
+      if (result.success) {
+        req.params = result.data
+      }
+    }
+
+    if ("headers" in x) {
+      const result = HoppRESTHeaders.safeParse(x.headers)
+
+      if (result.success) {
+        req.headers = result.data
+      }
+    }
   }
 
   return req
@@ -137,105 +150,51 @@ export function makeRESTRequest(
   x: Omit<HoppRESTRequest, "v">
 ): HoppRESTRequest {
   return {
-    ...x,
     v: RESTReqSchemaVersion,
+    ...x,
   }
 }
 
-export function isHoppRESTRequest(x: any): x is HoppRESTRequest {
-  return x && typeof x === "object" && "v" in x
-}
-
-function parseRequestBody(x: any): HoppRESTReqBody {
-  if (x.contentType === "application/json") {
-    return {
-      contentType: "application/json",
-      body: x.rawParams,
-    }
-  }
-
+export function getDefaultRESTRequest(): HoppRESTRequest {
   return {
-    contentType: "application/json",
-    body: "",
-  }
-}
-
-export function translateToNewRequest(x: any): HoppRESTRequest {
-  if (isHoppRESTRequest(x)) {
-    return x
-  } else {
-    // Old format
-    const endpoint: string = `${x?.url ?? ""}${x?.path ?? ""}`
-
-    const headers: HoppRESTHeader[] = x?.headers ?? []
-
-    // Remove old keys from params
-    const params: HoppRESTParam[] = (x?.params ?? []).map(
-      ({
-        key,
-        value,
-        active,
-      }: {
-        key: string
-        value: string
-        active: boolean
-      }) => ({
-        key,
-        value,
-        active,
-      })
-    )
-
-    const name = x?.name ?? "Untitled request"
-    const method = x?.method ?? ""
-
-    const preRequestScript = x?.preRequestScript ?? ""
-    const testScript = x?.testScript ?? ""
-
-    const body = parseRequestBody(x)
-
-    const auth = parseOldAuth(x)
-
-    const result: HoppRESTRequest = {
-      name,
-      endpoint,
-      headers,
-      params,
-      method,
-      preRequestScript,
-      testScript,
-      body,
-      auth,
-      v: RESTReqSchemaVersion,
-    }
-
-    if (x.id) result.id = x.id
-
-    return result
-  }
-}
-
-export function parseOldAuth(x: any): HoppRESTAuth {
-  if (!x.auth || x.auth === "None")
-    return {
+    v: "1",
+    endpoint: "https://echo.hoppscotch.io",
+    name: "Untitled",
+    params: [],
+    headers: [],
+    method: "GET",
+    auth: {
       authType: "none",
       authActive: true,
-    }
-
-  if (x.auth === "Basic Auth")
-    return {
-      authType: "basic",
-      authActive: true,
-      username: x.httpUser,
-      password: x.httpPassword,
-    }
-
-  if (x.auth === "Bearer Token")
-    return {
-      authType: "bearer",
-      authActive: true,
-      token: x.bearerToken,
-    }
-
-  return { authType: "none", authActive: true }
+    },
+    preRequestScript: "",
+    testScript: "",
+    body: {
+      contentType: null,
+      body: null,
+    },
+  }
+}
+
+/**
+ * Checks if the given value is a HoppRESTRequest
+ * @param x The value to check
+ *
+ * @deprecated This function is no longer recommended and is only here for legacy reasons
+ * Use `HoppRESTRequest.is`/`HoppRESTRequest.isLatest` instead.
+ */
+export function isHoppRESTRequest(x: unknown): x is HoppRESTRequest {
+  return HoppRESTRequest.isLatest(x)
+}
+
+/**
+ * Safely parses a value into a HoppRESTRequest.
+ * @param x The value to check
+ *
+ * @deprecated This function is no longer recommended and is only here for
+ * legacy reasons. Use `HoppRESTRequest.safeParse` instead.
+ */
+export function translateToNewRequest(x: unknown): HoppRESTRequest {
+  const result = HoppRESTRequest.safeParse(x)
+  return result.type === "ok" ? result.value : getDefaultRESTRequest()
 }

packages/hoppscotch-data/src/rest/v/0.ts

@@ -0,0 +1,39 @@
+import { defineVersion } from "verzod"
+import { z } from "zod"
+
+export const V0_SCHEMA = z.object({
+  id: z.optional(z.string()), // Firebase Firestore ID
+
+  url: z.string(),
+  path: z.string(),
+  headers: z.array(
+    z.object({
+      key: z.string(),
+      value: z.string(),
+      active: z.boolean()
+    })
+  ),
+  params: z.array(
+    z.object({
+      key: z.string(),
+      value: z.string(),
+      active: z.boolean()
+    })
+  ),
+  name: z.string(),
+  method: z.string(),
+  preRequestScript: z.string(),
+  testScript: z.string(),
+  contentType: z.string(),
+  body: z.string(),
+  rawParams: z.optional(z.string()),
+  auth: z.optional(z.string()),
+  httpUser: z.optional(z.string()),
+  httpPassword: z.optional(z.string()),
+  bearerToken: z.optional(z.string()),
+})
+
+export default defineVersion({
+  initial: true,
+  schema: V0_SCHEMA
+})

packages/hoppscotch-data/src/rest/v/1.ts

@@ -0,0 +1,209 @@
+import { defineVersion } from "verzod"
+import { z } from "zod"
+
+import { V0_SCHEMA } from "./0"
+
+export const FormDataKeyValue = z.object({
+  key: z.string(),
+  active: z.boolean()
+}).and(
+  z.union([
+    z.object({
+      isFile: z.literal(true),
+      value: z.array(z.instanceof(Blob))
+    }),
+    z.object({
+      isFile: z.literal(false),
+      value: z.string()
+    })
+  ])
+)
+
+export type FormDataKeyValue = z.infer<typeof FormDataKeyValue>
+
+export const HoppRESTReqBodyFormData = z.object({
+  contentType: z.literal("multipart/form-data"),
+  body: z.array(FormDataKeyValue)
+})
+
+export type HoppRESTReqBodyFormData = z.infer<typeof HoppRESTReqBodyFormData>
+
+export const HoppRESTReqBody = z.union([
+  z.object({
+    contentType: z.literal(null),
+    body: z.literal(null)
+  }),
+  z.object({
+    contentType: z.literal("multipart/form-data"),
+    body: FormDataKeyValue
+  }),
+  z.object({
+    contentType: z.union([
+      z.literal("application/json"),
+      z.literal("application/ld+json"),
+      z.literal("application/hal+json"),
+      z.literal("application/vnd.api+json"),
+      z.literal("application/xml"),
+      z.literal("application/x-www-form-urlencoded"),
+      z.literal("text/html"),
+      z.literal("text/plain"),
+    ]),
+    body: z.string()
+  })
+])
+
+export type HoppRESTReqBody = z.infer<typeof HoppRESTReqBody>
+
+export const HoppRESTAuthNone = z.object({
+  authType: z.literal("none")
+})
+
+export type HoppRESTAuthNone = z.infer<typeof HoppRESTAuthNone>
+
+export const HoppRESTAuthBasic = z.object({
+  authType: z.literal("basic"),
+  username: z.string(),
+  password: z.string(),
+})
+
+export type HoppRESTAuthBasic = z.infer<typeof HoppRESTAuthBasic>
+
+export const HoppRESTAuthBearer = z.object({
+  authType: z.literal("bearer"),
+  token: z.string(),
+})
+
+export type HoppRESTAuthBearer = z.infer<typeof HoppRESTAuthBearer>
+
+export const HoppRESTAuthOAuth2 = z.object({
+  authType: z.literal("oauth-2"),
+  token: z.string(),
+  oidcDiscoveryURL: z.string(),
+  authURL: z.string(),
+  accessTokenURL: z.string(),
+  clientID: z.string(),
+  scope: z.string(),
+})
+
+export type HoppRESTAuthOAuth2 = z.infer<typeof HoppRESTAuthOAuth2>
+
+export const HoppRESTAuthAPIKey = z.object({
+  authType: z.literal("api-key"),
+  key: z.string(),
+  value: z.string(),
+  addTo: z.string(),
+})
+
+export type HoppRESTAuthAPIKey = z.infer<typeof HoppRESTAuthAPIKey>
+
+export const HoppRESTAuth = z.discriminatedUnion("authType", [
+  HoppRESTAuthNone,
+  HoppRESTAuthBasic,
+  HoppRESTAuthBearer,
+  HoppRESTAuthOAuth2,
+  HoppRESTAuthAPIKey
+]).and(
+  z.object({
+    authActive: z.boolean(),
+  })
+)
+
+export type HoppRESTAuth = z.infer<typeof HoppRESTAuth>
+
+export const HoppRESTParams = z.array(
+  z.object({
+    key: z.string(),
+    value: z.string(),
+    active: z.boolean()
+  })
+)
+
+export type HoppRESTParams = z.infer<typeof HoppRESTParams>
+
+export const HoppRESTHeaders = z.array(
+  z.object({
+    key: z.string(),
+    value: z.string(),
+    active: z.boolean()
+  })
+)
+
+export type HoppRESTHeaders = z.infer<typeof HoppRESTHeaders>
+
+const V1_SCHEMA = z.object({
+  v: z.literal("1"),
+  id: z.optional(z.string()), // Firebase Firestore ID
+
+  name: z.string(),
+  method: z.string(),
+  endpoint: z.string(),
+  params: HoppRESTParams,
+  headers: HoppRESTHeaders,
+  preRequestScript: z.string(),
+  testScript: z.string(),
+
+  auth: HoppRESTAuth,
+
+  body: HoppRESTReqBody
+})
+
+function parseRequestBody(x: z.infer<typeof V0_SCHEMA>): z.infer<typeof V1_SCHEMA>["body"] {
+  return {
+    contentType: "application/json",
+    body: x.contentType === "application/json" ? x.rawParams ?? "" : "",
+  }
+}
+
+export function parseOldAuth(x: z.infer<typeof V0_SCHEMA>): z.infer<typeof V1_SCHEMA>["auth"] {
+  if (!x.auth || x.auth === "None")
+    return {
+      authType: "none",
+      authActive: true,
+    }
+
+  if (x.auth === "Basic Auth")
+    return {
+      authType: "basic",
+      authActive: true,
+      username: x.httpUser ?? "",
+      password: x.httpPassword ?? "",
+    }
+
+  if (x.auth === "Bearer Token")
+    return {
+      authType: "bearer",
+      authActive: true,
+      token: x.bearerToken ?? "",
+    }
+
+  return { authType: "none", authActive: true }
+}
+
+export default defineVersion({
+  initial: false,
+  schema: V1_SCHEMA,
+  up(old: z.infer<typeof V0_SCHEMA>) {
+    const { url, path, headers, params, name, method, preRequestScript, testScript } = old
+
+    const endpoint = `${url}${path}`
+    const body = parseRequestBody(old)
+    const auth = parseOldAuth(old)
+
+    const result: z.infer<typeof V1_SCHEMA> = {
+      v: "1",
+      endpoint,
+      headers,
+      params,
+      name,
+      method,
+      preRequestScript,
+      testScript,
+      body,
+      auth,
+    }
+
+    if (old.id) result.id = old.id
+
+    return result
+  },
+})

packages/hoppscotch-data/tsconfig.decl.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "target": "es2017",
     "module": "esnext",
-    "lib": ["esnext"],
+    "lib": ["esnext", "DOM"],
     "moduleResolution": "node",
     "esModuleInterop": true,
     "strict": true,

packages/hoppscotch-data/tsconfig.json

@@ -2,13 +2,13 @@
   "compilerOptions": {
     "target": "es2017",
     "module": "esnext",
-    "lib": ["esnext"],
+    "lib": ["esnext", "DOM"],
     "moduleResolution": "node",
     "esModuleInterop": true,
     "strict": true,
     "strictNullChecks": true,
     "skipLibCheck": true,
-    "resolveJsonModule": true,
+    "resolveJsonModule": true
   },
   "include": ["src/*.ts"]
 }

packages/hoppscotch-js-sandbox/jest.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   preset: "ts-jest",
-  testEnvironment: "node",
+  testEnvironment: "jsdom",
   collectCoverage: true,
   setupFilesAfterEnv: ["./jest.setup.ts"],
 }

packages/hoppscotch-selfhost-web/src/main.ts

@@ -38,5 +38,6 @@ createHoppApp("#app", {
   ],
   platformFeatureFlags: {
     exportAsGIST: false,
+    hasTelemetry: false,
   },
 })

packages/hoppscotch-selfhost-web/vite.config.ts

@@ -147,6 +147,7 @@ export default defineConfig({
       },
     }),
     VitePWA({
+      useCredentials: true,
       manifest: {
         name: APP_INFO.name,
         short_name: APP_INFO.name,

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'];
-    AppLogin: typeof import('./components/app/Login.vue')['default'];
-    AppLogout: typeof import('./components/app/Logout.vue')['default'];
-    AppModal: typeof import('./components/app/Modal.vue')['default'];
-    AppSidebar: typeof import('./components/app/Sidebar.vue')['default'];
-    AppToast: typeof import('./components/app/Toast.vue')['default'];
-    DashboardMetricsCard: typeof import('./components/dashboard/MetricsCard.vue')['default'];
-    HoppButtonPrimary: typeof import('@hoppscotch/ui')['HoppButtonPrimary'];
-    HoppButtonSecondary: typeof import('@hoppscotch/ui')['HoppButtonSecondary'];
-    HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor'];
-    HoppSmartAutoComplete: typeof import('@hoppscotch/ui')['HoppSmartAutoComplete'];
-    HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal'];
-    HoppSmartInput: typeof import('@hoppscotch/ui')['HoppSmartInput'];
-    HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem'];
-    HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal'];
-    HoppSmartPicture: typeof import('@hoppscotch/ui')['HoppSmartPicture'];
-    HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner'];
-    IconLucideChevronDown: typeof import('~icons/lucide/chevron-down')['default'];
-    IconLucideInbox: typeof import('~icons/lucide/inbox')['default'];
-    TeamsAdd: typeof import('./components/teams/Add.vue')['default'];
-    TeamsDetails: typeof import('./components/teams/Details.vue')['default'];
-    TeamsInvite: typeof import('./components/teams/Invite.vue')['default'];
-    TeamsMembers: typeof import('./components/teams/Members.vue')['default'];
-    TeamsPendingInvites: typeof import('./components/teams/PendingInvites.vue')['default'];
-    TeamsTable: typeof import('./components/teams/Table.vue')['default'];
-    Tippy: typeof import('vue-tippy')['Tippy'];
-    UsersInviteModal: typeof import('./components/users/InviteModal.vue')['default'];
-    UsersTable: typeof import('./components/users/Table.vue')['default'];
+    AppHeader: typeof import('./components/app/Header.vue')['default']
+    AppLogin: typeof import('./components/app/Login.vue')['default']
+    AppLogout: typeof import('./components/app/Logout.vue')['default']
+    AppModal: typeof import('./components/app/Modal.vue')['default']
+    AppSidebar: typeof import('./components/app/Sidebar.vue')['default']
+    AppToast: typeof import('./components/app/Toast.vue')['default']
+    DashboardMetricsCard: typeof import('./components/dashboard/MetricsCard.vue')['default']
+    HoppButtonPrimary: typeof import('@hoppscotch/ui')['HoppButtonPrimary']
+    HoppButtonSecondary: typeof import('@hoppscotch/ui')['HoppButtonSecondary']
+    HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor']
+    HoppSmartAutoComplete: typeof import('@hoppscotch/ui')['HoppSmartAutoComplete']
+    HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal']
+    HoppSmartInput: typeof import('@hoppscotch/ui')['HoppSmartInput']
+    HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem']
+    HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal']
+    HoppSmartPicture: typeof import('@hoppscotch/ui')['HoppSmartPicture']
+    HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner']
+    IconLucideChevronDown: typeof import('~icons/lucide/chevron-down')['default']
+    IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
+    TeamsAdd: typeof import('./components/teams/Add.vue')['default']
+    TeamsDetails: typeof import('./components/teams/Details.vue')['default']
+    TeamsInvite: typeof import('./components/teams/Invite.vue')['default']
+    TeamsMembers: typeof import('./components/teams/Members.vue')['default']
+    TeamsPendingInvites: typeof import('./components/teams/PendingInvites.vue')['default']
+    TeamsTable: typeof import('./components/teams/Table.vue')['default']
+    Tippy: typeof import('vue-tippy')['Tippy']
+    UsersInviteModal: typeof import('./components/users/InviteModal.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.getProbableUser()
+  auth.getCurrentUserStream(),
+  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);
-    /*
-    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')}`);
+    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);
-    /*
-    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')}`);
+    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);
-    /*
-    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')}`);
+    toast.error(t('state.microsoft_signin_failure'));
   }
 
   signingInWithMicrosoft.value = false;
-}
-async function signInWithEmail() {
-  signingInWithEmail.value = true;
+};
 
-  await auth
-    .signInWithEmail(form.value.email)
-    .then(() => {
-      mode.value = 'email-sent';
-      setLocalConfig('emailForSignIn', form.value.email);
-    })
-    .catch((e: any) => {
-      console.error(e);
-      toast.error(e.message);
-      signingInWithEmail.value = false;
-    })
-    .finally(() => {
-      signingInWithEmail.value = false;
-    });
-}
+const signInWithEmail = async () => {
+  signingInWithEmail.value = true;
+  try {
+    await auth.signInWithEmail(form.value.email);
+    mode.value = 'email-sent';
+    setLocalConfig('emailForSignIn', form.value.email);
+  } catch (e) {
+    console.error(e);
+    toast.error(t('state.email_signin_failure'));
+  }
+  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() {
-  await axios.get(`${import.meta.env.VITE_BACKEND_API_URL}/auth/logout`, {
-    withCredentials: true,
-  });
-}
+const currentUser$ = new BehaviorSubject<HoppUser | null>(null);
 
 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() {
-  window.location.href = `${
-    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,
-    }
-  );
-
+const getInitialUserDetails = async () => {
+  const res = await authQuery.getUserDetails();
   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 && 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 {
+    if (error.message === COOKIES_NOT_FOUND) {
       setUser(null);
-      await signOut(true);
-      isGettingInitialUser.value = false;
+    } else if (error.message === UNAUTHORIZED) {
+      const isRefreshSuccess = await refreshToken();
+
+      if (isRefreshSuccess) {
+        setInitialUser();
+      } else {
+        setUser(null);
+        signOut(true);
+      }
     }
-
-    return;
-  }
-
-  // no errors, we have a valid user
-  if (res.data && res.data.me) {
-    const hoppBackendUser = res.data.me;
+  } else if (res.data?.me) {
+    const { uid, displayName, email, photoURL, isAdmin } = res.data.me;
 
     const hoppUser: HoppUser = {
-      uid: hoppBackendUser.uid,
-      displayName: hoppBackendUser.displayName,
-      email: hoppBackendUser.email,
-      photoURL: hoppBackendUser.photoURL,
-      // all our signin methods currently guarantees the email is verified
+      uid,
+      displayName,
+      email,
+      photoURL,
       emailVerified: true,
-      isAdmin: hoppBackendUser.isAdmin,
+      isAdmin,
     };
 
     if (!hoppUser.isAdmin) {
-      const isAdmin = await elevateUser();
-      hoppUser.isAdmin = isAdmin;
+      hoppUser.isAdmin = await elevateUser();
     }
 
     setUser(hoppUser);
 
-    isGettingInitialUser.value = false;
-
     authEvents$.next({
       event: 'login',
       user: hoppUser,
     });
-
-    return;
   }
-}
+
+  isGettingInitialUser.value = false;
+};
 
 const refreshToken = async () => {
   try {
-    const res = await axios.get(
-      `${import.meta.env.VITE_BACKEND_API_URL}/auth/refresh`,
-      {
-        withCredentials: true,
-      }
-    );
+    const res = await authQuery.refreshToken();
     authEvents$.next({
       event: 'token_refresh',
     });
@@ -223,157 +136,67 @@ const refreshToken = async () => {
   }
 };
 
-async function elevateUser() {
-  const res = await axios.get(
-    `${import.meta.env.VITE_BACKEND_API_URL}/auth/verify/admin`,
-    {
-      withCredentials: true,
-    }
-  );
+const elevateUser = async () => {
+  const res = await authQuery.elevateUser();
+  return Boolean(res.data?.isAdmin);
+};
 
-  return !!res.data?.isAdmin;
-}
-
-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 {
+const sendMagicLink = async (email: string) => {
+  const res = await authQuery.sendMagicLink(email);
+  if (!res.data?.deviceIdentifier) {
     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() {
-    return {};
-  },
-  getGQLClientOptions() {
-    return {
-      fetchOptions: {
-        credentials: 'include',
-      },
-    };
+  performAuthInit: () => {
+    const currentUser = JSON.parse(getLocalConfig('login_state') ?? 'null');
+    currentUser$.next(currentUser);
+    return setInitialUser();
   },
 
-  /**
-   * 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();
-      }
-    });
-  },
+  signInWithEmail: (email: string) => sendMagicLink(email),
 
-  /**
-   * 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) {
+  isSignInWithEmailLink: (url: string) => {
     const urlObject = new URL(url);
     const searchParams = new URLSearchParams(urlObject.search);
-
-    return !!searchParams.get('token');
+    return Boolean(searchParams.get('token'));
   },
 
-  async verifyEmailAddress() {
-    return;
+  signInUserWithGoogle: () => {
+    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();
-    return undefined;
+
+  signInUserWithMicrosoft: () => {
+    window.location.href = `${
+      import.meta.env.VITE_BACKEND_API_URL
+    }/auth/microsoft?redirect_uri=${import.meta.env.VITE_ADMIN_URL}`;
   },
-  async signInUserWithMicrosoft() {
-    await signInUserWithMicrosoftFB();
-  },
-  async signInWithEmailLink(email: string, url: string) {
+
+  signInWithEmailLink: (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(
-      `${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;
+    return authQuery.signInWithEmailLink(token, deviceIdentifier);
   },
 
-  async performAuthRefresh() {
+  performAuthRefresh: async () => {
     const isRefreshSuccess = await refreshToken();
 
     if (isRefreshSuccess) {
@@ -386,12 +209,10 @@ export const auth = {
     }
   },
 
-  async signOutUser(reloadWindow = false) {
-    await signOut(reloadWindow);
-  },
+  signOutUser: (reloadWindow = false) => signOut(reloadWindow),
 
-  async processMagicLink() {
-    if (this.isSignInWithEmailLink(window.location.href)) {
+  processMagicLink: async () => {
+    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(() => {
-  auth.performAuthInit();
+onBeforeMount(async () => {
+  await auth.performAuthInit();
 });
 
 onMounted(async () => {

packages/hoppscotch-ui/package.json

@@ -21,7 +21,6 @@
     "@fontsource-variable/material-symbols-rounded": "^5.0.5",
     "@fontsource-variable/roboto-mono": "^5.0.6",
     "@hoppscotch/vue-toasted": "^0.1.0",
-    "@lezer/highlight": "^1.0.0",
     "@vitejs/plugin-legacy": "^2.3.0",
     "@vueuse/core": "^8.7.5",
     "fp-ts": "^2.12.1",
@@ -81,4 +80,4 @@
     "./style.css": "./dist/style.css"
   },
   "types": "./dist/index.d.ts"
-}
+}