Allow Users to Specify Types for JWT Middleware Payload

[NicoPlyley]

What is the feature you are proposing?

When using the JWT middleware, end users currently cannot specify the type for the payload. The context variable is set to jwtPayload: any, and there have been multiple discussions by people on Discord asking how to set the types. It cannot be overridden in ContextVariableMap, so the only way to set it is by casting.

I am proposing that we either incorporate generic type parameters, for example, jwt<MyPayloadType>({ secret: '123' }), which can be backwards compatible.

Or we remove the following:

interface ContextVariableMap {
  jwtPayload: any;
}

And force the user to set the context variables themselves.

[yusukebe]

Hi @NicoPlyley, Thank you for raising the issue.

This is related to #2249, #2313.

I'm thinking about this a long time. We are going to resolve this issue soon.

[BraydenGirard]

Thank you @NicoPlyley and @yusukebe this will solve my issues as well!

[bingtsingw]

@yusukebe Any chance to make JwtPayload not global? I have an app which use different auth middleware for different routes, but as long as I import hono/jwt, every context have the ts type of JwtPayload, which may lead to runtime error.

[yusukebe]

@bingtsingw

Yes. I want to make it not global in the future. The following way should be recommended:

// factory.ts
import { drizzle, DrizzleD1Database } from 'drizzle-orm/d1'
import { Hono } from 'hono'

export const createHonoWithDB = () => {
  const app = new Hono<{
    Bindings: {
      D1: D1Database
    }
    Variables: {
      db: DrizzleD1Database
    }
  }>()
  app.use(async (c, next) => {
    c.set('db', drizzle(c.env.D1))
    await next()
  })
  return app
}

// app.ts
import { createHonoWithDB } from './factory'

const app = createHonoWithDB()

app.get('/', (c) => {
  c.var.db.select() //...
})

export default app

But, though it's a types matter, it causes a little breaking change. So I'm cautious.