HonoH
Hono•17mo ago
felixv

Hono RPC + Clerk Middleware in Next.js Server Actions/Components

I am using the clerkMiddleware in Hono and was wondering if this is the correct way to make authenticated requests with serverComponents and server Actions by simply forwarding the cookie value from the next/headers. Should there any other headers be forwarded?

Here are the steps:

1) Add Hono Middleware

import { SUser } from '@app/playground/test-model'
import { env as clientEnv } from '@client'
import { zValidator } from '@hono/zod-validator'
import { clerkMiddleware, getAuth } from '@lib/hono-client/clerk-middleware'
import { env as serverEnv } from '@server'
import { Hono } from 'hono'
import { handle } from 'hono/vercel'

export const runtime = 'edge'

const app = new Hono().basePath('/api')

app.use(
  '*',
  clerkMiddleware({
    secretKey: serverEnv.CLERK_SECRET_KEY,
    publishableKey: clientEnv.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,
  }),
)
const route = app
  .get('/user', zValidator('query', SUser), (c) => {
    const { name, email } = c.req.valid('query')
    const auth = getAuth(c)

    if (!auth?.userId) {
      return c.json({
        message: 'You are not logged in.',
      })
    }
    return c.json({
      message: 'You are logged in!',
      userId: auth.userId,
      name,
      email,
    })
  })

export const GET = handle(app)
export const POST = handle(app)

export type AppType = typeof route


2) Forward Cookie from next/headers to init of client:

import { AppType } from '@app/api/[[...route]]/route'
import { env } from '@client'
import { hc } from 'hono/client'
import { headers } from 'next/headers'

const headersList = headers()

export const client = hc<AppType>(env.NEXT_PUBLIC_BASE_URL, {
  headers: {
    cookie: headersList.get('cookie') || '',
  },
})
Was this page helpful?