How can I stay the user in the same page?

Question

Every time I reload the my account page, it will go to the log in page for a while and will directed to the Logged in Homepage. How can I stay on the same even after refreshing the page?

I'm just practicing reactjs and I think this is the code that's causing this redirecting to log-in then to home

//if the currentUser is signed in in the application
export const getCurrentUser = () => {
    return new Promise((resolve, reject) => {
        const unsubscribe = auth.onAuthStateChanged(userAuth => {
            unsubscribe();
            resolve(userAuth); //this tell us if the user is signed in with the application or not 
        }, reject);
    })
};

.....

import {useEffect} from 'react';
import { useSelector } from 'react-redux';

 const mapState = ({ user }) => ({
    currentUser: user.currentUser
 });

 //custom hook
 const useAuth = props => {
    //get that value, if the current user is null, meaning the user is not logged in 
    // if they want to access the page, they need to be redirected in a way to log in
    const { currentUser } = useSelector(mapState);

    useEffect(() => {
        //checks if the current user is null
        if(!currentUser){
            //redirect the user to the log in page
            //we have access to history because of withRoute in withAuth.js
            props.history.push('/login');
        }
      
          // eslint-disable-next-line react-hooks/exhaustive-deps
    },[currentUser]); //whenever currentUser changes, it will run this code

    return currentUser;
 };

 export default useAuth;

when you are logging save the login token in local storage and every time you reload the page check that you have token or not if there is a token keep the use login if not then log out. — Akhil, Mar 10 '21 at 04:02
Oh do you have any references on how to save the token in local storage? — JS3, Mar 10 '21 at 04:05
You can store `currentUser` in localstorage after you get response of `getCurrentUser`? So, where are you calling `getCurrentUser`? — Ajeet Shah, Mar 10 '21 at 04:31
the Answer of your Question is here https://stackoverflow.com/questions/39097440/on-react-router-how-to-stay-logged-in-state-even-page-refresh — Akhil, Mar 10 '21 at 04:35

score 0 · Answer 1 · answered Mar 10 '21 at 16:41

You can make use of local storage as previously mentioned in the comments:

When user logs in

localStorage.setItem('currentUserLogged', true);

And before if(!currentUser)

var currentUser = localStorage.getItem('currentUserLogged');

Please have a look into the following example

Otherwise I recommend you to take a look into Redux Subscribers where you can persist states like so:

store.subscribe(() => {
// store state
})

score 0 · Answer 2 · answered Mar 12 '21 at 11:22

There are two ways through which you can authenticate your application by using local storage. The first one is :

set a token value in local storage at the time of logging into your application

localStorage.setItem("auth_token", "any random generated token or any value");

you can use the componentDidMount() method. This method runs on the mounting of any component. you can check here if the value stored in local storage is present or not if it is present it means the user is logged in and can access your page and if not you can redirect the user to the login page.

componentDidMount = () => { if(!localStorage.getItem("auth_token")){ // redirect to login page } }

The second option to authenticate your application by making guards. You can create auth-guards and integrate those guards on your routes. Those guards will check the requirement before rendering each route. It will make your code clean and you do not need to put auth check on every component like the first option.

There are many other ways too for eg. if you are using redux you can use Persist storage or redux store for storing the value but more secure and easy to use.

How can I stay the user in the same page?

2 Answers2