> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/honojs/hono/llms.txt
> Use this file to discover all available pages before exploring further.

# Built-in Middleware

> Overview of all middleware included with Hono

Hono includes a comprehensive collection of built-in middleware for common web application needs. All middleware is available via the `hono` package.

## Authentication & Authorization

Middleware for securing your application and verifying user identity.

<CardGroup cols={2}>
  <Card title="Basic Auth" icon="lock" href="/api/middleware/basic-auth">
    HTTP Basic authentication with username and password

    ```typescript theme={null}
    import { basicAuth } from 'hono/basic-auth'

    app.use('/admin/*', basicAuth({
      username: 'admin',
      password: 'secret'
    }))
    ```
  </Card>

  <Card title="Bearer Auth" icon="key" href="/api/middleware/bearer-auth">
    Bearer token authentication for API access

    ```typescript theme={null}
    import { bearerAuth } from 'hono/bearer-auth'

    app.use('/api/*', bearerAuth({ token: 'your-token' }))
    ```
  </Card>

  <Card title="JWT" icon="shield" href="/api/middleware/jwt">
    JSON Web Token authentication and verification

    ```typescript theme={null}
    import { jwt } from 'hono/jwt'

    app.use('/auth/*', jwt({
      secret: 'secret-key',
      alg: 'HS256'
    }))
    ```
  </Card>

  <Card title="JWK" icon="certificate">
    Verify JWT tokens using JSON Web Keys

    ```typescript theme={null}
    import { jwk } from 'hono/jwk'

    app.use('/api/*', jwk({ jwkUrl: 'https://...' }))
    ```
  </Card>
</CardGroup>

## Security

Middleware to enhance application security and protect against common vulnerabilities.

<CardGroup cols={2}>
  <Card title="CORS" icon="globe" href="/api/middleware/cors">
    Cross-Origin Resource Sharing configuration

    ```typescript theme={null}
    import { cors } from 'hono/cors'

    app.use('/api/*', cors({
      origin: 'https://example.com',
      allowMethods: ['GET', 'POST'],
      credentials: true
    }))
    ```
  </Card>

  <Card title="CSRF" icon="shield-halved" href="/api/middleware/csrf">
    Cross-Site Request Forgery protection

    ```typescript theme={null}
    import { csrf } from 'hono/csrf'

    app.use(csrf())
    ```
  </Card>

  <Card title="Secure Headers" icon="helmet-safety" href="/api/middleware/secure-headers">
    Set security-related HTTP headers

    ```typescript theme={null}
    import { secureHeaders } from 'hono/secure-headers'

    app.use(secureHeaders())
    ```
  </Card>

  <Card title="IP Restriction" icon="location-dot">
    Allow or deny requests based on IP address

    ```typescript theme={null}
    import { ipRestriction } from 'hono/ip-restriction'

    app.use(ipRestriction({ allow: ['192.168.0.0/16'] }))
    ```
  </Card>
</CardGroup>

## Performance & Optimization

Middleware to improve application performance and reduce bandwidth.

<CardGroup cols={2}>
  <Card title="Compress" icon="file-zipper" href="/api/middleware/compress">
    Response compression with gzip or deflate

    ```typescript theme={null}
    import { compress } from 'hono/compress'

    app.use(compress())
    ```
  </Card>

  <Card title="Cache" icon="database" href="/api/middleware/cache">
    Cache responses for improved performance

    ```typescript theme={null}
    import { cache } from 'hono/cache'

    app.use(cache({ cacheName: 'my-cache' }))
    ```
  </Card>

  <Card title="ETag" icon="fingerprint" href="/api/middleware/etag">
    Generate ETags for cache validation

    ```typescript theme={null}
    import { etag } from 'hono/etag'

    app.use(etag())
    ```
  </Card>

  <Card title="Timing" icon="clock">
    Add Server-Timing headers for performance monitoring

    ```typescript theme={null}
    import { timing } from 'hono/timing'

    app.use(timing())
    ```
  </Card>
</CardGroup>

## Request Processing

Middleware for handling and validating incoming requests.

<CardGroup cols={2}>
  <Card title="Body Limit" icon="scale-balanced" href="/api/middleware/body-limit">
    Limit the size of request bodies

    ```typescript theme={null}
    import { bodyLimit } from 'hono/body-limit'

    app.use(bodyLimit({ maxSize: 50 * 1024 })) // 50KB
    ```
  </Card>

  <Card title="Method Override" icon="arrows-rotate">
    Override HTTP method for legacy clients

    ```typescript theme={null}
    import { methodOverride } from 'hono/method-override'

    app.use(methodOverride())
    ```
  </Card>

  <Card title="Timeout" icon="hourglass" href="/api/middleware/timeout">
    Set request timeout limits

    ```typescript theme={null}
    import { timeout } from 'hono/timeout'

    app.use('/api/*', timeout(5000)) // 5 seconds
    ```
  </Card>

  <Card title="Trailing Slash" icon="slash" href="/api/middleware/trailing-slash">
    Enforce or remove trailing slashes in URLs

    ```typescript theme={null}
    import { trimTrailingSlash } from 'hono/trailing-slash'

    app.use(trimTrailingSlash())
    ```
  </Card>
