JWT middleware typed payload

[sz3lbi]

Hello.
I am trying to use the JWT middleware in my Hono application. I want to make the JWT payload typed, so it's not the any type in the endpoint. However, I am not using the middleware with app.use, but in the endpoint directly, such as:

routes.get(
  "/",
  jwt({
    secret: config.SECRET_KEY,
  }),
  async (c) => {
    const payload = c.get("jwtPayload"); // any
    // ...
  }
);

In the index.ts, I tried to configure the types according to the instructions in the docs:

interface Variables {
  jwtPayload: {
    sub: string;
  };
}
const app = new Hono<{ Variables: Variables }>().basePath("/api");

app.route("/some-route", routes);

However, the payload variable in the endpoint is still of type any. Could you please help me and tell me what I am doing wrong here? Thank you.

hono: 4.5.0; @hono/node-server: 1.12.0

[nakasyou]

Hi @sz3lbi.
Variables specifications cannot be used in app.route.
You must specify it when you create your routes.

interface Variables {
  jwtPayload: {
    sub: string;
  };
}

const routes = new Hono<{ Variables: Variables }>();
routes.get(
  "/",
  jwt({
    secret: config.SECRET_KEY,
  }),
  async (c) => {
    const payload = c.get("jwtPayload"); // probably typed!
    // ...
  }
);
// ...

const app = new Hono<{ Variables: Variables }>().basePath("/api");

app.route("/some-route", routes);

I hope you can resolve this problem.

[sz3lbi]

It works, thank you.

[illright]

There's also a way to have the types of jwtPayload be applied automatically:

import type { MiddlewareHandler } from "hono";

export interface JwtClaims {
	id: number
}

export const jwtAuth = jwt({
	secret: process.env.JWT_SECRET,
}) as MiddlewareHandler<{
	Variables: { jwtPayload: JwtClaims };
}>;

Would be much nicer if the jwt function was generically typed and would allow passing that generic down to the underlying MiddlewareHandler so that the crude as ... typecast wouldn't be necessary.