Chrome removing third party cookies

David — Sat, 29 Jun 2024 21:41:08 +0000

I was working on authentication and when I inspected my cookie in my client and I saw this warning from google chrome [insert image here] that 3rd party cookies are been deprecated and will be blocked in the future. They are working to stop 3rd party tracking via cookies google blog thereby creating tracking protection.In my case I was hosting the backend and the frontend on separate servers. The frontend is hosted on vercel, while the backend on render, so when the backend sends the cookie to the client since they are not on the same server hence different domain an article explaining, the cookie will be treated as a 3rd party cookie.

Cookie prefix

The solution I implemented was from reading mdn documentation mdn_doc. I added a prefix __Host- to the cookie name. __Host- is called a cookie prefix. There are two types; __Host- and __Secure-.
a. __Host- means that the cookie is domain-locked, when you set a cookie with this header prefix it is accepted if it's marked with the Secrue attribute, was sent from a secure origin https, does not include a Domain attribute and has the Path set to '/'.

So my code looks like this now. After modifying my cookie options, the warning did not show again because.

const cookieOptions = {
    maxAge: 60 * 60 * 24 * 30 * 1000, // 30 days
    httpOnly: true, // prevents client scripts from accessing the cookie
    secure: process.env.NODE_ENV === "production", // the cookie should be sent over secure https connection
    sameSite: process.env.NODE_ENV === "development" ? "Lax" : "None",
    path: "/",
}

res.cookie(process.env.NODE_ENV === "development"
? "sage_warehouse_token":"__Host-sage_warehouse_token",'refreshToken',cookieOptions)
.header("Authorization", 'accessToken')

If anyone encountered this same issue I would love to know how they resolved it, I am learning backend development with express.js, which is fun. I am currently working on an e-commerce application to solidify my knowledge as I learn new concepts.

If you are interested in learning backend development and you don't want to do it alone you can checkout HNG where you will participate in tasks with peers and ask for help from mentors as you go along in your tech journey, they also have a premium version where you can earn a certificate and it also comes with some perks.

# Create a simple Date Range Picker in React.

David — Fri, 26 May 2023 04:00:00 +0000

video

Instantiate a new project

$ npm create vite@latest

Configure the app with the following:-

Project name: calendar-app

Framework: React

Variant: JavaScript


$ cd calendar-app

$ npm install

$ npm run dev

# to start the development server 
#open the development server in your browser
# mine is at http://localhost:5173/

Open your newly created app in your preferred editor.
For vs-code users in the project directory run $ code . it will open your application in vs-code.
Remove all unneccasary files from the scaffolded project and your project should look like the screenshot below

#app.js

import './App.css'



function App() {

  return <>welcome</>

}

export default App

For our project we will be making use of the react-date-range package

from your app/directory run

npm i react-date-range react-date-range

this will add the package to your app dependencies.

we would also be using the date-fns package so

from your terminal again run

npm install date-fns date-fns

Inside your /src directory create a folder called components, inside the components folder, create an empty file singleCalendar.jsx, you can do all these from the bash terminal.

$ cd src && mkdir components
$ cd components && touch singleCalendar.jsx

open the new file singleCalendar.jsx and import the <DateRange /> component

import { DateRange } from 'react-date-range'

export const SingleCalendar = () => {

  return (

    <div>

      <DateRange />

    </div>

  )

}

then import the SingleCalandar into App.jsx your code should look like this

import './App.css'

import { SingleCalendar } from './components/singleCalendar'

function App() {
  return (
    <div>
      <SingleCalendar />
    </div>
  )
}

export default App

Next, we would import css from 'react-date-range' for styling. Add the following code to your main.jsx file

import 'react-date-range/dist/styles.css'
import 'react-date-range/dist/theme/default.css'

You can remove all the default styling that comes with Vite.

When you are importing styles for a component, you should put the styles in the topmost component, so that you can use the same styles across other places in your app.

Your main.jsx should look like this


import React from 'react'

import ReactDOM from 'react-dom/client'

import App from './App.jsx'

import './index.css'

//Add styles for the calendar app

import 'react-date-range/dist/styles.css' // main style file
import 'react-date-range/dist/theme/default.css'

ReactDOM.createRoot(document.getElementById('root')).render(

  <React.StrictMode>

    <App />

  </React.StrictMode>

)

Good job getting here so far 👏

Let's add a container where our calendar result will be viewed, we would be using an input element to store the calendar value.


import { DateRange } from 'react-date-range'

export const SingleCalendar = () => {

  return (

 <div className='container'>

      <DateRange className='calendarStyle' />

      <div>

        <input type='text' className='single-calendar-input' />

      </div>

    </div>

  )

}

Then let us style the input container,

create a calendar icon
style the input container

