Cookie - Elysia tutorial

You interact with cookies by using cookie from context.

import { Elysia } from 'elysia'

new Elysia()
  .get('/', ({ cookie: { visit } }) => {
    visit.value = Number(visit.value ?? 0) + 1

    return `You have visited ${visit.value} times`
  })
  .listen(3000)

Cookie is a reactive object. Once modified, it will be reflected in response.

Value

Elysia will then try to coerce it into its respective value when a type annotation if provided.

import { Elysia, t } from 'elysia'

new Elysia()
  .get('/', {
    cookie: t.Object({
      visit: t.Optional(
        t.Object({
          total: t.Number()
        })
      )
    })
  }, ({ cookie: { visit } }) => {
    visit.value ??= { total: 0 }
    visit.value.total++

    return `You have visited ${visit.value.total} times`
  })
  .listen(3000)

We can use cookie schema to validate and parse cookie.

Attribute

We can get/set cookie attribute by its respective property name.

Otherwise, use .set() to bulk set attribute.

import { Elysia } from 'elysia'

new Elysia()
  .get('/', ({ cookie: { visit } }) => {
    visit.value = Number(visit.value ?? 0) + 1

    visit.httpOnly = true
    visit.path = '/'

    visit.set({
      sameSite: 'lax',
      secure: true,
      maxAge: 60 * 60 * 24 * 7
    })

    return `You have visited ${visit.value} times`
  })
  .listen(3000)

See Cookie attribute.

Remove

We can remove cookie by calling .remove() method.

import { Elysia } from 'elysia'

new Elysia()
  .get('/', ({ cookie: { visit } }) => {
    visit.remove()

    return `Cookie removed`
  })
  .listen(3000)

Elysia can sign cookies to prevent tampering by:

Provide a cookie secret to the Elysia constructor.
Use t.Cookie to provide secret for each cookie.

import { Elysia, t } from 'elysia'

new Elysia({
  cookie: {
    secrets: 'Fischl von Luftschloss Narfidort',
  }
})
  .get('/', {
    cookie: t.Cookie({
      visit: t.Optional(t.Number())
        }, {
            secrets: 'Fischl von Luftschloss Narfidort',
            sign: ['visit']
        })
  }, ({ cookie: { visit } }) => {
    visit.value ??= 0
    visit.value++

    return `You have visited ${visit.value} times`
  })
  .listen(3000)

If multiple secrets are provided, Elysia will use the first secret to sign cookies, and try to verify with the rest.

See Cookie signature, Cookie rotation.

Assignment

Let’s create a simple counter that tracks how many times you have visited the site.

Assignments

0 of 2 assignments passed

Visit cookie
Not passed yet
Create a route GET "/" that that increase every visit by 1 using store in cookie name "visit"
HTTP only
Not passed yet
Make the "visit" cookie HTTP Only so it is inaccessible from client-side script

We can update the cookie value by modifying visit.value.
We can set HTTP only attribute by setting visit.httpOnly = true.

import { Elysia, t } from 'elysia'

new Elysia()
  .get('/', {
    cookie: t.Object({
      visit: t.Optional(
        t.Number()
      )
    })
  }, ({ cookie: { visit } }) => {
    visit.value ??= 0
    visit.value++

    visit.httpOnly = true

    return `You have visited ${visit.value} times`
  })
  .listen(3000)

One sec, warming things up…

Visit cookie

HTTP only