Nuxtjs: How to use HttpOnly Cookies for Nuxt-Auth strategy

Question

I worked previously with Vuejs and decided to take a look into NuxtJs. In my previous applications my server sends a HttpOnly cookie which my client couldn't read. So for auth I tried out NuxtAuth which has some startegies and I noticed that it is not possible to use a HttpOnly cookie as strategy. I think this is the limitation of the SSR. But is there a way to use HttpOnly Cookies with NuxtJs? My solution was to run API request only on Client-Side where I have the cookie. This seems to work but I think this is maybe not the ideal solution.

So furthermore how can I setup axios for dev an prod env's in the nuxt.config? When I use the baseURL attribute I got always cors so I tried the proxy which works but the cookies are rejected with the message: The cookie "access_token_cookie" was declined due to invalid domain rights. I thinks this is because the proxy is localhost in dev right? Is there a solution for that?

So any ideas how I can implement HttpOnly authtentication in Nuxt?

Shantelleshantha

check out the issue for implementing this which says the cookie strategy now supports http-only... personally, I'm still trying to adapt my auth patterns to universal apps in a more DIY way as that nuxt plugin is far from API stable yet. – Gwenni

Answer 1

You can easily set httpOnly cookie options to true:

auth: {
  cookie: {
    options: {
      httpOnly: true
    },
  },
}

I recommend you check the environment to be true only on production environment. Because if it is set to false on development, the token cookie is not accessable! You can write it like this:

httpOnly: process.env.NODE_ENV === 'production'

In nuxt auth documentation, This option is not mentioned! But it works for me :)

Goncourt

Thanks, it was interesting! You can set sameSite as well 😄 – Goncourt