feat: auth for socket.io-[INS-1270] (#9066)

* feat: auth for socket.io

* fix: type check

* fix: ts issue

* feat: add auth indicator

Author: CurryYangxx

packages/insomnia-scripting-environment/src/objects/auth.ts

@@ -805,6 +805,10 @@ export function toPreRequestAuth(auth: RequestAuthentication | {}): AuthOptions
       // TODO: not supported yet
       throw new Error('netrc auth is not supported in scripting yet');
     }
+    case 'singleToken': {
+      // TODO: not supported yet
+      throw new Error('singleToken auth is not supported in scripting yet');
+    }
     default: {
       // @ts-expect-error - user can input any string
       throw new Error(`unknown auth type: ${auth.type}`);

packages/insomnia/src/common/constants.ts

@@ -294,7 +294,8 @@ export type AuthTypes =
   | 'hawk'
   | 'iam'
   | 'netrc'
-  | 'asap';
+  | 'asap'
+  | 'singleToken';
 
 export const HAWK_ALGORITHM_SHA256 = 'sha256';
 export const HAWK_ALGORITHM_SHA1 = 'sha1';

packages/insomnia/src/common/import-v5-parser.ts

@@ -248,6 +248,12 @@ const NoneAuthenticationSchema = z.object({
   disabled: z.boolean().optional(),
 });
 
+const SingleTokenAuthenticationSchema = z.object({
+  type: z.literal('singleToken'),
+  disabled: z.boolean().optional(),
+  token: z.string().optional(),
+});
+
 const AuthenticationSchema = z.union([
   z.discriminatedUnion('type', [
     BasicAuthenticationSchema,
@@ -262,6 +268,7 @@ const AuthenticationSchema = z.union([
     NetrcAuthenticationSchema,
     ASAPAuthenticationSchema,
     NoneAuthenticationSchema,
+    SingleTokenAuthenticationSchema,
   ]),
   z.object({}),
 ]);

packages/insomnia/src/main/network/socket-io.ts

@@ -13,7 +13,7 @@ import { generateId } from '../../common/misc';
 import * as models from '../../models';
 import { socketIORequest } from '../../models';
 import type { CookieJar } from '../../models/cookie-jar';
-import { type RequestHeader } from '../../models/request';
+import { type RequestAuthentication, type RequestHeader } from '../../models/request';
 import type { BaseSocketIORequest } from '../../models/socket-io-request';
 import type { SocketIOResponse } from '../../models/socket-io-response.ts';
 import { filterClientCertificates } from '../../network/certificate';
@@ -99,6 +99,7 @@ interface OpenSocketIORequestOptions {
   url: string;
   query: Record<string, string>;
   headers: RequestHeader[];
+  authentication: RequestAuthentication;
   cookieJar: CookieJar;
   initialPayload?: string;
 }
@@ -272,6 +273,12 @@ const openSocketIOConnection = async (
       socketIOoptions.key = pemCertificateKeys.join('\n');
     }
 
+    if (options.authentication && options.authentication.type === 'singleToken' && !options.authentication.disabled) {
+      socketIOoptions.auth = {
+        token: options.authentication.token || '',
+      };
+    }
+
     const socket = SocketIOClient(url, socketIOoptions);
     SocketIOConnections.set(options.requestId, socket);
     const openedEvents = request.eventListeners.filter(event => event.isOpen && event.eventName);

packages/insomnia/src/models/request.ts

@@ -128,6 +128,13 @@ export interface AuthTypeNone {
   type: 'none';
   disabled?: boolean;
 }
+
+export interface AuthTypeSingleToken {
+  type: 'singleToken';
+  token?: string;
+  disabled?: boolean;
+}
+
 export type RequestAuthentication =
   | AuthTypeOAuth2
   | AuthTypeBasic
@@ -140,7 +147,8 @@ export type RequestAuthentication =
   | AuthTypeAsap
   | AuthTypeNone
   | AuthTypeAPIKey
-  | AuthTypeNTLM;
+  | AuthTypeNTLM
+  | AuthTypeSingleToken;
 
 export type OAuth2ResponseType = 'code' | 'id_token' | 'id_token token' | 'none' | 'token';
 

packages/insomnia/src/routes/organization.$organizationId.project.$projectId.workspace.$workspaceId.debug.request.$requestId.connect.tsx

@@ -87,6 +87,7 @@ export async function clientAction({ params, request }: Route.ClientActionArgs)
       url: rendered.url,
       headers: rendered.headers,
       cookieJar: rendered.cookieJar,
+      authentication: rendered.authentication,
       query: rendered.query || {},
     });
   }

