The useCookie hook provides the value of a cookie and a setter to update it, much like Reacts useState hook.

const [value, setValue] = useCookie('theme', 'system')

The 1st argument to useCookie is the cookie key and the 2nd argument is an optional default value.

Returns an array with exactly two values:

  • The current value of the cookie
  • The set function that lets you update the value of the cookie.

set(value|fn, options)

The set function returned by useCookie lets you update the cookie to a different value and trigger a re-render. You can pass the next value directly, or a function that calculates it from the previous value:

setTheme('dark') setNumber(n => n + 1)


Updating a cookie will also update any other components observing its value. This also works when updating cookies on the server using the Context object.


By default cookies use session storage but you can change these per-cookie by providing an additional options object, or globally in your firebolt.config.js file.

setValue(authToken, { expires: 30 })

Available cookie options are:

expiresNumer|DatenullNumbers are treated as days
sameSiteEnumlaxCan also be strict or none