Hono•3mo ago

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

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') || '',
  },
})

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') || '',
  },
})

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

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