CODEWITHSUNDEEP
reactjs
David Bubeník
David Bubeník

Reputation: 503

Handling with external logouts in React app

I just finished my session (cookie) based login system in my React+Redux app. Then I realized that there is no way how I can check if the user logged out from another location (different chrome tab, removing the cookie, server session invalidation, expiration).

I was looking on Instagram's website what using React too. It seems if you log out in a different browser tab, you can still route to another place in-app until u hit some API fetching... Then website is automatically refreshed...

BUT, there is also some kind of system what realize that user is unlogged even when I do some actions whatnot require API calls.

So how to realize these situations in the best way? How do you handle them when developing.

Upvotes: 0

Views: 225

Answers (1)

Win
Win

Reputation: 5584

I'm not exactly sure how Instagrams Authentication works but I'd imagine that it's handled by middleware and when you request an API call, it will check to see if the user has an Auth Token stored in Cookies or whatever before initiating the API Request.

You can easily do this yourself by adding a Redux middleware that checks to see if the cookie is there before dispatching the next action. If it's not there you can return an error message to the user or redirect them or even dispatch a redux action that clears out all loaded data and then finally redirect them back to the login page.

The reason why Instagram is only locking the user when it hits an API call is that you can't really do anything dangerous to the users account if the cookie was deleted as you can't make changes to their account (commenting, posting, changing account settings etc.) without interacting with the API. Therefore, the middleware doesn't have to run every time an action has been dispatched which technically makes their application more performant.

Example Redux middleware

import Cookies from 'js-cookie';

const clientHasToken = store => next => action => {
    const authToken = Cookies.get('auth');
    
    if (!authToken) {
      // redirects user, but you could do anything here
      return window.location.href = '/login';
    }
  
    // if user has an auth token, proceed to the next action
    next(action);
};

export default clientHasToken;

Upvotes: 1

Related Questions