To read a session cookie received from the server in a React.js app, you can use JavaScript's document.cookie property. Here's how you can do it:

1. Login and Receive the Session Cookie:
   When you make a successful login request using fetch(), the server should send back a session cookie in the response. Make sure your server is configured to send cookies with the response. You typically don't need to do anything special in your React code for this; it's handled by the browser.
2. Access and Read the Cookie in React:
   After the session cookie is received, you can access and read it using JavaScript's document.cookie property. You can do this in your React component where you handle the login response.
   For example:
   ​​​​// Handle the login response
   ​​​​fetch('your_login_endpoint', {
   ​​​​  method: 'POST',
   ​​​​  // Other login request options
   ​​​​})
   ​​​​  .then((response) => {
   ​​​​    if (response.ok) {
   ​​​​      // Login successful
   ​​​​      const sessionCookie = document.cookie;
   ​​​​      console.log('Session Cookie:', sessionCookie);
   
   ​​​​      // You can further parse the cookie if needed
   ​​​​      const cookieArray = sessionCookie.split(';');
   ​​​​      const cookieObject = {};
   ​​​​      cookieArray.forEach((cookie) => {
   ​​​​        const [name, value] = cookie.trim().split('=');
   ​​​​        cookieObject[name] = value;
   ​​​​      });
   ​​​​      console.log('Parsed Cookie:', cookieObject);
   
   ​​​​      // Now you can store or use the session cookie as needed
   ​​​​    } else {
   ​​​​      // Handle login error
   ​​​​      console.error('Login failed');
   ​​​​    }
   ​​​​  })
   ​​​​  .catch((error) => {
   ​​​​    // Handle network or other errors
   ​​​​    console.error('Login error:', error);
   ​​​​  });
   

   In this code:
   • We make the login request using fetch().
   • When the response is received and it's OK (status code 200), we access the session cookie using document.cookie.
   • The session cookie is read from the document.cookie property using the split() and find() methods. The split() method is used to split the cookie string into an array of individual cookies, and the find() method is used to find the cookie with the name "session".
   • You can further parse the cookie if needed. We split it into an object for easier access.
   • Finally, you can store or use the session cookie as needed in your React application.

Please note that working with cookies directly like this can be error-prone, especially for security-sensitive tasks like authentication.
It is often recommended to use a library or a higher-level authentication solution for handling user sessions and cookies securely.

Here are a couple of alternatives given below using libraries:

1. js-cookie Library:
   js-cookie is a popular JavaScript library that simplifies cookie management. It provides an easy and convenient way to read, write, and delete cookies.
   To use js-cookie in your React app, you can install it via npm or yarn:

   ​​​​npm install js-cookie
   ​​​​# or
   ​​​​yarn add js-cookie
   

   Then, you can import and use it in your React components:

   ​​​​import React, { useEffect } from 'react';
   ​​​​import Cookies from 'js-cookie';
   
   ​​​​function MyComponent() {
   ​​​​  useEffect(() => {
   ​​​​    // Read a cookie
   ​​​​    const sessionCookie = Cookies.get('sessionCookie');
   ​​​​    console.log('Session Cookie:', sessionCookie);
   
   ​​​​    // You can also set and delete cookies using js-cookie
   ​​​​    // Cookies.set('myCookie', 'cookieValue');
   ​​​​    // Cookies.remove('myCookie');
   ​​​​  }, []);
   
   ​​​​  return <div>Your component content</div>;
   ​​​​}
   
   ​​​​export default MyComponent;
   

   Using js-cookie makes it easier to work with cookies and provides additional features like expiration dates and domain/path specification.

2. Universal Cookie Library:
   universal-cookie is another library that simplifies cookie handling and is designed to work on both the client and server sides.
   Install it in your project:

   ​​​​npm install universal-cookie
   ​​​​# or
   ​​​​yarn add universal-cookie
   

   Example usage in a React component:

   ​​​​import React, { useEffect } from 'react';
   ​​​​import { Cookies } from 'react-cookie';
   
   ​​​​const cookies = new Cookies();
   
   ​​​​function MyComponent() {
   ​​​​  useEffect(() => {
   ​​​​    // Read a cookie
   ​​​​    const sessionCookie = cookies.get('sessionCookie');
   ​​​​    console.log('Session Cookie:', sessionCookie);
   
   ​​​​    // You can also set and delete cookies using universal-cookie
   ​​​​    // cookies.set('myCookie', 'cookieValue');
   ​​​​    // cookies.remove('myCookie');
   ​​​​  }, []);
   
   ​​​​  return <div>Your component content</div>;
   ​​​​}
   
   ​​​​export default MyComponent;
   

   universal-cookie is particularly useful in server-side rendering (SSR) scenarios where you need to work with cookies on both the server and client sides.

These libraries provide more robust and convenient ways to manage cookies in your React application, making it easier to handle tasks like reading, writing, and deleting cookies securely and efficiently.