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;

Chrome Console Logs - notice csrfToken is different from login response

Network Logs:

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)

register user
XXX /api/register csrfToken:1qJvVnbBRdkPgGBYd8KLK7wDg7KOE2QU

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

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

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

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)

Chrome Network - api user - FORBIDDEN

Request URL:
http://127.0.0.1:8000/api/user
Request Method:
GET
Status Code:
403 Forbidden
Remote Address:
127.0.0.1:8000
Referrer Policy:
strict-origin-when-cross-origin
Access-Control-Allow-Credentials:
true
Access-Control-Allow-Origin:
http://localhost
Allow:
GET, HEAD, OPTIONS
Connection:
close
Content-Length:
58
Content-Type:
application/json
Cross-Origin-Opener-Policy:
same-origin
Date:
Sat, 09 Mar 2024 22:54:34 GMT
Referrer-Policy:
same-origin
Server:
gunicorn
Vary:
Accept, Cookie, Origin
X-Content-Type-Options:
nosniff
X-Frame-Options:
DENY
Accept:
application/json, text/plain, */*
Accept-Encoding:
gzip, deflate, br
Accept-Language:
en-US,en;q=0.9
Connection:
keep-alive
Host:
127.0.0.1:8000
Origin:
http://localhost
Referer:
http://localhost/
Sec-Ch-Ua:
"Not A(Brand";v="99", "Google Chrome";v="121", "Chromium";v="121"
Sec-Ch-Ua-Mobile:
?0
Sec-Ch-Ua-Platform:
"macOS"
Sec-Fetch-Dest:
empty
Sec-Fetch-Mode:
cors
Sec-Fetch-Site:
cross-site
User-Agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36

Chrome Network - login - OK but why is the csrftoken different

Request URL:
http://127.0.0.1:8000/api/login
Request Method:
POST
Status Code:
200 OK
Remote Address:
127.0.0.1:8000
Referrer Policy:
strict-origin-when-cross-origin
Access-Control-Allow-Credentials:
true
Access-Control-Allow-Origin:
http://localhost
Allow:
POST, OPTIONS
Connection:
close
Content-Length:
52
Content-Type:
application/json
Cross-Origin-Opener-Policy:
same-origin
Date:
Sat, 09 Mar 2024 22:55:27 GMT
Referrer-Policy:
same-origin
Server:
gunicorn
Set-Cookie:
csrftoken=rsyLvHLLNAIumReGxLa63PONPM3klYIq; expires=Sat, 08 Mar 2025 22:55:27 GMT; Max-Age=31449600; Path=/; SameSite=Lax
Set-Cookie:
sessionid=iwimaxew48tmdptw3pdnfxzats4bt93b; expires=Sat, 23 Mar 2024 22:55:27 GMT; HttpOnly; Max-Age=1209600; Path=/; SameSite=Lax
Vary:
Accept, Cookie, Origin
X-Content-Type-Options:
nosniff
X-Frame-Options:
DENY
Accept:
application/json, text/plain, */*
Accept-Encoding:
gzip, deflate, br
Accept-Language:
en-US,en;q=0.9
Connection:
keep-alive
Content-Length:
52
Content-Type:
application/json
Host:
127.0.0.1:8000
Origin:
http://localhost
Referer:
http://localhost/
Sec-Ch-Ua:
"Not A(Brand";v="99", "Google Chrome";v="121", "Chromium";v="121"
Sec-Ch-Ua-Mobile:
?0
Sec-Ch-Ua-Platform:
"macOS"
Sec-Fetch-Dest:
empty
Sec-Fetch-Mode:
cors
Sec-Fetch-Site:
cross-site
User-Agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36

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

screenshots of clearing browser cache and network logs https://imgur.com/a/3Aly1In