Skip to content

Use of Cookies

Overview

What You Will Learn In This Tutorial

  • How to add Cookies Library
  • How to use Cookies

A cookie is a piece of data from a website that is stored within a web browser that the script can retrieve at a later time.

To achieve this we use the JSCookie library as an example.

Get JSCookie on NPM https://www.npmjs.com/package/js-cookie.

How to add Cookies Library

Note before continuing

If you are using a single Script App you may import JS-Cookie library directly. For multiple Script Apps, the recommended approach is to bundle dependencies via a Dx Module.

Assuming we have a DX Module setup from the How-To guides above. We can easily add JS-Cookie and/or other js library by navigating to the dependency submodule folder of your scriptapp (i.e: ../DxModule/SubModuleReact/) and add the npm package by running the npm install command.

$ cd ~/my-project-path/DxModule/SubModuleReact
$ npm install js-cookie --save

Once finished installing you can make it available to your scriptapps by exporting it. You can do this in the submodule's modules-index.js.
(i.e: ../DxModule/SubModuleReact/modules-index.js)

export { default as Cookies } from 'js-cookie';

And redeploy your DX Module after installing and exporting the library.

How to use Cookies

Now we have successfully added JS-Cookie on DX Module. Let use it on our Script App.

We can use the JS-Cookie easily by adding DX Module as a dependency on your package.json file and importing it from DX Module on your Script App components. 

"dependencies": {
  "dxmodule": "file:../DxModule/SubModuleReact"
},

import { Cookie } from 'dxmodule';

Set

Cookies.set('<variable-name>', '<value>');

Get

Cookies.get('<variable-name>');

Remove

Cookies.remove('<variable-name>');

Example

Below is a sample code of a script app using JS-Cookie with React via DX Module.

On the login page we simply set the cookie to true on successful authentication. 

import { ReactV18, Cookies } from 'dxmodule';

const { React } = ReactV18;

function Dashboard() {
  function validateAndAuthenticate(email, password) {
    // here we process the actual authentication
    return 1;
  }

  function handleSubmit(event) {
    // removes any existing `wbi_authenticated` cookies first
    Cookies.remove('wbi_authenticated');

    // validate and authenticate credentials
    const authenticated = validateAndAuthenticate(
      event.target.elements.email.value,
      event.target.elements.password.value
    );

    // check if authenticated is true
    // set wbi_authenticated cookie to true then redirect to login page
    if (authenticated) {
      Cookies.set('wbi_authenticated', true);
      window.location.href = "dashboard";
    } else {
      console.log("Error on authentication. Please check Credentials")
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="email" name="email" />
      <input type="password" name="password" />
      <input type="submit" />
    </form>
  )
}

export default Dashboard;

  • First we need to import Cookies from DX Module along with the react. 

    import { ReactV18, Cookies } from 'dxmodule';

  • A validation and authentication function that process the checking of the users credentials. but for this tutorial we just returned it true. 

    function validateAndAuthenticate(email, password) {
  // here we process the actual authentication
  return 1;
}

  • On the handleSubmit function, this is where we set cookies but first we need to remove existing cookies. Then we call the validateAndAuthenticate function to check if the user inputted a correct credentials then create a cookie when after authentication. 

    function handleSubmit(event) {
  // removes any existing `wbi_authenticated` cookies first
  Cookies.remove('wbi_authenticated');

  // validate and authenticate credentials
  const authenticated = validateAndAuthenticate(
    event.target.elements.email.value,
    event.target.elements.password.value
  );

  // check if authenticated is true
  // set wbi_authenticated cookie to true then redirect to login page
  if (authenticated) {
    Cookies.set('wbi_authenticated', true);
    window.location.href = "dashboard";
  } else {
    console.log("Error on authentication. Please check Credentials")
  }
}

On the dashboard page. We simply load the dashboard component that checks and redirect to login page if the there is no wbi_authenticated or it was set to false onload. Also we have a logout button that removes and redirect to login page once the logout button is clicked.

import { ReactV18, Cookies } from 'dxmodule';

const { React } = ReactV18;
const { useEffect } = React;

function Dashboard() {
  function handleLogout(event) {
    Cookies.remove('wbi_authenticated');
    event.preventDefault();
    window.location.href = '/login'
  }

  useEffect(() => {
    const authenticated = Cookies.get('wbi_authenticated');
    if (authenticated !== 'true') {
      window.location.href = '/login'
    }
  }, []);

  return (
    <div>
      <h1>Dashboard</h1>
      <button type="button" onClick={handleLogout}>Logout</button>
    </div>
  )
}

export default Dashboard;

  • First we need to import Cookies from DX Module along with the react. We also need useEffect on this component so we need to destructure it from ReactV18 

    import { ReactV18, Cookies } from 'dxmodule';
const { useEffect } = React;

  • Then on a useEffect hook we get the cookie to check the authenticated. If it is set to false or the cookie is not existing we redirect it to login page. 

    useEffect(() => {
  const authenticated = Cookies.get('wbi_authenticated');
  if (authenticated !== 'true') {
    window.location.href = '/login'
  }
}, []);

  • Finally on the logout button. We create a handleLogout handler to remove the cookies then redirect it to login page when the logout button is clicked. 

    function handleLogout(event) {
  Cookies.remove('wbi_authenticated');
  event.preventDefault();
  window.location.href = '/login'
}