App.js code setting csrftoken with - Cookies.get('csrftoken')

import './App.css';
import React from 'react';
import { useState, useEffect } from 'react';
import axios from 'axios';
import Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';
import Cookies from 'js-cookie';

axios.defaults.xsrfCookieName = 'csrftoken';
axios.defaults.xsrfHeaderName = 'X-CSRFToken';
axios.defaults.withCredentials = true;

const client = axios.create({
  baseURL: "http://127.0.0.1:8000"
});

function App() {

  const [currentUser, setCurrentUser] = useState();
  const [registrationToggle, setRegistrationToggle] = useState(false);
  const [email, setEmail] = useState('');
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  useEffect(() => {

    // Retrieve the CSRF token from the cookie
    const csrfToken = Cookies.get('csrftoken');
    console.log("XXX /api/user csrfToken:" + csrfToken);    
    // Set the CSRF token in the Axios default headers
    axios.defaults.headers.common['X-CSRFToken'] = csrfToken;

    client.get("/api/user")
    .then(function(res) {
      setCurrentUser(true);
    })
    .catch(function(error) {
      setCurrentUser(false);
    });
  }, []);

  function update_form_btn() {
    if (registrationToggle) {
      document.getElementById("form_btn").innerHTML = "Register";
      setRegistrationToggle(false);
    } else {
      document.getElementById("form_btn").innerHTML = "Log in";
      setRegistrationToggle(true);
    }
  }

  function submitRegistration(e) {
    e.preventDefault();
    client.post(
      "/api/register",
      {
        email: email,
        username: username,
        password: password
      }
    ).then(function(res) {

      // Retrieve the CSRF token from the cookie
      const csrfToken = Cookies.get('csrftoken');
      console.log("XXX /api/register csrfToken:" + csrfToken);    
      // Set the CSRF token in the Axios default headers
      axios.defaults.headers.common['X-CSRFToken'] = csrfToken;      

      client.post(
        "/api/login",
        {
          email: email,
          password: password
        }
      ).then(function(res) {

        // Retrieve the CSRF token from the cookie
        const csrfToken = Cookies.get('csrftoken');
        console.log("XXX /api/login after register csrfToken:" + csrfToken);    
        // Set the CSRF token in the Axios default headers
        axios.defaults.headers.common['X-CSRFToken'] = csrfToken;

        setCurrentUser(true);
      });
    });
  }

  function submitLogin(e) {
    e.preventDefault();
    client.post(
      "/api/login",
      {
        email: email,
        password: password
      }
    ).then(function(res) {

      // Retrieve the CSRF token from the cookie
      const csrfToken = Cookies.get('csrftoken');
      console.log("XXX /api/login csrfToken:" + csrfToken);    
      // Set the CSRF token in the Axios default headers
      axios.defaults.headers.common['X-CSRFToken'] = csrfToken;

      setCurrentUser(true);
    });
  }

  function submitLogout(e) {
    e.preventDefault();
    client.post(
      "/api/logout",
      {withCredentials: true}
    ).then(function(res) {
      setCurrentUser(false);
    });
  }

  if (currentUser) {
    return (
      <div>
        <Navbar bg="dark" variant="dark">
          <Container>
            <Navbar.Brand>HS WIM</Navbar.Brand>
            <Navbar.Toggle />
            <Navbar.Collapse className="justify-content-end">
              <Navbar.Text>
                <form onSubmit={e => submitLogout(e)}>
                  <Button type="submit" variant="light">Log out</Button>
                </form>
              </Navbar.Text>
            </Navbar.Collapse>
          </Container>
        </Navbar>
          <div className="center">
            <h2>You're logged in!</h2>
          </div>
        </div>
    );
  }
  return (
    <div>
    <Navbar bg="dark" variant="dark">
      <Container>
        <Navbar.Brand>HS WIM</Navbar.Brand>
        <Navbar.Toggle />
        <Navbar.Collapse className="justify-content-end">
          <Navbar.Text>
            <Button id="form_btn" onClick={update_form_btn} variant="light">Register</Button>
          </Navbar.Text>
        </Navbar.Collapse>
      </Container>
    </Navbar>
    {
      registrationToggle ? (
        <div className="center">
          <Form onSubmit={e => submitRegistration(e)}>
            <Form.Group className="mb-3" controlId="formBasicEmail">
              <Form.Label>Email address</Form.Label>
              <Form.Control type="email" placeholder="Enter email" value={email} onChange={e => setEmail(e.target.value)} />
              <Form.Text className="text-muted">
                We'll never share your email with anyone else.
              </Form.Text>
            </Form.Group>
            <Form.Group className="mb-3" controlId="formBasicUsername">
              <Form.Label>Username</Form.Label>
              <Form.Control type="text" placeholder="Enter username" value={username} onChange={e => setUsername(e.target.value)} />
            </Form.Group>
            <Form.Group className="mb-3" controlId="formBasicPassword">
              <Form.Label>Password</Form.Label>
              <Form.Control type="password" placeholder="Password" value={password} onChange={e => setPassword(e.target.value)} />
            </Form.Group>
            <Button variant="primary" type="submit">
              Submit
            </Button>
          </Form>
        </div>        
      ) : (
        <div className="center">
          <Form onSubmit={e => submitLogin(e)}>
            <Form.Group className="mb-3" controlId="formBasicEmail">
              <Form.Label>Email address</Form.Label>
              <Form.Control type="email" placeholder="Enter email" value={email} onChange={e => setEmail(e.target.value)} />
              <Form.Text className="text-muted">
                We'll never share your email with anyone else.
              </Form.Text>
            </Form.Group>
            <Form.Group className="mb-3" controlId="formBasicPassword">
              <Form.Label>Password</Form.Label>
              <Form.Control type="password" placeholder="Password" value={password} onChange={e => setPassword(e.target.value)} />
            </Form.Group>
            <Button variant="primary" type="submit">
              Submit
            </Button>
          </Form>
        </div>
      )
    }
    </div>
  );
}

