Auth value is null after page refresh- React

I am developing an application and this is my code in react:

import React, { useState, useEffect } from "react";
import { useParams, useNavigate } from "react-router-dom";
import styles from "./ExercisePage.module.css";
import api from "../../apis/requestService";
import useAuth from "../../hooks/useAuth";

function Exercises() {
  const { setAuth, auth, loading } = useAuth();
  const { id } = useParams();
  const navigate = useNavigate();
  const [requests, setRequests] = useState([]);
  const [exerciseData, setExerciseData] = useState({
    weight: "",
    reps: "",
    exerciseId: id,
    date: null,
  });
  const [err, setErr] = useState("");
  const [popupStyle, showPopup] = useState("hide");

  const { weight, reps } = exerciseData;
  useEffect(() => {
    setExerciseData((prevData) => ({
      ...prevData,

      exerciseId: id,
      date: new Date(),
    }));

    api.getUserExercises(id).then((response) => {
      setRequests(response.data);
    });
  }, [id, auth.id]);

  const onInputChange = (e) => {
    setExerciseData({ ...exerciseData, [e.target.name]: e.target.value });
  };

  const onSubmit = (e) => {
    e.preventDefault();
    console.log("User id" + auth.id);
    const updatedExerciseData = {
      ...exerciseData,
      userId: auth.id,
      date: new Date(),
    };

    api
      .createRequest(updatedExerciseData)
      .then((response) => {
        if (response.data.id) {
          return api.getUserExercises(auth.id);
        } else {
          throw new Error("An error occurred while creating the request.");
        }
      })
      .then((response) => {
        setRequests(response.data);
        setExerciseData({ ...updatedExerciseData, weight: "", reps: "" });
      })
      .catch((error) => {
        console.error(error);
        setErr("An error occurred while creating the request.");
      });
  };

  const popup = () => {
    showPopup("exercise-popup");
    setTimeout(() => showPopup("hide"), 3000);
  };

  return (
    <div className={styles.wrapper}>
      <div className={styles.content}>
        {requests.length > 0 ? (
          requests.map((request, index) => (
            <div key={index} className={styles.requestBox}>
              <div className={styles.requestDetails}>
                <h2>{request.exercise.name}</h2>
                <p>{request.exercise.description}</p>
              </div>
              <img
                src={request.exercise.imageUrl}
                alt={request.exercise.name}
              />
              <div className={styles.requestInfo}>
                <p>Weight: {request.weight} kg</p>
                <p>Reps: {request.reps}</p>
                <p>Date: {new Date(request.date).toLocaleDateString()}</p>
              </div>
            </div>
          ))
        ) : (
          <p>No exercises assigned yet.</p>
        )}
      </div>
      <form onSubmit={(e) => onSubmit(e)} className={styles.exerciseForm}>
        <h1 className={styles.h1Text}>
          Set <br /> Exercise
        </h1>
        <div className={styles.inputContainer}>
          <label htmlFor="weight" className={styles.inputLabel}>
            Enter weight
          </label>
          <input
            id="weight"
            name="weight"
            type="number"
            value={weight}
            min="0"
            onChange={onInputChange}
            className={styles.inputBox}
          />
        </div>
        <div className={styles.inputContainer}>
          <label htmlFor="reps" className={styles.inputLabel}>
            Enter reps
          </label>
          <input
            id="reps"
            name="reps"
            type="number"
            value={reps}
            min="0"
            onChange={onInputChange}
            className={styles.inputBox}
          />
        </div>
        <button className={styles.exerciseBtn} type="submit">
          +
        </button>
        <div className={popupStyle}>
          <h3>{err}</h3>
        </div>
      </form>
    </div>
  );
}

export default Exercises;

When I refresh the page the id from auth is null. When I innitialy enter the page the id is fine but when I refresh it is set to null. This is the auth code:

// import { createContext, useState, useEffect } from "react";

// const AuthContext = createContext({});

// export const AuthProvider = ({ children }) => {
//   const [auth, setAuth] = useState({});
//   const [loading, setLoading] = useState(true);

//   useEffect(() => {
//     const storedToken = localStorage.getItem("accessToken");
//     const storedRoles = localStorage.getItem("roles");
//     const storedId = localStorage.getItem("userId");

//     if (storedToken && storedRoles) {
//       const token = JSON.parse(storedToken);
//       const roles = JSON.parse(storedRoles);
//       const id = JSON.parse(storedId);
//       setAuth({ token: token, roles: roles, id: id });
//     }
//     setLoading(false);
//   }, []);

//   const logout = () => {
//     // Clear the auth state
//     setAuth({});
//     // Remove the user data from local storage
//     localStorage.removeItem("accessToken");
//     localStorage.removeItem("roles");
//     localStorage.removeItem("userId");
//   };

//   return (
//     <AuthContext.Provider value={{ auth, setAuth, loading, logout }}>
//       {children}
//     </AuthContext.Provider>
//   );
// };

// export default AuthContext;
import { createContext, useState, useEffect } from "react";

const AuthContext = createContext({});

export const AuthProvider = ({ children }) => {
  const [auth, setAuth] = useState({});
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const storedToken = localStorage.getItem("accessToken");
    const storedRoles = localStorage.getItem("roles");
    const storedId = localStorage.getItem("userId");

    if (storedToken && storedRoles) {
      const token = JSON.parse(storedToken);
      const roles = JSON.parse(storedRoles);
      const id = JSON.parse(storedId);
      setAuth({ token: token, roles: roles, id: id });
    }
    setLoading(false);
  }, []);

  return (
    <AuthContext.Provider value={{ auth, setAuth, loading }}>
      {children}
    </AuthContext.Provider>
  );
};

export default AuthContext;

What is my mistake. Please help. I have no idea what to do or from where to start from.

Your code won't run as expected, Here's why:

When you are initiating a customHook (useAuth) you set an initial value of '{}' to auth object. So no matter what you saved before to this state/context. It will reset.

> The only thing that will persist is the id from useParameter()

If you wanna keep your data persistent I recommend using localStorage API.

Also you can read this link on how to keep your data persistence even after refresh.