Next.js Discord

Discord Forum

Persisting data after clearing session

Unanswered
Mangoorange posted this in #help-forum
Open in Discord
MangoorangeOP
Scenario:
1. User1 logged in
2. User1 logged out
3. User3 logged in
4. Navbar showing name of user1
5. refresh browser
6. Navbar is now showing name of user3

How to prevent #4 from happening without doing a manual refresh of data? In my backend, I am clearing the session to log out the user (which also clears cookies in the developer tools). so, I assume that this is already sufficient since it the user is now prompted to sign in again).

Techstack:
- Next.js (frontend)
- Litestar (backend)

After Logout:

5 Replies

MangoorangeOP
After login:
Login code
 const [credentials, setCredentials] = useState({
    email: "",
    password: "",
  });

  const onChange = (e) =>
    setCredentials({
      ...credentials,
      [e.target.name]: e.target.value,
    });


export default function Login() {
  const router = useRouter();
  const [status, setStatus] = useState(null);

  async function handleLogin(e, credentials) {
    e.preventDefault();
    setStatus("loading");
    try {
      const res = await fetch(`http://localhost:8000/account/login`, {
        cache: "no-cache",
        method: "POST",
        credentials: "include",
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json",
        },
        body: JSON.stringify(credentials),
      });
      if (!res.ok) {
        const errorResponse = await res.json();
        console.log(JSON.stringify(errorResponse));

        throw new Error("Failed to login.");
      }
      router.push("/dashboard");
    } catch (error) {
      setStatus("error");
      console.log(error);
    }
  }


form just contains 
<form onSubmit={(e) => handleLogin(e, credentials)}>
... username input and password input
... button
</form>
Arinji
@Mangoorange show your navbar code. Specially the name part.
MangoorangeOP
function generateGreeting(userId) {
  const currentHour = new Date().getHours();
  let greeting;
  let name;
  if (userId.role === "admin") {
    name = userId.first_name;
  } else {
    name = userId.shortname;
  }

  if (currentHour >= 5 && currentHour < 12) {
    greeting = `Good morning, ${name}!`;
  } else if (currentHour >= 12 && currentHour < 18) {
    greeting = `Good afternoon, ${name}!`;
  } else {
    greeting = `Good evening, ${name}!`;
  }
  return greeting;
}

export default function Header() {
  const userId = useUserContext();
  const greeting = generateGreeting(userId);

  return (
    <nav>{greeting}</nav>
  );
}
This is the context provider
export const UserContext = createContext();

export const useUserContext = () => useContext(UserContext); 

export const UserProvider = ({ children, userId }) => {
  return (
    <UserContext.Provider value={userId}>
      {children}
    </UserContext.Provider>
  );
};


The userId only contains user data which is populated for every login