[Plugins] [Auth] [JWT] Add addtional JWT headers input (#247)

Co-authored-by: Gregory Schier <gschier1990@gmail.com>

plugins/auth-jwt/README.md

@@ -30,8 +30,9 @@ A JWT consists of three parts separated by dots:
 
 1. Configure the request, folder, or workspace to use JWT Authentication
 2. Set up your signing algorithm and secret/key
-3. Configure the required claims for your JWT
-4. The plugin will generate, sign, and include the JWT in your requests
+3. Add custom JWT header fields if needed
+4. Configure the required claims for your JWT payload
+5. The plugin will generate, sign, and include the JWT in your requests
 
 ## Common Use Cases
 

plugins/auth-jwt/src/index.ts

@@ -46,69 +46,98 @@ export const plugin: PluginDefinition = {
         name: 'secretBase64',
         label: 'Secret is base64 encoded',
       },
-      {
-        type: 'select',
-        name: 'location',
-        label: 'Behavior',
-        defaultValue: 'header',
-        options: [
-          { label: 'Insert Header', value: 'header' },
-          { label: 'Append Query Parameter', value: 'query' },
-        ],
-      },
-      {
-        type: 'text',
-        name: 'name',
-        label: 'Header Name',
-        defaultValue: 'Authorization',
-        optional: true,
-        dynamic(_ctx, args) {
-          if (args.values.location === 'query') {
-            return {
-              label: 'Parameter Name',
-              description: 'The name of the query parameter to add to the request',
-            };
-          }
-          return {
-            label: 'Header Name',
-            description: 'The name of the header to add to the request',
-          };
-        },
-      },
-      {
-        type: 'text',
-        name: 'headerPrefix',
-        label: 'Header Prefix',
-        optional: true,
-        defaultValue: 'Bearer',
-        dynamic(_ctx, args) {
-          if (args.values.location === 'query') {
-            return {
-              hidden: true,
-            };
-          }
-        },
-      },
       {
         type: 'editor',
         name: 'payload',
-        label: 'Payload',
+        label: 'JWT Payload',
         language: 'json',
         defaultValue: '{\n  "foo": "bar"\n}',
         placeholder: '{ }',
       },
+      {
+        type: 'accordion',
+        label: 'Advanced',
+        inputs: [
+          {
+            type: 'editor',
+            name: 'headers',
+            label: 'JWT Header',
+            description: 'Merged with auto-generated header fields like alg (e.g., kid)',
+            language: 'json',
+            defaultValue: '{}',
+            placeholder: '{ }',
+            optional: true,
+          },
+          {
+            type: 'select',
+            name: 'location',
+            label: 'Behavior',
+            defaultValue: 'header',
+            options: [
+              { label: 'Insert Header', value: 'header' },
+              { label: 'Append Query Parameter', value: 'query' },
+            ],
+          },
+          {
+            type: 'h_stack',
+            inputs: [
+              {
+                type: 'text',
+                name: 'name',
+                label: 'Header Name',
+                defaultValue: 'Authorization',
+                optional: true,
+                description: 'The name of the header to add to the request',
+              },
+              {
+                type: 'text',
+                name: 'headerPrefix',
+                label: 'Header Prefix',
+                optional: true,
+                defaultValue: 'Bearer',
+              },
+            ],
+            dynamic(_ctx, args) {
+              if (args.values.location === 'query') {
+                return {
+                  hidden: true,
+                };
+              }
+            },
+          },
+          {
+            type: 'text',
+            name: 'name',
+            label: 'Parameter Name',
+            description: 'The name of the query parameter to add to the request',
+            defaultValue: 'token',
+            optional: true,
+            dynamic(_ctx, args) {
+              if (args.values.location !== 'query') {
+                return {
+                  hidden: true,
+                };
+              }
+            },
+          },
+        ],
+      },
     ],
     async onApply(_ctx, { values }) {
-      const { algorithm, secret: _secret, secretBase64, payload } = values;
+      const { algorithm, secret: _secret, secretBase64, payload, headers } = values;
       const secret = secretBase64 ? Buffer.from(`${_secret}`, 'base64') : `${_secret}`;
+
+      const parsedHeaders = headers ? JSON.parse(`${headers}`) : undefined;
+
       const token = jwt.sign(`${payload}`, secret, {
         algorithm: algorithm as (typeof algorithms)[number],
+        // Extra header fields are merged with the auto-generated header (which includes alg)
+        header: parsedHeaders as jwt.JwtHeader | undefined,
       });
 
       if (values.location === 'query') {
         const paramName = String(values.name || 'token');
-        const paramValue = String(values.value || '');
-        return { setQueryParameters: [{ name: paramName, value: paramValue }] };
+        return { setQueryParameters: [{ name: paramName, value: token }] };
       }
       const headerPrefix = values.headerPrefix != null ? values.headerPrefix : 'Bearer';
       const headerName = String(values.name || 'Authorization');