create a calendaricon file and the add the following jsx to the file.
I copied this code from heroicons

export const CalendarIcon = () => {
  return (
    <svg
      xmlns='http://www.w3.org/2000/svg'
      fill='none'
      viewBox='0 0 24 24'
      strokeWidth={1.5}
      stroke='currentColor'
      className='w-6 h-6'
    >
      <path
        strokeLinecap='round'
        strokeLinejoin='round'
        d='M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z'
      />
    </svg>
  )
}

next, add the css style

note: I have included some classes in the styles for some elements that have not been created yet.


#  index.css

*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
}

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  padding: 5rem;
}

.calendarStyle {
  border: 1px solid #eee;
  font-family: poppins;
  border-radius: 1.5rem;
  z-index: 999;
  position: relative;
  background-color: #fff;
}

.icon {
  height: 1.6rem;
  width: 2rem;
}

input {
  height: 100%;
  width: 90%;
  border: none;
  outline: none;
}

.single-calendar-input {
  height: 4rem;
  width: 35rem;
  border-radius: 0.5rem;
  border: 1px solid #ddd;
  padding: 0 10px;
  font-weight: 500;
  color: #686868;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
}

.element-container {
  position: relative;
}

.dropdown {
  position: absolute;
  top: 50px;
  left: 0px;
}

.dropdown.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: 500ms ease;
}

.dropdown.inactive {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-20px);
  transition: 500ms ease;
}

And also update the singleCalendar component,

import { DateRange } from 'react-date-range'
import { CalendarIcon } from '../assets/calendaricon'

export const SingleCalendar = () => {
  return (
 <div className='container'>
      <div>
        <div className='single-calendar-input'>
          <input type='text' />
          <div className='icon'>
            <CalendarIcon />
          </div>
        </div>
      </div>
      <DateRange className='calendarStyle' />   
    </div>
  )
}

Your page should look like this now

Nice job so far 👍

Let's start working on the functionalities

we handle the calendar value with useState
we will handle the date format
we will set an event listener on the input to open the calendar when clicked
we will close the calendar when any part of our page is clicked apart from the calendar component

Handle the calendar state


# singleCalendar.jsx

import { useState } from 'react'

import { DateRange } from 'react-date-range'

import { CalendarIcon } from '../assets/calendaricon'


export const SingleCalendar = () => {

  const [state, setState] = useState([

    {

      startDate: new Date(),

      endDate: new Date(),

      key: 'selection',

    },

  ])


  return (

    <div className='container'>

      <DateRange

        className='calendarStyle'

        onChange={(item) => setState([item.selection])}

        ranges={state}

        showSelectionPreview={false}

        editableDateInputs={false}

        showMonthAndYearPickers={false}

        showDateDisplay={false}

        rangeColors={['#4C988E', '#4C988E', '#000000']}

        direction='horizontal'

      />

      <div className='single-calendar-input'>

        <input type='text' />

        <div className='icon'>

          <CalendarIcon />

        </div>

      </div>

    </div>

  )

}

if you console.log({state}) you will see an array of your current selected date range.

Next, we will set an event listener on the input to open the calendar when the input element is clicked

hide the calendar component
show the calendar component when I click on the input element

Let's go,


# singleCalendar.jsx

import { useState } from 'react'

import { DateRange } from 'react-date-range'

import { CalendarIcon } from '../assets/calendaricon'



export const SingleCalendar = () => {

  const [open, setOpen] = useState(false)

  const [state, setState] = useState([

    {

      startDate: new Date(),

      endDate: new Date(),

      key: 'selection',

    },

  ])



  console.log({ state })



  return (

    <div className='container'>

      <div className='element-container'>

        <div className={`dropdown ${open ? 'active' : 'inactive'}`}>

          <DateRange

            className='calendarStyle'

            onChange={(item) => setState([item.selection])}

            ranges={state}

            showSelectionPreview={false}

            editableDateInputs={false}

            showMonthAndYearPickers={false}

            showDateDisplay={false}

            rangeColors={['#4C988E', '#4C988E', '#000000']}

            direction='horizontal'

          />

        </div>

        <div className='single-calendar-input'>

          <input type='text' readOnly onClick={() => setOpen(!open)} />

          <div className='icon'>

            <CalendarIcon />

          </div>

        </div>

      </div>

    </div>

  )

}

Your app should now be hidden and will toggle the visible/hidden state when the input element is clicked.

Show the value of the `DateRange` state in the input element


import { useState } from 'react'

import { DateRange } from 'react-date-range'

