Using cookies in client-components

[buraktabn]

I have a basic web app with login and home pages. I get the user's token after they log in and save it to the cookie store.

I can get the token from server components and pass it down to the client component. However, I'm looking for a more convenient solution like using hooks or something else.

"use server"

import {cookies} from 'next/headers'

export const getToken = (): string | undefined => {
    return cookies().get('token')?.value;
}

Basically, I want to determine if the user is logged in or not and use this information in my NavBar (client component) to show the Login or Logout button.

[devjiwonchoi]

For client-side cookies, you can implement third-party modules like js-cookie and will work like a charm.

[victorobiora]

i am aware of this, but do you think it's as safe and cannot be accessed by a malicious third party? I know accessing cookies from the server protects that?

[codinginflow]

Can I use js-cookie to set a cookie in a client component or only to retrieve them?

[eungyeole]

I made a library. Would you like to try it?
https://github.com/eungyeole/next-unified-cookies

[safwat-fathi]

@eungyeole there is an issue with storing the cookie value, please check the issues.