Middleware

Since Frog is built on top of Hono, Frog supports Hono's middleware pattern.

Middleware works before and after the .frame handler by allowing you to manipulate the request and response before and after dispatching respectively. We recommend checking out the Hono documentation on Middleware for a more in-depth understanding.

Custom Middleware

You can write your own Frog middleware. This is great if you want to share common logic across or frames or if you are developing a SDK for Frog users to hook into their frames.

import { Frog } from 'frog'
 
export const app = new Frog()
 
// Custom logger
app.use(async (c, next) => {
  console.log(`[${c.req.method}] ${c.req.url}`)
  await next()
})
 
// Add a custom header
app.use('/foo/*', async (c, next) => {
  await next()
  c.header('x-message', 'Only called for `/foo` and `/foo/bar` frames.')
})
 
app.frame('/', (c) => {/* ... */})
 
app.frame('/foo', (c) => {/* ... */})
 
app.frame('/foo/bar', (c) => {/* ... */})

Community Middleware

Middleware is one of the most powerful pieces of Frog. This section showcases community-built middleware that you can use in your Frog apps.

If you've built a middleware for Frog, feel free to submit a PR to add it to this list.

Pinata FDK Analytics Middleware

The Frog Analytics Plugin allows you to hook into Pinata Frame analytics.

import { PinataFDK } from 'pinata-fdk'
 
const app = new Frog()
 
const fdk = new PinataFDK({
  pinata_jwt: '<YOUR_PINATA_JWT>',
  pinata_gateway: '<YOUR_PINATA_GATEWAY>'
})
 
app.use('/', fdk.analyticsMiddleware({
  frameId: 'my-frame-id',
  customId: 'my-custom-id',
}))