working on getting the session cookin from the popup

package.json

@@ -24,6 +24,7 @@
     "dotenv": "16.4.7",
     "express": "^4.21.2",
     "react": "^18.3.1",
+    "react-cookie": "^8.0.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.23.1",
     "react-rte": "^0.16.5",

src/components/Auth/Login.jsx

@@ -20,6 +20,8 @@ import { login } from "../../api/endpoints/apiService";
 import { API_CONFIG } from "../../config";
 import { GlobalDataContext } from "../../contexts/DataContext";
 import * as yup from "yup";
+import { useCookies } from 'react-cookie'
+
 
 const schema = yup.object().shape({
   username: yup.string().required().min(3),
@@ -33,6 +35,9 @@ const Login = () => {
   });
   const [errors, setErrors] = React.useState({});
   const [isLoading, setIsLoading] = React.useState(false);
+  // eslint-disable-next-line no-unused-vars
+  const [cookies, setCookie] = useCookies(['session']);
+
   const { setUserData } = React.useContext(GlobalDataContext);
   const navigate = useNavigate();
 
@@ -42,7 +47,17 @@ const Login = () => {
     let messageEvent = eventMethod === "attachEvent" ? "onmessage" : "message";
     eventer(messageEvent, function (e) {
       if (!e.data || !e.data.orcid_meta) return;
-      const { code, orcid_meta } = e.data;
+      // TODO: get the session cookie when here and add it to our domain.
+      // also store the user info once logged from here in the local storage for future usage.
+      const { code, orcid_meta, cookies } = e.data;
+      const _cookies = JSON.parse(cookies);
+      // create a cookie with the name "session" and the value of the session cookie
+      const sessionCookie = _cookies.find(cookie => cookie.name === "session");
+      if (sessionCookie) {
+        let expires = new Date()
+        expires.setTime(expires.getTime() + (2 * 24 * 60 * 60 * 1000)); // 2 days
+        setCookie('session', sessionCookie.value, { path: '/', domain: '.localhost', secure: false, sameSite: false, expires, httpOnly: false });
+      }
 
       if (code === 200 || code === 302) {
         setUserData({ name: orcid_meta.name, id: orcid_meta.orcid });

src/components/Auth/Register.jsx

@@ -120,7 +120,7 @@ const Register = () => {
         </Box>
       )}
       <Box className="authArea">
-        <Paper className="authPaper" sx={{ p: 5, maxWidth: 760, flexGrow: 1 }}>
+        <Paper className="authPaper" sx={{ p: 5, maxWidth: 528, flexGrow: 1 }}>
           <Link variant="text" to={"/"} className="authLink">
             <ArrowBack />
             Return to page

src/components/Header/index.jsx

@@ -220,7 +220,8 @@ const Header = () => {
 
     const handleMenuClick = (e, menu) => {
         if (menu.label === 'Log out') {
-            window.cookieStore.delete({name: 'session', domain: 'https://uri.olympiangods.org'});
+            // TODO: call logout endpoint {group}/priv/logout also
+            // TODO: flush the userinfo from the localstorage
             setUserData(null, null);
             navigate('/');
         }

src/components/HomePage.jsx

@@ -4,6 +4,8 @@ import Partners from "./Partners";
 import About from "./About";
 import BG from "../Icons/svg/background.svg";
 
+// TODO: check the localstorage for the user information and if set, then update the header and the context with the user info
+
 const HomePage = () => {
   return  <Box sx={{backgroundImage: `url(${BG})`, backgroundRepeat: 'no-repeat', backgroundPosition: 'right top'}}>
     <Banner />
@@ -12,4 +14,4 @@ const HomePage = () => {
   </Box>
 }
 
-export default HomePage
+export default HomePage

src/main.jsx

@@ -5,16 +5,19 @@ import worker from './mock'
 import ReactDOM from 'react-dom/client'
 import { AuthProvider } from './../mock/mutator/auth.context';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { CookiesProvider } from 'react-cookie';
 const queryClient = new QueryClient();
 
 worker.start();
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
-    <AuthProvider>
-      <QueryClientProvider client={queryClient}>
-        <App />
-      </QueryClientProvider>
-    </AuthProvider>
+    <CookiesProvider>
+      <AuthProvider>
+        <QueryClientProvider client={queryClient}>
+          <App />
+        </QueryClientProvider>
+      </AuthProvider>
+    </CookiesProvider>
   </React.StrictMode>,
 )

yarn.lock

@@ -1435,6 +1435,14 @@
   dependencies:
     "@types/unist" "^2"
 
+"@types/hoist-non-react-statics@^3.3.6":
+  version "3.3.6"
+  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.6.tgz#6bba74383cdab98e8db4e20ce5b4a6b98caed010"
+  integrity sha512-lPByRJUer/iN/xa4qpyL0qmL11DqNW81iU/IG1S3uvRUq4oKagz8VCxZjiWkumgt66YT3vOdDgZ0o32sGKtCEw==
+  dependencies:
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+
 "@types/json-schema@^7.0.11", "@types/json-schema@^7.0.4", "@types/json-schema@^7.0.7":
   version "7.0.15"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.15.tgz#596a1747233694d50f6ad8a7869fcb6f56cf5841"
@@ -2045,6 +2053,11 @@ cookie@^0.5.0:
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.5.0.tgz#d1f5d71adec6558c58f389987c366aa47e994f8b"
   integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==
 
+cookie@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-1.0.2.tgz#27360701532116bd3f1f9416929d176afe1e4610"
+  integrity sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==
+
 core-js@^2.4.0:
   version "2.6.12"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
@@ -3348,7 +3361,7 @@ highlight.js@^10.4.1, highlight.js@~10.7.0:
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.7.3.tgz#697272e3991356e40c3cac566a74eef681756531"
   integrity sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==
 
-hoist-non-react-statics@^3.3.1:
+hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -4474,6 +4487,15 @@ raw-body@2.5.2:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
+react-cookie@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/react-cookie/-/react-cookie-8.0.1.tgz#0d7f5112c9003b61c70d3d53f1f0a5b741e9f2e9"
+  integrity sha512-QNdAd0MLuAiDiLcDU/2s/eyKmmfMHtjPUKJ2dZ/5CcQ9QKUium4B3o61/haq6PQl/YWFqC5PO8GvxeHKhy3GFA==
+  dependencies:
+    "@types/hoist-non-react-statics" "^3.3.6"
+    hoist-non-react-statics "^3.3.2"
+    universal-cookie "^8.0.0"
+
 react-dom@^18.3.1:
   version "18.3.1"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.3.1.tgz#c2265d79511b57d479b3dd3fdfa51536494c5cb4"
@@ -5196,6 +5218,13 @@ undici-types@~5.26.4:
   resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.26.5.tgz#bcd539893d00b56e964fd2657a4866b221a65617"
   integrity sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==
 
+universal-cookie@^8.0.0:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/universal-cookie/-/universal-cookie-8.0.1.tgz#19263fcda6889978a081c610a90fc395eeaeec64"
+  integrity sha512-B6ks9FLLnP1UbPPcveOidfvB9pHjP+wekP2uRYB9YDfKVpvcjKgy1W5Zj+cEXJ9KTPnqOKGfVDQBmn8/YCQfRg==
+  dependencies:
+    cookie "^1.0.2"
+
 universalify@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.1.tgz#168efc2180964e6386d061e094df61afe239b18d"