2.5.2 • Published 3 years ago

nookies v2.5.2

Weekly downloads
75,748
License
MIT
Repository
github
Last release
3 years ago

nookies :cookie:

Working npm version

A collection of cookie helpers for Next.js

Features

  • ✨ SSR support, for setter, parser and destroy
  • ⚙️ Custom Express server support
  • 🪶 super light
  • 🛡 perfect for authentication

Setting and destroying cookies also works on server-side.

Quick start

yarn add nookies

You can play with the example code here.

ServerSide cookies

import nookies from 'nookies'

export default function Me() {
  return <div>My profile</div>
}

export async function getServerSideProps(ctx) {
  // Parse
  const cookies = nookies.get(ctx)

  // Set
  nookies.set(ctx, 'fromGetInitialProps', 'value', {
    maxAge: 30 * 24 * 60 * 60,
    path: '/',
  })

  // Destroy
  // nookies.destroy(ctx, 'cookieName')

  return { cookies }
}

Client-only Cookies

import { parseCookies, setCookie, destroyCookie } from 'nookies'

function handleClick() {
  // Simply omit context parameter.
  // Parse
  const cookies = parseCookies()
  console.log({ cookies })

  // Set
  setCookie(null, 'fromClient', 'value', {
    maxAge: 30 * 24 * 60 * 60,
    path: '/',
  })

  // Destroy
  // destroyCookie(null, 'cookieName')
}

export default function Me() {
  return <button onClick={handleClick}>Set Cookie</button>
}

Custom Express server cookies

const express = require('express');
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();
const { parseCookies, setCookie, destroyCookie } = require('nookies');

app.prepare()
    .then(() => {
        const server = express();

        server.get('/page', (req, res) => {

          // Notice how the request object is passed
          const parsedCookies = parseCookies({ req });

          // Notice how the response object is passed
          setCookie({ res }, 'fromServer', 'value', {
            maxAge: 30 * 24 * 60 * 60,
            path: '/page',
          });

          // destroyCookie({ res }, 'fromServer');

          return handle(req, res);
        });

    );

Reference

For client side usage, omit the ctx parameter. You can do so by setting it to an empty object ({}), null or undefined.

parseCookies(ctx, options) or nookies.get(ctx, options)

  • ctx: Next.js context || (Express request object)
  • options:
    • decode: a custom resolver function (default: decodeURIComponent)

setCookie(ctx, name, value, options) or nookies.set(ctx, name, value, options)

Don't forget to end your response on the server with res.send().

  • ctx: (Next.js context) || (Express request object)
  • name: cookie name
  • value: cookie value
  • options:
    • domain
    • encode
    • expires
    • httpOnly
    • maxAge
    • path
    • sameSite
    • secure

destroyCookie(ctx, name, options) or nookies.destroy(ctx, 'token', options)

Don't forget to end your response on the server with res.send(). This might be the reason your cookie isn't removed.

  • ctx: (Next.js context) || (Express response object)
  • name: cookie name
  • options:
    • domain
    • path

License

MIT

cookie-banner-prodesign@iseats/authdafunenotarylog-client@sophia-iot/library-componentsmidland-property-detaileconomico-shop-utilsstadtenergietodoist-landing-pages@infinitebrahmanuniverse/nolb-noohkp-sell-online@everything-registry/sub-chunk-2331@pxwlab/katana-guilangapi-nextlndbossmonkey-app-sdknanakomui-theme-packagenauth0nd-accountnext-redux-cookie-wrappernext-cognito-authnext-ethnext-firebase-authenticationnext-bootstrapnext-dark-modenext-nookies-persistnew-testing-mouaad-bitcheck-authnor-devise-token-authnow-shopify-authnrstatenrstate-clientme.easymove.webeconomico-webshopghostlexly-authpublisher-sdkorgasmoorgamy-front-utilsprimeobjects-ui-web-formprimeobjects-ui-web-applicationprimeobjects-ui-web-basicprismic-pocreact-common-tsreact-c4prompti-sdk@dvx-solutions/lab-ui@heinthanth/next-redux-cookie-wrapper@jinjat-data/next.jsvishwajeet-auth-libteste-utilstesting-bitcheck-authtesting-bitcheck-auth-modaltesting-bitcheck-auth-xtesting-mouaad-bitcheck-auth@jorsek/ezd-client@micro-stacks/nextjs@micro-stacks/query@mies-co/next-lngwhitenose-projectutil-methods-lib@netoff/next-js-tailwind-nookies-consent@nextdapp/account@nauth0/server@nkey/ui-test@himalaya-ui/coretattooapp-sdksolo-requestrick-ui-packagessr-dark-modereidoecommerce@leandroluk/next-dark-mode@onr/auth@ordentco/addons-auth-provider@labx-ui/core@lava-x/next-js@lineuxyz/next-auth-server-side@ludo.ninja/api@therealcodekraft/kinow-frontend@visiture/shopify@paladen/sessions@orgasmo/orgasmo@smg-automotive/auth@types/nookiesac-next-redux-cookie-wrapper@zorp/browser@zorp/react@zhulu66/utils@webbyx/next-js@waveplay/stashy@wpro/magento@wpro/rlx@wpro/shopifyadmoonamplify-auth-next-cookie-storageamplify-auth-next-storage@zagrajmy/appauthscape01cm-new-layoutbit-auth-react@binamik/js-providers
2.5.2

3 years ago

2.5.1

3 years ago

2.5.0

3 years ago

2.4.1

3 years ago

2.4.0

4 years ago

2.3.2

4 years ago

2.3.1

4 years ago

2.3.0

4 years ago

2.2.4

4 years ago

2.2.3

4 years ago

2.2.2

4 years ago

2.2.1

4 years ago

2.2.0

4 years ago

2.1.1

4 years ago

2.0.8

5 years ago

2.0.6

5 years ago

2.0.5

5 years ago

2.0.4

5 years ago

2.0.3

5 years ago

2.0.2

5 years ago

2.0.1

5 years ago

2.0.0

5 years ago

1.2.0

5 years ago

1.1.2

5 years ago

1.1.1

6 years ago

1.1.0

6 years ago

1.0.7

6 years ago

1.0.6

6 years ago

1.0.5

6 years ago

1.0.4

6 years ago

1.0.3

6 years ago

1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago