Nuxt3 useCookie does not set immediately

Question

Upon user's successful login to my Nuxt3 app (universal mode), I call useCookie to save the token to cookie so that user stays logged in in case of page refresh.

const authCookie = useCookie('auth_token');
authCookie.value = response.refresh_token;

The cookie gets set correctly, but it takes about one minute for it to happen. After this time I can see the cookie appear in Dev tools and if I refresh the page, all works as expected. If I however refresh the page sooner, the cookie is not there and user needs to login again.

Anybody seen this? What am I doing wrong?

Answer 1

Answering my own question in case somebody makes the same silly mistake as me.

Since this is universal app, the initial page render after user authenticates (OAuth redirect back to main page) is done on server, therefore the initial useCookie is called on the server. Duh! Only when the token gets refreshed on the client some time later (i.e., the first time useCookie is called on the client), the cookie appears on the browser.

Answer 2

use refreshCookie('name') to update the cookie value on the browser. source