#Passing Authentication (JWT Token) from the Copilot Runtime to Agent (LangGraph).

1 messages · Page 1 of 1 (latest)

tidal iron
#

My LangGraph agent (Served via FastAPI) will require authentication via JWT auth. My Next.js app is where I serve the Copilot UI and also where I handle authentication (managed by Better Auth). Any help with system design for passing a JWT that is created Client side and then passed to the Agent would be helpful.

tidal iron
#

Disregard. It looks like you can pass headers to the Copilot component.

late egretBOT
#

@tidal iron I will check this and reply soon

late egretBOT
#

@tidal iron Nice! Yep, passing headers like that works well—feel free to reach out if anything else comes up.

silent mantle
#

@tidal iron Hey, I’m also facing the same issue while implementing authentication. I need to pass a cookie or authorization header to the FastAPI backend through the CopilotKit runtime URL. However, I’m unsure how to do that. I’m also using a Next.js (TypeScript) proxy to call the CopilotKit runtime. Please refer to my current code for implementing the CopilotKit runtime.

import { copilotKitEndpoint, CopilotRuntime, copilotRuntimeNextJSPagesRouterEndpoint, OpenAIAdapter } from "@copilotkit/runtime";
import { NextApiRequest, NextApiResponse } from "next";
import OpenAI from "openai";

const handler = async (req: NextApiRequest, res: NextApiResponse) => {
const runtime = new CopilotRuntime({
remoteEndpoints: [
copilotKitEndpoint({
url: process.env.ADMIN_AGENT + "/copilotkit"
})
]
});
const handleRequest = copilotRuntimeNextJSPagesRouterEndpoint({
endpoint: "/api/copilotkit",
runtime,
serviceAdapter: new OpenAIAdapter({ openai: new OpenAI({ apiKey: "" }) })
});
return await handleRequest(req, res);
};

export default handler;

silent mantle
#

@Tony 🔶 (@CopilotKit)
@tidal iron Hey, I’m also facing the same issue while implementing authentication. I need to pass a cookie or authorization header to the FastAPI backend through the CopilotKit runtime URL. However, I’m unsure how to do that. I’m also using a Next.js (TypeScript) proxy to call the CopilotKit runtime. Please refer to my current code for implementing the CopilotKit runtime.

import { copilotKitEndpoint, CopilotRuntime, copilotRuntimeNextJSPagesRouterEndpoint, OpenAIAdapter } from "@copilotkit/runtime";
import { NextApiRequest, NextApiResponse } from "next";
import OpenAI from "openai";

const handler = async (req: NextApiRequest, res: NextApiResponse) => {
const runtime = new CopilotRuntime({
remoteEndpoints: [
copilotKitEndpoint({
url: process.env.ADMIN_AGENT + "/copilotkit"
})
]
});
const handleRequest = copilotRuntimeNextJSPagesRouterEndpoint({
endpoint: "/api/copilotkit",
runtime,
serviceAdapter: new OpenAIAdapter({ openai: new OpenAI({ apiKey: "" }) })
});
return await handleRequest(req, res);
};

export default handler;

late egretBOT
#

@silent mantle To pass cookies or an auth header from your frontend to FastAPI via the CopilotKit runtime, use onBeforeRequest in your Next.js API route:

copilotKitEndpoint({
  url: process.env.ADMIN_AGENT + "/copilotkit",
  onBeforeRequest: ({ ctx }) => {
    const req = ctx.request;
    return {
      headers: {
        ...(req.headers.get("authorization") && { Authorization: req.headers.get("authorization") }),
        ...(req.headers.get("cookie") && { Cookie: req.headers.get("cookie") }),
      },
    };
  },
});

And in your frontend fetch, be sure to include:

fetch("/api/copilotkit", {
  method: "POST",
  credentials: "include",
  headers: { Authorization: Bearer ${token} },
  body: JSON.stringify({ /* your data */ }),
});

This setup ensures headers/cookies are forwarded to your FastAPI backend.

proven frigate
tidal iron
#

hey @proven frigate & @silent mantle I haven't implemented this auth flow yet. When I asked this question I was just trying to work out my stack architecture to see if Copilot Kit was a good fit. Been on a break from building stuff but will update when I've tested/ gotten this up and running.