Using Session Cookies in React

Question

I have a question regarding session cookies in React.

Currently this is how I authenticate a user:

export function loginUser({ email, password }) {
    return function(dispatch) {
        axios.post(`${API_URL}/users/authenticate`, { email, password }, { withCredentials: true })
            .then((response) => {
                if (response.data.result_status == "success") {
                    localStorage.setItem("token", JSON.stringify(response.data.user))
                        dispatch({ type: AUTHENTICATE_USER }); 
                        browserHistory.push("/home");
                    })
                } 
            })
            .catch(() => {
                dispatch(authError('Incorrect Login Info'));
            });
    }
}

I send the email and password to a url. If the response.data.result_status == "success", then I set the user info (like their name and email) to a localStorage token and I call AUTHENTICATE_USER which sets another localStorage item to true.

Since I'm using localStorage, the data persists when I reload. And as long as the authenticated localStorage is not set to null, I stay on the system.

However, now we want to stay on the system as LONG as the cookie's session is not expired. Currently I stay on the system based on the token I set to local storage, not the cookie.

The backend is not using JWT, just a cookie. Is there a way for me to check if the cookie is still in session with axios?

You can't check for response cookie in XHR. You can compare cookies before and after request was made. — elmeister
– elmeister, Commented Apr 10, 2017 at 14:56
@elmeister thanks for the reply. How do I "check" for cookies? Would I need to set it as a token in localStorage? — lost9123193
– lost9123193, Commented Apr 10, 2017 at 15:18
I think you better start with developer.mozilla.org/en-US/docs/Web/API/Document/cookie — elmeister
– elmeister, Commented Apr 10, 2017 at 15:19
Is it your call to ${API_URL}/users/authenticate that set the session cookie ? — Julien TASSIN
– Julien TASSIN, Commented Apr 10, 2017 at 15:31
@JulienTASSIN yes. But currently I just set another token that tells me I'm authenticated into the system. I only use the session cookie with the {with Credential} to make my api requests. — lost9123193
– lost9123193, Commented Apr 10, 2017 at 15:54

Tom Van Rompaey · Accepted Answer · 2017-04-10 16:23:46Z

18

The only one who knows that the session from the cookie is still active is the API, therefor it's at this side you'll need to check whether the session from the cookie is still active. I assume you'll receive a 401 Unauthenticated when not logged in anymore so you could check the status code of the response with every request and remove the localStorage item when the session has expired.

I propose you'll use a response interceptor from Axios to check the status code:

axios.interceptors.response.use(function (response) {
    // Do something with response data
    return response;
  }, function (error) {
    // Do something with response error
    if (error.status === 401) {
      // DELETE YOUR AUTHENTICATE_USER item from localStorage 
    }
    return Promise.reject(error);
});

answered Apr 10, 2017 at 16:23

Tom Van Rompaey

3,58622 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

lost9123193 Over a year ago

Ah I see. So if the axios GET ad POSTS never returns a 401 error does that mean the cookie is still in session?

Brian Joseph Spinos Over a year ago

But what if a user manually fills in the localStorage with username and email, will that make them authenticated???

Tom Van Rompaey Over a year ago

The server is managing the authentication. If a user manually fills in the localStorage AUTHENTICATE_USER but the cookie is invalid then the API will return a 401 Unauthenticated and above function will delete AUTHENTICATE_USER item from localStorage.

Joshua Oluikpe Over a year ago

This really helped

Collectives™ on Stack Overflow

Using Session Cookies in React

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related