</CardGroup>

## Response Formatting

Middleware for formatting and customizing responses.

<CardGroup cols={2}>
  <Card title="Pretty JSON" icon="code">
    Format JSON responses with indentation

    ```typescript theme={null}
    import { prettyJSON } from 'hono/pretty-json'

    app.use(prettyJSON())
    ```
  </Card>

  <Card title="Powered By" icon="bolt">
    Add custom X-Powered-By header

    ```typescript theme={null}
    import { poweredBy } from 'hono/powered-by'

    app.use(poweredBy())
    ```
  </Card>
</CardGroup>

## Utilities & Helpers

Middleware for logging, internationalization, and other utilities.

<CardGroup cols={2}>
  <Card title="Logger" icon="terminal" href="/api/middleware/logger">
    Log incoming requests and responses

    ```typescript theme={null}
    import { logger } from 'hono/logger'

    app.use(logger())
    ```
  </Card>

  <Card title="Request ID" icon="hashtag">
    Generate unique IDs for each request

    ```typescript theme={null}
    import { requestId } from 'hono/request-id'

    app.use(requestId())
    ```
  </Card>

  <Card title="Language" icon="language">
    Detect and set user language preferences

    ```typescript theme={null}
    import { language } from 'hono/language'

    app.use(language())
    ```
  </Card>

  <Card title="Context Storage" icon="box-archive">
    Store context data across async operations

    ```typescript theme={null}
    import { contextStorage } from 'hono/context-storage'

    app.use(contextStorage())
    ```
  </Card>
</CardGroup>

## Static Files & Views

Middleware for serving static files and rendering views.

<CardGroup cols={2}>
  <Card title="Serve Static" icon="folder">
    Serve static files from a directory

    ```typescript theme={null}
    import { serveStatic } from 'hono/serve-static'

    app.use('/static/*', serveStatic({ root: './public' }))
    ```
  </Card>

  <Card title="JSX Renderer" icon="paintbrush">
    Render JSX components as responses

    ```typescript theme={null}
    import { jsxRenderer } from 'hono/jsx-renderer'

    app.use(jsxRenderer())
    ```
  </Card>
</CardGroup>

## Advanced

Advanced middleware for special use cases.

<CardGroup cols={2}>
  <Card title="Combine" icon="layer-group">
    Combine multiple middleware into one

    ```typescript theme={null}
    import { combine } from 'hono/combine'
    import { logger } from 'hono/logger'
    import { cors } from 'hono/cors'

    const combined = combine(logger(), cors())
    app.use(combined)
    ```
  </Card>
</CardGroup>

## Usage Examples

### Common Setup

A typical Hono application might use several middleware together:

```typescript theme={null}
import { Hono } from 'hono'
import { logger } from 'hono/logger'
import { cors } from 'hono/cors'
import { secureHeaders } from 'hono/secure-headers'
import { compress } from 'hono/compress'
import { jwt } from 'hono/jwt'

const app = new Hono()

// Global middleware for all routes
app.use(logger())
app.use(secureHeaders())
app.use(compress())

// Public API with CORS
app.use('/api/public/*', cors())

// Protected API with JWT
app.use('/api/protected/*', cors())
app.use('/api/protected/*', jwt({ secret: 'secret-key', alg: 'HS256' }))

app.get('/api/public/info', (c) => c.json({ version: '1.0' }))
app.get('/api/protected/data', (c) => {
  const payload = c.get('jwtPayload')
  return c.json({ user: payload.sub })
})

export default app
```

### Production-Ready Setup

For production applications, consider this middleware stack:

```typescript theme={null}
import { Hono } from 'hono'
import { logger } from 'hono/logger'
import { cors } from 'hono/cors'
import { secureHeaders } from 'hono/secure-headers'
import { compress } from 'hono/compress'
import { etag } from 'hono/etag'
import { requestId } from 'hono/request-id'
import { bodyLimit } from 'hono/body-limit'
import { timeout } from 'hono/timeout'

const app = new Hono()

// Monitoring and debugging
app.use(logger())
app.use(requestId())

// Security
app.use(secureHeaders())
app.use(cors({
  origin: process.env.ALLOWED_ORIGINS?.split(',') || '*',
  credentials: true
}))

// Performance
app.use(compress())
app.use(etag())

// Limits
app.use(bodyLimit({ maxSize: 1024 * 1024 })) // 1MB
app.use(timeout(30000)) // 30 seconds

export default app
```

<Note>
  For detailed API documentation of each middleware including all options and advanced usage, see the API Reference section.
</Note>