felixv
felixv
HHono
Created by felixv on 8/17/2024 in #help
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') || '',
},
})
1 replies