export const SingleCalendar = () => {

  const [open, setOpen] = useState(false)

  const [state, setState] = useState([

    {

      startDate: new Date(),

      endDate: new Date(),

      key: 'selection',

    },

  ])

  return (

    <div className='container'>

      <div className='element-container'>

        <input

          type='text'

          className='single-calendar-input'

          onClick={() => {

            setOpen(!open)

          }}

++          readOnly

++          value={`${state[0].startDate} - ${state[0].endDate}`}

        />

        <div className={`dropdown ${open ? 'active' : 'inactive'}`}>

          <DateRange

            className='calendarStyle'

            onChange={(item) => setState([item.selection])}

            ranges={state}

            showSelectionPreview={false}

            editableDateInputs={false}

            showMonthAndYearPickers={false}

            showDateDisplay={false}

            rangeColors={['#4C988E', '#4C988E', '#000000']}

            direction='horizontal'

          />

        </div>

      </div>

    </div>

  )

}

You will see the unformatted date value inside the input element

Format the date inside the input element


import { useState, useEffect } from 'react'

import { DateRange } from 'react-date-range'

import { CalendarIcon } from '../assets/calendaricon'

import { format } from 'date-fns'



export const SingleCalendar = () => {

  const [open, setOpen] = useState(false)

  const [state, setState] = useState([

    {

      startDate: new Date(),

      endDate: new Date(),

      key: 'selection',

    },

  ])


  const [formatDate, setFormatDate] = useState({

    startDate: new Date(),



    endDate: new Date(),

  })


  useEffect(() => {

    setFormatDate((prev) => {

      return {

        ...prev,



        startDate: format(state[0].startDate, 'dd/MM/yyyy'),



        endDate: format(state[0].endDate, 'dd/MM/yyyy'),

      }

    })

  }, [state])


  // console.log({ state })

  return (

    <div className='container'>

      <div className='element-container'>

        <div className={`dropdown ${open ? 'active' : 'inactive'}`}>

          <DateRange

            className='calendarStyle'

            onChange={(item) => setState([item.selection])}

            ranges={state}

            showSelectionPreview={false}

            editableDateInputs={false}

            showMonthAndYearPickers={false}

            showDateDisplay={false}

            rangeColors={['#4C988E', '#4C988E', '#000000']}

            direction='horizontal'

          />

        </div>

        <div className='single-calendar-input'>

          <input

            type='text'

            readOnly

            onClick={() => setOpen(!open)}

            value={`${formatDate.startDate}-${formatDate.endDate}`}

          />

          <div className='icon'>

            <CalendarIcon />

          </div>

        </div>

      </div>

    </div>
  )
}

you may be wondering why I did not use the format method directly inside my component, the reason is because of an error caused by using format method inside the input element to directly format the value but it will throw an error .

Finally, handle click outside so that when I click outside the component or the body of the page the calendar will close


# singleCalendar.jsx

import { useState, useEffect, useRef } from 'react'

import { DateRange } from 'react-date-range'

import { CalendarIcon } from '../assets/calendaricon'

import { format } from 'date-fns'



export const SingleCalendar = () => {

  const [open, setOpen] = useState(false)

  const [state, setState] = useState([

    {

      startDate: new Date(),

      endDate: new Date(),

      key: 'selection',

    },

  ])


  const [formatDate, setFormatDate] = useState({

    startDate: new Date(),

    endDate: new Date(),

  })

  useEffect(() => {

    setFormatDate((prev) => {

      return {

        ...prev,



        startDate: format(state[0].startDate, 'dd/MM/yyyy'),



        endDate: format(state[0].endDate, 'dd/MM/yyyy'),

      }

    })

  }, [state])



  // console.log({ state })



  // handle click outside

  const calendarRef = useRef()



  useEffect(() => {

    const handler = (e) => {

      if (!calendarRef?.current.contains(e.target)) {

        setOpen(false)

      }

    }



    document.addEventListener('mousedown', handler)



    return () => {

      document.removeEventListener('mousedown', handler)

    }

  })



  return (

    <div className='container'>

      <div className='element-container' ref={calendarRef}>

        <div className={`dropdown ${open ? 'active' : 'inactive'}`}>

          <DateRange

            className='calendarStyle'

            onChange={(item) => setState([item.selection])}

            ranges={state}

            showSelectionPreview={false}

            editableDateInputs={false}

            showMonthAndYearPickers={false}

            showDateDisplay={false}

            rangeColors={['#4C988E', '#4C988E', '#000000']}

            direction='horizontal'

          />

        </div>



        <div className='single-calendar-input'>

          <input

            type='text'

            readOnly

            onClick={() => setOpen(!open)}

            value={`${formatDate.startDate}-${formatDate.endDate}`}

          />

          <div className='icon'>

            <CalendarIcon />

          </div>

        </div>

      </div>

    </div>

  )

}

The complete source code can be found here

DEV Community: David