Overview The cookies function provides an API to read and write HTTP cookies in React Server Components. It returns an object with methods to get, set, and remove cookies during server-side rendering.
Import import { cookies } from '#cosmos-rsc/server' ;
Usage import { cookies } from '#cosmos-rsc/server' ; export default function Page () { const cookieStore = cookies (); // Get a cookie value const sessionId = cookieStore . get ( 'session_id' ); // Set a cookie cookieStore . set ( 'user_preference' , 'dark_mode' , { maxAge: 60 * 60 * 24 * 7 , // 7 days httpOnly: true , secure: true , }); return < div > Cookie value: { sessionId } </ div > ; }
API Reference cookies() Returns a cookie store object with methods to interact with cookies.
Returns: CookieStoreCookieStore Methods get(name) Retrieves the value of a cookie by name.
The name of the cookie to retrieve
Returns: string | null - The cookie value if found, otherwise nullconst cookieStore = cookies (); const value = cookieStore . get ( 'session_id' ); // Returns: "abc123" or null if not found
The get method checks both incoming cookies from the request and outgoing cookies that have been set during the current render.
set(name, value, options) Sets a cookie with the specified name, value, and options.
The name of the cookie to set
The value to store in the cookie
Cookie configuration options Maximum age of the cookie in seconds
Expiration date of the cookie
URL path for the cookie (defaults to ”/”)
Whether the cookie should only be sent over HTTPS
Whether the cookie should be inaccessible to client-side JavaScript
sameSite
'strict' | 'lax' | 'none'
SameSite attribute for CSRF protection
Returns: voidconst cookieStore = cookies (); // Simple cookie cookieStore . set ( 'theme' , 'dark' ); // Cookie with options cookieStore . set ( 'session_token' , 'xyz789' , { maxAge: 3600 , // 1 hour httpOnly: true , secure: true , sameSite: 'strict' , });
Cookies cannot be set during the RSC (React Server Components) render phase after the response has been sent to the client. Set cookies during the initial render or server actions only.
remove(name) Removes a cookie by name.
The name of the cookie to remove
Returns: voidconst cookieStore = cookies (); cookieStore . remove ( 'session_id' );
This method removes the cookie from both incoming and outgoing cookie stores.
Implementation Details Render Phases COSMOS RSC manages cookies across different render phases:
START : Initial request handlingSERVER_ACTION : During server action execution (cookies can be set)RSC : React Server Components rendering (cookies are read-only)
Cookie Storage The framework maintains two cookie stores:
Incoming cookies : Cookies received from the client requestOutgoing cookies : Cookies set during server-side rendering
When you call get(), it checks outgoing cookies first, then falls back to incoming cookies.
Examples User Authentication import { cookies } from '#cosmos-rsc/server' ; export default function AuthenticatedPage () { const cookieStore = cookies (); const authToken = cookieStore . get ( 'auth_token' ); if ( ! authToken ) { return < div > Please log in </ div > ; } return < div > Welcome back! </ div > ; }
Setting Preferences import { cookies } from '#cosmos-rsc/server' ; export default function SettingsPage () { const cookieStore = cookies (); // Save user preference cookieStore . set ( 'language' , 'en-US' , { maxAge: 60 * 60 * 24 * 365 , // 1 year path: '/' , }); return < div > Settings saved </ div > ; }
Logout Functionality import { cookies } from '#cosmos-rsc/server' ; export async function logoutAction () { 'use server' ; const cookieStore = cookies (); cookieStore . remove ( 'auth_token' ); cookieStore . remove ( 'session_id' ); }