Vicky X
Vicky X

Reputation: 1

how to prevent logout after i click refresh

so i use reactjs as frontend and express in backend , I use jwt in backend and i set token expiresIn 2h so when i logs in it returns me token and returns my user details in jwt.verify method too but after i log in i set token in cookies but once i refresh the page the token is still in cookies but it logs out

Reactjs code :

const [userName , setUsername]=useState(""); // Store user name from fetch 
                                                res data
const [isLoggedIn,setLogin]=useState(false)  // if fetch is true from 
                                              backend it set as True

useEffect(()=>{
async function fetchData(){
let res =await axios.post('https://localhost:3030/login',data,{
        withCredentials : true } );

if(res.status === 200){
    setUsername(res.data.name);
     setLogin(true);
}
fetchData()
},[])
export function Home(){
  return(
      { isLoggedIn ? <p> Welcome {userName}  </p> : <p> Please Login </p> }
)
}

so here if i logged in the p tag displays welcome user if login correctly but after i refresh it logs out as "Please login" but token is in cookie

backend :

app.use(cors({
    origin: 'http://localhost:3000',
    credentials: true
}))
app.use(cookieParser())
routes.post('/login', userLogin)

login.js


export const userLogin = async(req, res) => {
    let userVar;
    const { nameLogin, passwordLogin } = req.body;
    if (!nameLogin) {
        return res.status(400).send("Please Enter Name or Mail");
    }
    if (!passwordLogin) {
        return res.status(400).send("Enter your password");
    }

    const emailExp = /^[a-zA-Z][^\s@][a-zA-Z0-9_.-]+@[a-zA-Z0-9.-]+.[a-zA-Z]+$/
    const userExp = emailExp.test(nameLogin);
    try {
        if (userExp) {
            userVar = await UsersModel.findOne({
                email: nameLogin
            })
        } else {
            userVar = await UsersModel.findOne({
                name: nameLogin
            })
        }
        if (!userVar) {
            return res.status(400).send("Invalid username or mail");
        }
        const passwordMatch = await bcrypt.compare(passwordLogin, userVar.password);
        if (!passwordMatch) {
            return res.status(400).send("Invalid Password")
        }
        if (passwordMatch) {
            let token = generateJWTtoken(userVar._id);
            res.cookie('token', token, {
                httpOnly: true,
                maxAge: 2 * 60 * 60 * 1000,
                sameSite: 'lax',
                secure: false
            })

            console.log(req.cookies.token)
            return res.status(200).json({
                "name": userVar.name,
                "data": userVar
            })
        }


    } catch (e) {
        console.log(e)
        res.status(400).send("Error")
    }

}

jwtTokenGenerate:

 return jwt.sign({
            userID: id,
        }, process.env.SECRET_KEY, {
            expiresIn: '2h'
        })

jwtVerifyMiddleware :

import jwt from 'jsonwebtoken';
import { UsersModel } from '../Models/User.js';
import { configDotenv } from "dotenv";
configDotenv()
export const verifyJWTtoken = (req, res, next) => {
    let token = req.cookies.token
    if (!token) {
        return res.status(200).send("Might error at Login due to tokens");
    }
    try {
        jwt.verify(token, process.env.SECRET_KEY, async(err, decode) => {
            if (err) {
                return err
            }
            let user = await UsersModel.findById(decode.userID);
            if (!user) {
                return res.status(400).send("User not found");
            }
            req.user = user
            console.log(req.user) // displays the details
            next()
        })
    } catch (e) {
        console.log(e)
    }
}

so the console.logs the token and as well user data , so did i miss anything ?? it logs out if i hit refresh but cookie has token

Upvotes: 0

Views: 106

Answers (0)

Related Questions