I need some suggestion what to use instead of local storage

[Zainali005]

"use client"; import { useState, useEffect } from "react"; import Image from "next/image"; import LogoDark from "@/assets/logodark.png"; import { useForm } from "react-hook-form"; import { TextField } from "@mui/material"; import Link from "next/link"; import Button from "@mui/material/Button"; import { getUser } from "./actions"; import { useSession } from "next-auth/react"; import { useRouter } from "next/navigation"; import { ToastContainer, toast } from "react-toastify"; import "react-toastify/dist/ReactToastify.css"; import { useAuthStore } from "@/zustand/slice/authSlice";

export default function Page() { const [loading, setLoading] = useState(false); const [redirecting, setRedirecting] = useState(false); const router = useRouter(); const { setUser } = useAuthStore();

const { register, handleSubmit, formState: { errors }, } = useForm(); const { data: session } = useSession(); useEffect(() => { if (redirecting) { const role = sessionStorage.getItem("role"); if (role === "admin") { router.push("/AdminDashboard/home"); } else { router.push("/dashboard"); } toast.success("Signin Successfully", { autoClose: 1000 }); setLoading(false); } }, [redirecting, router]);

const onSubmit = async (data: any, e: any) => { e.preventDefault(); setLoading(true);

try {
  const userData = await getUser(data);
  console.log(userData);

  setLoading(false);
  if (userData && userData.token) {
    setUser(userData);
    localStorage.setItem("userId", userData.userId);
    localStorage.setItem("token", userData.token);
    sessionStorage.setItem("role", userData.role);
    document.cookie = `token=${userData.token}`;
    document.cookie = `userId=${userData.userId}`;
    document.cookie = `role=${userData.role}`;
    setRedirecting(true);
  } else {
    toast.error("Invalid email or password", { autoClose: 1000 });
  }
} catch (error) {
  setLoading(false);
  toast.error("An error occurred. Please try again.", { autoClose: 1000 });
}

}; useEffect(() => { const role = localStorage.getItem("role"); if (role) { if (role === "admin") { router.push("/AdminDashboard"); } else { router.push("/dashboard"); } } }, [router]);

if (!session?.user?.email) { return ( <>

{loading ? (

Signin..

) : ( "Sign In" )}

Don't have an account yet?{" "} sign-up

forgot your password

---

By clicking 'Sign In' you agree to our Term and have read and acknowledged our Privacy Statement.

  </>
);

} }

this is the code i have use local storage in local storage i have changed the role to admin its accessing the admin which is not the secure what to use instead of session or local storage ..

[usama7365]

Hi @Zainali005 !

It looks like you're working on a sign-in page and are concerned about the security of storing user roles in local storage. You’re right that local storage isn't the most secure place for sensitive information like user roles, as it can be accessed easily by JavaScript running in the browser.

Here’s a better approach you can use:

1. Use Cookies with HttpOnly Flag:

• Instead of storing sensitive data like roles in local storage, you can store this information in cookies with the HttpOnly flag. This flag makes the cookie inaccessible to JavaScript, which helps mitigate risks such as XSS (Cross-Site Scripting) attacks.
• You can set these cookies on the server side when the user logs in, and use them to determine the user's role on subsequent requests.

2. Use Server-Side Sessions:

• Another option is to use server-side sessions to store user data. With this approach, you keep a session ID in a cookie (which can be HttpOnly and Secure) and store the user data on the server.
• This way, the role and other sensitive information are not exposed to the client side. The server checks the session ID to retrieve the user data.

3. Implement Secure Token Handling:

• Use secure, signed JWT (JSON Web Tokens) if you want to keep the user role and other information client-side. Ensure these tokens are stored securely (preferably in cookies with the HttpOnly flag) and are only sent over HTTPS.

Here's an updated version of your onSubmit function with the server-side session approach:

const onSubmit = async (data: any, e: any) => {
  e.preventDefault();
  setLoading(true);

  try {
    const response = await fetch('/api/login', {  // Replace with your server endpoint
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    });

    const userData = await response.json();
    console.log(userData);

    setLoading(false);

    if (response.ok && userData && userData.token) {
      // Redirect based on user role
      const role = userData.role;
      if (role === 'admin') {
        router.push('/AdminDashboard/home');
      } else {
        router.push('/dashboard');
      }
      toast.success('Signin Successfully', { autoClose: 1000 });
    } else {
      toast.error('Invalid email or password', { autoClose: 1000 });
    }
  } catch (error) {
    setLoading(false);
    toast.error('An error occurred. Please try again.', { autoClose: 1000 });
  }
};

Make sure to update your server-side logic to set the HttpOnly cookies properly and manage user sessions securely.

Let me know if you have any more questions or need further assistance!

Best, Feline Predator