minor bugfixes for PR https://github.com/Mastermindzh/react-cookie-consent/pull/68

- extracted code which handles setting/getting cookies.
- added correct implementation of the legacy cookie fix according to the provided url
- added cookieSecurity attribute with default value based on runtime environment
- updated README
- ran builds

src/index.d.ts

@@ -2,8 +2,9 @@ import * as React from "react";
 import Cookies from "js-cookie";
 
 export interface CookieConsentProps {
-  sameSite?: "strict" | "lax" | "none";
   location?: "top" | "bottom" | "none";
+  sameSite?: "strict" | "lax" | "none";
+  cookieSecurity?: boolean;
   style?: object;
   buttonStyle?: object;
   declineButtonStyle?: object;

src/index.js

@@ -8,11 +8,11 @@ export const OPTIONS = {
   NONE: "none",
 };
 
-export const SAMESITE_OPTIONS = {
+export const SAME_SITE_OPTIONS = {
   STRICT: "strict",
   LAX: "lax",
   NONE: "none",
-}
+};
 
 class CookieConsent extends Component {
   constructor(props) {
@@ -65,16 +65,16 @@ class CookieConsent extends Component {
   }
 
   componentDidMount() {
-    const { cookieName, debug } = this.props;
+    const { debug } = this.props;
 
     // if cookie undefined or debug
-    if (Cookies.get(cookieName) === undefined || debug) {
+    if (this.getCookieValue() === undefined || debug) {
       this.setState({ visible: true });
-    }
 
-    // if acceptOnScroll is set to true and (cookie is undefined or debug is set to true), add a listener.
-    if (this.props.acceptOnScroll && (Cookies.get(cookieName) === undefined || debug)) {
-      window.addEventListener("scroll", this.handleScroll, { passive: true });
+      // if acceptOnScroll is set to true and (cookie is undefined or debug is set to true), add a listener.
+      if (this.props.acceptOnScroll) {
+        window.addEventListener("scroll", this.handleScroll, { passive: true });
+      }
     }
   }
 
@@ -107,15 +107,7 @@ class CookieConsent extends Component {
    * Set a persistent accept cookie
    */
   accept({ acceptedByScrolling = false }) {
-    const {
-      cookieName,
-      cookieValue,
-      expires,
-      hideOnAccept,
-      onAccept,
-      extraCookieOptions,
-      sameSite,
-    } = this.props;
+    const { cookieName, cookieValue, hideOnAccept, onAccept } = this.props;
 
     // fire onAccept
     onAccept({ acceptedByScrolling });
@@ -123,14 +115,7 @@ class CookieConsent extends Component {
     // remove listener if set
     window.removeEventListener("scroll", this.handleScroll);
 
-    if (sameSite === SAMESITE_OPTIONS.NONE) {
-      Cookies.set(cookieName, cookieValue, { expires, sameSite, secure: true, ...extraCookieOptions });
-
-      // Fallback for older browsers where can not set SameSite=None, SEE: https://web.dev/sameSite-cookie-recipes/#handling-incompatible-clients
-      Cookies.set(cookieName, cookieValue, { expires, secure: true, ...extraCookieOptions });
-    } else {
-      Cookies.set(cookieName, cookieValue, { expires, sameSite, ...extraCookieOptions });
-    }
+    this.setCookie(cookieName, cookieValue);
 
     if (hideOnAccept) {
       this.setState({ visible: false });
@@ -149,7 +134,6 @@ class CookieConsent extends Component {
       onDecline,
       extraCookieOptions,
       setDeclineCookie,
-      sameSite,
     } = this.props;
 
     // fire onDecline
@@ -158,13 +142,8 @@ class CookieConsent extends Component {
     // remove listener if set
     window.removeEventListener("scroll", this.handleScroll);
 
-    if (setDeclineCookie && sameSite === SAMESITE_OPTIONS.NONE) {
-      Cookies.set(cookieName, declineCookieValue, { expires, sameSite, secure: true, ...extraCookieOptions });
-
-      // Fallback for older browsers where can not set SameSite=None, SEE: https://web.dev/sameSite-cookie-recipes/#handling-incompatible-clients
-      Cookies.set(cookieName, declineCookieValue, { expires, secure: true, ...extraCookieOptions });
-    } else if (setDeclineCookie) {
-      Cookies.set(cookieName, declineCookieValue, { expires, sameSite, ...extraCookieOptions });
+    if (setDeclineCookie) {
+      this.setCookie(cookieName, declineCookieValue);
     }
 
     if (hideOnDecline) {
@@ -172,6 +151,50 @@ class CookieConsent extends Component {
     }
   }
 
+  /**
+   * Get the legacy cookie name by the regular cookie name
+   * @param {string} name of cookie to get
+   */
+  getLegacyCookieName(name) {
+    return `${name}-legacy`;
+  }
+
+  /**
+   * Function to set the consent cookie based on the provided variables
+   * Sets two cookies to handle incompatible browsers, more details:
+   * https://web.dev/samesite-cookie-recipes/#handling-incompatible-clients
+   */
+  setCookie(cookieName, cookieValue) {
+    const { extraCookieOptions, expires, sameSite, cookieSecurity } = this.props;
+
+    let cookieOptions = { expires, ...extraCookieOptions, sameSite, secure: cookieSecurity };
+
+    // Fallback for older browsers where can not set SameSite=None, SEE: https://web.dev/samesite-cookie-recipes/#handling-incompatible-clients
+    if (sameSite === SAME_SITE_OPTIONS.NONE) {
+      Cookies.set(this.getLegacyCookieName(cookieName), cookieValue, cookieOptions);
+    }
+
+    // set the regular cookie
+    Cookies.set(cookieName, cookieValue, cookieOptions);
+  }
+
+  /**
+   * Returns the value of the consent cookie
+   * Retrieves the regular value first and if not found the legacy one according
+   * to: https://web.dev/samesite-cookie-recipes/#handling-incompatible-clients
+   */
+  getCookieValue() {
+    const { cookieName } = this.props;
+
+    let cookieValue = Cookies.get(cookieName);
+
+    // if the cookieValue is undefined check for the legacy cookie
+    if (cookieValue === undefined) {
+      cookieValue = Cookies.get(this.getLegacyCookieName(cookieName));
+    }
+    return cookieValue;
+  }
+
   render() {
     // If the bar shouldn't be visible don't render anything.
     if (!this.state.visible) {
@@ -294,7 +317,7 @@ class CookieConsent extends Component {
 
 CookieConsent.propTypes = {
   location: PropTypes.oneOf(Object.keys(OPTIONS).map((key) => OPTIONS[key])),
-  sameSite: PropTypes.oneOf(Object.keys(SAMESITE_OPTIONS).map((key) => SAMESITE_OPTIONS[key])),
+  sameSite: PropTypes.oneOf(Object.keys(SAME_SITE_OPTIONS).map((key) => SAME_SITE_OPTIONS[key])),
   style: PropTypes.object,
   buttonStyle: PropTypes.object,
   declineButtonStyle: PropTypes.object,
@@ -327,6 +350,7 @@ CookieConsent.propTypes = {
   enableDeclineButton: PropTypes.bool,
   flipButtons: PropTypes.bool,
   ButtonComponent: PropTypes.elementType,
+  cookieSecurity: PropTypes.bool,
 };
 
 CookieConsent.defaultProps = {
@@ -336,9 +360,8 @@ CookieConsent.defaultProps = {
   acceptOnScroll: false,
   acceptOnScrollPercentage: 25,
   location: OPTIONS.BOTTOM,
-  sameSite: SAMESITE_OPTIONS.STRICT,
-  onAccept: () => { },
-  onDecline: () => { },
+  onAccept: () => {},
+  onDecline: () => {},
   cookieName: "CookieConsent",
   cookieValue: true,
   declineCookieValue: false,
@@ -358,6 +381,8 @@ CookieConsent.defaultProps = {
   disableButtonStyles: false,
   enableDeclineButton: false,
   flipButtons: false,
+  sameSite: SAME_SITE_OPTIONS.NONE,
+  cookieSecurity: location ? location.protocol === "https:" : true,
   ButtonComponent: ({ children, ...props }) => <button {...props}>{children}</button>,
 };