How would I create a “pre-“ middleware?

[dalanmiller]

I don't quite understand the custom middleware example.

How would I set up a pre-handler middleware that initialised a client for an API or made a connection to a DB that I'm going to need in multiple routes?

Use example case #1 - Setting a var to be used in multiple routes

app.use(async (c, next) => {
  const livemode = determineLivemode(c.req.header("livemode"));
  c.set("livemode", livemode); // Intending to set "livemode" on var object
  await next(); // Assuming this is then allowing subsequent handlers to run
};

I get this error:

Use example case #2 - Init'ing a Stripe client to be used in multiple routes.

In an attempt to be DRY and have this code path live in just one place, I'm trying to set up the Stripe client in a pre-route middleware (not sure if this is the best way to think about it).

Not sure if I have access to the c.env in the middleware? Or if there's a more canonical way to do this.

app.use(async (c, next) => {
  const stripe = new Stripe(c.env.STRIPE_TK); 
  c.set("stripe", stripe); 
  await next();
};

Apologies if these are more Typescript questions that I'm not grokking correctly in the context of Hono.

[NicoPlyley]

What runtime would you be running this in? Because it can differ

[dalanmiller]

Attempting to do this in a Cloudflare Worker, will show an ~example of what I'm trying to achieve

[NicoPlyley]

Yes you have access to the entire context in your middleware. The types issue you are having is because there is no types set on your context variables you can fix this by adding this

// https://hono.dev/api/context#set-get

type Variables = {
  message: string
}

const app = new Hono<{ Variables: Variables }>()

Or you can add it globally

// https://hono.dev/api/context#contextvariablemap

declare module 'hono' {
  interface ContextVariableMap {
    result: string
  }
}

[yusukebe]

Hi!

Recently, I've been thinking about this matter and started using a simple factory pattern.

First, you can write the factory.ts:

import { Hono } from 'hono'

type Variables = {
  client: Client
}

export const createAppWithDB = () => {
  const app = new Hono<{
    Variables: Variables
  }>()
  app.use((c) => {
    const client = initClient()
    c.set('client', client)
  })
  return app
}

Then, you can use the client with c.var.client:

If we feel this way is good, we can add this simple factory pattern to our documents and advocate it.

[dalanmiller]

Okay, I solved my own problem here thanks to your tips above 🎉 - thank you!

What wasn't clear to me is that when I want to access both Environment Variables and session variables I need to specify that in the Hono instantiation:

type Variables = {
  stripe: Stripe;
  livemode: boolean;
};

type Bindings = {
  STRIPE_RK: string;
  STRIPE_TK: string;
};

const app = new Hono<{ Bindings: Bindings; Variables: Variables }>();

I don't think this is entirely evident in either the var docs or the env docs and I may be wrong here, but I don't think the Typescript aspects this are obvious even if you are a Typescript veteran.

For instance the following code example is incomplete, isn't it? You'd still need to include username: string to a new Variables type and pass that into your app creation. It's shown further down in the last section, but it should be much more prominent I think. And I think c.vars would be usable and maybe useful in other runtimes.

https://hono.dev/getting-started/cloudflare-workers#using-variables-in-middleware

Perhaps each example should have a vanilla JS and Typescript JS example (or just Typescript since you could always infer the vanilla JS by stripping away the types)?

E.g. - vanilla;

import { basicAuth } from 'hono/basic-auth'

//...

app.use('/auth/*', async (c, next) => {
  const auth = basicAuth({
    username: c.env.USERNAME,
    password: c.env.PASSWORD,
  })
  return auth(c, next)
})

Typescript:

import { Hono } from 'hono'; 
import { basicAuth } from 'hono/basic-auth'

type Bindings = {
  USERNAME: string, 
  PASSWORD: string, 
}

const app = new Hono<{Bindings: Bindings}>(); 

app.use('/auth/*', async (c, next) => {
  const auth = basicAuth({
    username: c.env.USERNAME,
    password: c.env.PASSWORD,
  })
  return auth(c, next)
})

Really loving the simplicity of Hono but I think this rough-ish edge took me by surprise. 🙇🏻‍♂️

[yusukebe]

@dalanmiller

For instance the following code example is incomplete, isn't it?

You are certainly right. The Bindings should be written. I'll fix it, and we'll add more descriptors for the Types of things. Thanks!