export default App;

settings.py for csrf

SESSION_COOKIE_HTTPONLY = True  # Default value is True, which is recommended
SESSION_COOKIE_SAMESITE = 'Lax' # Consider 'None' if strictly necessary and secure is set
SESSION_COOKIE_SECURE = False    # Non-Production Port 80
# SESSION_COOKIE_SECURE = True    # Set to True if you are using HTTPS

CSRF_COOKIE_HTTPONLY = False    # Should generally be False to allow JavaScript to read the value
CSRF_COOKIE_SECURE = False       # Non-Production Port 80
#CSRF_COOKIE_SECURE = True       # Set to True if you are using HTTPS

Network Logs:

1. start by entering http://localhost/ in browser
   App.js:33 XXX /api/user csrfToken:1qJvVnbBRdkPgGBYd8KLK7wDg7KOE2QU
   127.0.0.1:8000/api/user:1
   Failed to load resource: the server responded with a status of 403 (Forbidden)

2. register user
   XXX /api/register csrfToken:1qJvVnbBRdkPgGBYd8KLK7wDg7KOE2QU

App.js:83 XXX /api/login after register csrfToken:1qJvVnbBRdkPgGBYd8KLK7wDg7KOE2QU

3. reload http://localhost/ in browser
   XXX /api/user csrfToken:1qJvVnbBRdkPgGBYd8KLK7wDg7KOE2QU
   App.js:37 GET http://127.0.0.1:8000/api/user 403 (Forbidden)

4. login user
   after login
   XXX /api/login csrfToken:1qJvVnbBRdkPgGBYd8KLK7wDg7KOE2QU

5. reload http://localhost/ in browser
   App.js:33 XXX /api/user csrfToken:1qJvVnbBRdkPgGBYd8KLK7wDg7KOE2QU
   App.js:37 GET http://127.0.0.1:8000/api/user 403 (Forbidden)