Add support for Bearer tokens in the fpx worker proxy (#439)

fiberplane · Jan 17, 2025 · b6a05c8 · b6a05c8
1 parent 7aaa7cd
commit b6a05c8
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 1 deletion.
diff --git a/api/src/routes/traces.ts b/api/src/routes/traces.ts
@@ -75,8 +75,15 @@ app.get("/v1/traces/:traceId/spans", async (ctx) => {
 
   const fpxWorker = await getSetting(db, "fpxWorkerProxy");
   if (fpxWorker?.enabled && fpxWorker.baseUrl) {
+    const headers: Record<string, string> = fpxWorker.bearerToken
+      ? { Authorization: `Bearer ${fpxWorker.bearerToken}` }
+      : {};
+
     const response = await fetch(
       `${fpxWorker.baseUrl}/v1/traces/${traceId}/spans`,
+      {
+        headers,
+      },
     );
     const json = await response.json();
     return ctx.json(json as JSON);
@@ -114,9 +121,14 @@ app.post("/v1/traces", async (ctx) => {
 
   const fpxWorker = await getSetting(db, "fpxWorkerProxy");
   if (fpxWorker?.enabled && fpxWorker.baseUrl) {
+    const headers: Record<string, string> = fpxWorker.bearerToken
+      ? { Authorization: `Bearer ${fpxWorker.bearerToken}` }
+      : {};
+
     const response = await fetch(`${fpxWorker.baseUrl}/v1/traces`, {
       headers: {
         "Content-Type": "application/json",
+        ...headers,
       },
       method: "POST",
       body: JSON.stringify(body),

diff --git a/packages/types/src/settings.ts b/packages/types/src/settings.ts
@@ -124,6 +124,7 @@ export const SettingsSchema = z.object({
       // Fix from:
       // https://github.com/colinhacks/zod/discussions/1254#discussioncomment-3123225
       baseUrl: z.union([z.literal(""), z.string().trim().url()]).optional(),
+      bearerToken: z.string().optional(),
     })
     .optional(),
   openApiSpecUrl: z.string().optional(),

diff --git a/studio/src/pages/SettingsPage/FpxWorkerProxySettingsForm.tsx b/studio/src/pages/SettingsPage/FpxWorkerProxySettingsForm.tsx
@@ -19,7 +19,8 @@ export function FpxWorkerProxySettingsForm({
   const { form, onSubmit } = useSettingsForm(settings);
   const isDirty =
     (form.formState.dirtyFields.fpxWorkerProxy?.enabled ||
-      form.formState.dirtyFields.fpxWorkerProxy?.baseUrl) ??
+      form.formState.dirtyFields.fpxWorkerProxy?.baseUrl ||
+      form.formState.dirtyFields.fpxWorkerProxy?.bearerToken) ??
     false;
 
   return (
@@ -86,6 +87,31 @@ export function FpxWorkerProxySettingsForm({
                       )}
                     />
                   )}
+                  {field.value && (
+                    <FormField
+                      control={form.control}
+                      name="fpxWorkerProxy.bearerToken"
+                      render={({ field }) => (
+                        <div className="flex flex-col gap-1">
+                          <FormLabel className="block font-normal text-sm text-gray-300">
+                            Bearer token
+                          </FormLabel>
+                          <FormDescription className="mb-1">
+                            Configure the authorization token that will be used
+                            in the Authorization header when making requests to
+                            the Cloudflare Worker Trace Ingestion service.
+                          </FormDescription>
+                          <FormControl>
+                            <Input
+                              placeholder={field.value ?? ""}
+                              value={field.value ?? ""}
+                              onChange={field.onChange}
+                            />
+                          </FormControl>
+                        </div>
+                      )}
+                    />
+                  )}
                 </FormItem>
               )}
             />