Setting a cookie using (rpc + react query)

[igmtink]

I'm sending a request to my login api endpoint from to client using react query and rpc but I'm not getting the cookie from my application tab in chrome dev tools but on the network tab there's a cookie from my request, but when I'm using standard fetch api with credentials: 'include' option, there's no problem at all I got the cookie from server to client, but when using rpc I can't get the cookie from server to client

Inside of network:

Inside of application:

I already setup the (cors)

Inside of my hono server:

import { Hono } from 'hono'
import { drizzleFactory } from './utils/factory/drizzle.factory'
import { logger } from 'hono/logger'
import { cors } from 'hono/cors'

import auth from './providers/auth.controller'
import { csrf } from 'hono/csrf'
import CustomHTTPException from './utils/custom-http-exception'

const app = new Hono()
  .basePath('/api')
  .use(
    cors({
      origin: 'http://localhost:3000',
      credentials: true
    })
  )
  .use(csrf())
  .use(logger())
  .use(drizzleFactory)
  .onError((err, c) => {
    if (err instanceof CustomHTTPException) {
      return c.json({ message: err.message }, { status: err.statusCode })
    }

    return c.json({ message: err.message || err.toString() }, { status: 500 })
  })

const routes = app.route('/', auth)

export default app
export type AppType = typeof routes

Here's the code on my login api endpoint:

.post('/login', zValidator('json', loginSchema), async c => {
    const body = c.req.valid('json')

    const user = await c.var.db.query.users.findFirst({
      where: or(
        eq(users.username, body.usernameOrEmail),
        eq(users.email, body.usernameOrEmail)
      )
    })

    if (!user) {
      throw new CustomHTTPException('Invalid username or email', 404)
    }

    const passwordMatch = await verifyPassword(user.password, body.password)

    if (!passwordMatch) {
      throw new CustomHTTPException('Invalid password', 401)
    }

    const payload = {
      id: user.id,
      name: `${user.firstName} ${user.lastName}`,
      username: user.username,
      email: user.email,
      role: user.role
    }

    const sessionToken = await sign(payload, c.env.JWT_SECRET, 'HS256')

    setSignedCookie(c, 'sessionToken', sessionToken, c.env.COOKIE_SECRET, {
      httpOnly: true,
      secure: true,
      sameSite: 'Strict',
      // maxAge: 60 * 60 * 24 * 30,
      maxAge: 60
    })

    return c.json({ message: 'Successfully login' })
  })

Here's the code how I use the rpc and react query:

import { hc as honoClient } from 'hono/client'

import type { AppType } from '../../../server/src/index'

export const hc = honoClient<AppType>('http://localhost:8787')

export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({
  children
}) => {
  const $loginPost = hc.api.login.$post

  const { mutateAsync: login } = useMutation<
    InferResponseType<typeof $loginPost>,
    Error,
    InferRequestType<typeof $loginPost>['json']
  >(
    {
      mutationFn: async values => {
        const res = await $loginPost({
          json: values
        })

        return await res.json()
      },
      onError: error => {
        console.log('INSIDE AUTH PROVIDER: ', error)
      }
    }

    //   onSuccess: async () => {
    //     queryClient.invalidateQueries({ queryKey: ['todos'] })
    //   },
  )

  return (
    <AuthContext.Provider value={{ login }}>{children}</AuthContext.Provider>
  )
}

P.S: I already tried my hono server on postman and there's no problem at all I can get the cookie and verify to jwt, but when it comes on my client I can't verify the cookie.

[igmtink]

I already fixed, by adding this fetch option, why this option is not included on the docs? I mean there's fetch option in the docs but the example is only for using env

[avetisk]

I agree, it would be great to add it to the documentation. I ended up doing the same and I was wondering if there was some simpler way to do it.

[paolostyle]

You can do:

export const hc = honoClient<AppType>('http://localhost:8787', { init: { credentials: 'include' } });