packages/insomnia/src/ui/components/dropdowns/auth-dropdown.tsx

@@ -144,9 +144,15 @@ interface Props {
   authentication?: RequestAuthentication | {};
   authTypes?: AuthTypes[];
   disabled?: boolean;
+  hideOthers?: boolean;
 }
 
-export const AuthDropdown: FC<Props> = ({ authentication, authTypes = defaultTypes, disabled = false }) => {
+export const AuthDropdown: FC<Props> = ({
+  authentication,
+  authTypes = defaultTypes,
+  disabled = false,
+  hideOthers = false,
+}) => {
   const { requestId, requestGroupId } = useParams() as {
     organizationId: string;
     projectId: string;
@@ -220,39 +226,49 @@ export const AuthDropdown: FC<Props> = ({ authentication, authTypes = defaultTyp
       id: 'netrc',
       name: 'Netrc',
     },
+    {
+      id: 'singleToken',
+      name: 'token',
+    },
   ];
 
-  const authTypeSections: {
+  interface Section {
     id: string;
     icon: IconName;
     name: string;
     items: {
       id: AuthTypes | 'inherit';
       name: string;
     }[];
-  }[] = [
-    {
-      id: 'Other',
-      name: 'Other',
-      icon: 'ellipsis-h',
-      items: [
-        {
-          id: 'inherit',
-          name: 'Inherit from parent',
-        },
+  }
+
+  const commonSections: Section = {
+    id: 'Auth Types',
+    name: 'Auth Types',
+    icon: 'lock',
+    items: authTypesItems.filter(item => authTypes.includes(item.id)),
+  };
+
+  const authTypeSections: Section[] = hideOthers
+    ? [commonSections]
+    : [
         {
-          id: 'none',
-          name: 'None',
+          id: 'Other',
+          name: 'Other',
+          icon: 'ellipsis-h',
+          items: [
+            {
+              id: 'inherit',
+              name: 'Inherit from parent',
+            },
+            {
+              id: 'none',
+              name: 'None',
+            },
+          ],
         },
-      ],
-    },
-    {
-      id: 'Auth Types',
-      name: 'Auth Types',
-      icon: 'lock',
-      items: authTypesItems.filter(item => authTypes.includes(item.id)),
-    },
-  ];
+        commonSections,
+      ];
 
   return (
     <Select
@@ -272,7 +288,7 @@ export const AuthDropdown: FC<Props> = ({ authentication, authTypes = defaultTyp
         </SelectValue>
         <Icon icon="caret-down" />
       </Button>
-      <Popover className="flex min-w-max flex-col overflow-y-hidden">
+      <Popover className="flex min-w-[17ch] flex-col overflow-y-hidden">
         <ListBox
           items={authTypeSections}
           className="min-w-max select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] py-2 text-sm shadow-lg focus:outline-none"

packages/insomnia/src/ui/components/editors/auth/auth-wrapper.tsx

@@ -2,6 +2,7 @@ import React, { type FC, type ReactNode } from 'react';
 import { Toolbar } from 'react-aria-components';
 
 import type { AuthTypes } from '~/common/constants';
+import { SingleTokenAuth } from '~/ui/components/editors/auth/single-token-auth';
 
 import type { RequestAuthentication } from '../../../../models/request';
 import { getAuthObjectOrNull } from '../../../../network/authentication';
@@ -22,7 +23,8 @@ export const AuthWrapper: FC<{
   authentication?: RequestAuthentication | {};
   disabled?: boolean;
   authTypes?: AuthTypes[];
-}> = ({ authentication, disabled = false, authTypes }) => {
+  hideOthers?: boolean;
+}> = ({ authentication, disabled = false, authTypes, hideOthers }) => {
   const type = getAuthObjectOrNull(authentication)?.type || '';
   let authBody: ReactNode = null;
 
@@ -48,6 +50,8 @@ export const AuthWrapper: FC<{
     authBody = <NetrcAuth />;
   } else if (type === 'asap') {
     authBody = <AsapAuth />;
+  } else if (type === 'singleToken') {
+    authBody = <SingleTokenAuth disabled={disabled} />;
   } else {
     authBody = (
       <div className="flex h-full w-full select-none items-center justify-center">
@@ -70,7 +74,7 @@ export const AuthWrapper: FC<{
   return (
     <>
       <Toolbar className="flex h-[--line-height-sm] w-full flex-shrink-0 items-center border-b border-solid border-[--hl-md] px-2">
-        <AuthDropdown authentication={authentication} authTypes={authTypes} />
+        <AuthDropdown authentication={authentication} authTypes={authTypes} hideOthers={hideOthers} />
       </Toolbar>
       <div className="flex-1 overflow-y-auto">{authBody}</div>
     </>

packages/insomnia/src/ui/components/editors/auth/single-token-auth.tsx

@@ -0,0 +1,12 @@
+import React, { type FC } from 'react';
+
+import { AuthInputRow } from './components/auth-input-row';
+import { AuthTableBody } from './components/auth-table-body';
+import { AuthToggleRow } from './components/auth-toggle-row';
+
+export const SingleTokenAuth: FC<{ disabled?: boolean }> = ({ disabled = false }) => (
+  <AuthTableBody>
+    <AuthToggleRow label="Enabled" property="disabled" invert disabled={disabled} />
+    <AuthInputRow label="Token" property="token" mask disabled={disabled} />
+  </AuthTableBody>
+);

packages/insomnia/src/ui/components/socket-io/request-pane.tsx

@@ -4,9 +4,11 @@ import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
 import { useParams } from 'react-router';
 import * as reactUse from 'react-use';
 
+import { getAuthObjectOrNull } from '~/network/authentication';
 import { useRootLoaderData } from '~/root';
 import { useWorkspaceLoaderData } from '~/routes/organization.$organizationId.project.$projectId.workspace.$workspaceId';
 import { OneLineEditor } from '~/ui/components/.client/codemirror/one-line-editor';
+import { AuthWrapper } from '~/ui/components/editors/auth/auth-wrapper';
 
 import type { Environment } from '../../../models/environment';
 import { getCombinedPathParametersFromUrl, type RequestPathParameter } from '../../../models/request';
@@ -105,6 +107,9 @@ export const SocketIORequestPane: FC<Props> = ({ environment }) => {
   const disabled = readyState;
   const eventsCount = activeRequest?.eventListeners?.length || 0;
 
+  const requestAuth = getAuthObjectOrNull(activeRequest.authentication);
+  const isAuthEnable = requestAuth?.type === 'singleToken' && !requestAuth.disabled;
+
   return (
     <Pane type="request">
       <header className="pane__header theme--pane__header !items-stretch">
@@ -153,6 +158,17 @@ export const SocketIORequestPane: FC<Props> = ({ environment }) => {
               </span>
             )}
           </Tab>
+          <Tab
+            className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+            id="auth"
+          >
+            <span>Auth</span>
+            {isAuthEnable && (
+              <span className="flex h-6 min-w-6 items-center justify-center rounded-lg border border-solid border-[--hl] p-1 text-xs">
+                <span className="h-2 w-2 rounded-full bg-green-500" />
+              </span>
+            )}
+          </Tab>
           <Tab
             className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
             id="headers"
@@ -280,6 +296,15 @@ export const SocketIORequestPane: FC<Props> = ({ environment }) => {
         <TabPanel className="w-full flex-1 overflow-y-auto" id="events">
           <SocketIOEventTabPane request={activeRequest} eventListeners={activeRequest.eventListeners} />
         </TabPanel>
+        <TabPanel className="w-full flex-1 overflow-y-auto" id="auth">
+          <AuthWrapper
+            key={uniqueKey}
+            authentication={activeRequest.authentication}
+            disabled={readyState}
+            authTypes={['singleToken']}
+            hideOthers
+          />
+        </TabPanel>
         <TabPanel className="w-full flex-1 overflow-y-auto" id="headers">
           {disabled && <PaneReadOnlyBanner />}
           <RequestHeadersEditor