export const revalidate = 0;

export default async function TaskPage({ searchParams }: Props) {
    const search = searchParamsSchema.parse(searchParams);
    const { getToken } = auth();

    const token = await getToken();
    console.log("🚀 ~ TaskPage ~ token:", token);
    const response = await client.api.tasks.$get({
        query: search,
        headers: { Authorization: `Bearer ${token}` },
    });

    console.log("🚀 ~ response headers:", response.headers);

    if (!response.ok) {
        throw new Error("Error fetching tasks");
    }

    const initialData = await response.json();

    return (
        <>
            <div className="h-full flex-1 flex-col space-y-8 p-8 md:flex">
                <TaskUi initialData={initialData} search={search} />
            </div>
        </>
    );
}

console in terminal:

🚀 ~ response headers: Headers {
  'x-clerk-auth-reason': 'dev-browser-missing',
  'x-clerk-auth-status': 'signed-out',
  'x-middleware-rewrite': '/api/tasks?page=1&per_page=10',
  'content-type': 'application/json; charset=UTF-8',
  date: 'Wed, 02 Oct 2024 06:46:45 GMT',
  connection: 'keep-alive',
  'keep-alive': 'timeout=5',
  'transfer-encoding': 'chunked'
}

backend code:

const app = new Hono()
    .use("*", clerkMiddleware())
    .get("/", async (ctx) => {
        const query = ctx.req.query();
        const parsedParams = getTasksSchema.safeParse(query);
        const auth = getAuth(ctx);

        if (!auth?.userId) {
            return ctx.json({ error: "Unauthorized" }, 401);
        }

facing error:

 ⨯ Error: Error fetching tasks

can fetch data if I remove clerkMiddleware(), and userId check
console.log("🚀 ~ TaskPage ~ token:", token);
Also can fetch data with that token as bearer from postman

Why could not doing same in server component !!! help pls.