Nuxt•2y ago

Handling Cookies in API Routes

I have global middleware:

export default defineNuxtRouteMiddleware(async () => {
    await useFetch('/api/setCookie')
    await useFetch('/api/getCookie')
});

export default defineNuxtRouteMiddleware(async () => {
    await useFetch('/api/setCookie')
    await useFetch('/api/getCookie')
});

And those two routes in server/api/getCookie.ts file:

import { getCookie } from "h3";

export default defineEventHandler((event) => {

    const cookie = getCookie(event, 'test_cookie')

    console.log('get cookie in Event Handler', cookie)

    return {
        hello: getCookie(event, 'test_cookie')
    }
})

import { getCookie } from "h3";

export default defineEventHandler((event) => {

    const cookie = getCookie(event, 'test_cookie')

    console.log('get cookie in Event Handler', cookie)

    return {
        hello: getCookie(event, 'test_cookie')
    }
})

and server/api/setCookie.ts:

import { setCookie } from "h3";

export default defineEventHandler((event) => {

    console.log('set cookie in Event Handler')
    setCookie(event, 'test_cookie', 'test_value')

    return {
        hello: 'world'
    }
})

import { setCookie } from "h3";

export default defineEventHandler((event) => {

    console.log('set cookie in Event Handler')
    setCookie(event, 'test_cookie', 'test_value')

    return {
        hello: 'world'
    }
})

I was refering to this section in docs https://nuxt.com/docs/api/composables/use-cookie#handling-cookies-in-api-routes When I run this app I expect to create cookie and console.log it but it doesn't save cookie even on multiple reloads of the app (screenshot). Why?

43 Replies

Unknown User•2y ago

Message Not Public

BT1010OP•2y ago

What do you mean with parseCookies?

Unknown User•2y ago

Message Not Public

BT1010OP•2y ago

wow this works i'll play with it thanks

Unknown User•2y ago

Message Not Public

BT1010OP•2y ago

No sorry actually it doesn't, I changed getCookies.ts to

import { parseCookies } from "h3";

export default defineEventHandler((event) => {
    const cookie = parseCookies(event)
    console.log('get cookie in Event Handler', cookie)
})

import { parseCookies } from "h3";

export default defineEventHandler((event) => {
    const cookie = parseCookies(event)
    console.log('get cookie in Event Handler', cookie)
})

and now it's:

Unknown User•2y ago

Message Not Public

BT1010OP•2y ago

import { parseCookies } from "h3";

export default defineEventHandler((event) => {

    const cookie = parseCookies(event)

    console.log('get cookie in Event Handler', cookie)

    return { cookie }
})

import { parseCookies } from "h3";

export default defineEventHandler((event) => {

    const cookie = parseCookies(event)

    console.log('get cookie in Event Handler', cookie)

    return { cookie }
})

it's still same:

Unknown User•2y ago

Message Not Public

BT1010OP•2y ago

setCookie.ts is:

import { setCookie } from "h3";

export default defineEventHandler((event) => {

    console.log('set cookie in Event Handler')
    setCookie(event, 'test_cookie', 'test_value')

    return {
        hello: 'world'
    }
})

import { setCookie } from "h3";

export default defineEventHandler((event) => {

    console.log('set cookie in Event Handler')
    setCookie(event, 'test_cookie', 'test_value')

    return {
        hello: 'world'
    }
})

the reproduction is here https://github.com/d0peCode/nuxt3-pinia-middleware-issue on api-route-handling-cookies branch https://github.com/d0peCode/nuxt3-pinia-middleware-issue/tree/api-route-handling-cookies

Unknown User•2y ago

Message Not Public

BT1010OP•2y ago

sure thank you for helping me!

Unknown User•2y ago

Message Not Public

BT1010OP•2y ago

it does create the cookie on logout button click due to redirect but it doesnt when you just load the app without this button disregard this button

Unknown User•2y ago

Message Not Public

BT1010OP•2y ago

no no in middleware i execute this routes

import {useStore} from "~/store/useStore";

export default defineNuxtRouteMiddleware(async () => {
    await useFetch('/api/setCookie')
    await useFetch('/api/getCookie')
});

import {useStore} from "~/store/useStore";

export default defineNuxtRouteMiddleware(async () => {
    await useFetch('/api/setCookie')
    await useFetch('/api/getCookie')
});

it should set the cookie immiedietly when you run app in browser you know what i mean?

Unknown User•2y ago

Message Not Public

BT1010OP•2y ago

ignore this button i want to set cookie from api route which is executed from middleware

Unknown User•2y ago

Message Not Public

BT1010OP•2y ago

it's not used at all pull now, i clean up this reproduction project

BT1010OP•2y ago

it's only about this 3 files

BT1010OP•2y ago

in auth.global.ts i execute this:

export default defineNuxtRouteMiddleware(async () => {
    await useFetch('/api/setCookie')
    await useFetch('/api/getCookie')
});

export default defineNuxtRouteMiddleware(async () => {
    await useFetch('/api/setCookie')
    await useFetch('/api/getCookie')
});

Unknown User•2y ago

Message Not Public

BT1010OP•2y ago

i want to be able to set cookie from middleware by the route api so that i can create httpOnly cookie and remove it on server side that's why i'm using api routes for creating cookies

BT1010OP•2y ago

and it's in docs so i thought it's gonna work

BT1010OP•2y ago

you can not remove httpOnly cookie from client side javascript, it has to be removed from the server where it was created. I wanted to create few API routes with nuxt and handle my httpOnly cookies in this way i was suspecting that the issue is that i'm setting and getting the cookie in same ssr cycle but then after page reload the cookie is still not created any hope?

Unknown User•2y ago

Message Not Public

BT1010OP•2y ago

so you propose plugin instead of global middleware lemme check 1sec

Unknown User•2y ago

Message Not Public

BT1010OP•2y ago

does it really work for you?

Unknown User•2y ago

Message Not Public

BT1010OP•2y ago

i pushed changes for me it doesnt create the cookie

BT1010OP•2y ago

Unknown User•2y ago

Message Not Public

BT1010OP•2y ago

remove it and reload does it create? everytime?

Unknown User•2y ago

Message Not Public

BT1010OP•2y ago

do git pull

Unknown User•2y ago

Message Not Public

BT1010OP•2y ago

you dont need to do it in nuxt3 Nuxt automatically reads the files in your plugins directory and loads them at the creation of the Vue application.

Unknown User•2y ago

Message Not Public

BT1010OP•2y ago

and mode client I need to set those cookies in server side that's the thing, I want to set cookies from server side either middleware or plugin but from server

dmarr•2y ago

can you use the ~/server/middleware dir for that?

BT1010OP•2y ago

yes that works! thank you!

Gaming

Programming

Handling Cookies in API Routes