When a user logged in as a customer, he stays in the system under his role even if he changes the browser tab. My client has credentials for admin as well as for the customer. Testing the app he logged as a customer and decided to open a new tab and login as an admin. When he did back on the first tab, surprisingly he had an admin view instead of the customer. My question is, is it possible somehow to detect state change when the other browser tabs were active? I am storing the token in localStorage for API calls, rest data (email, username etc) in redux.
Related
I have a ReactJS 17.0.2 application that made use of a couple of cookies to check if a user is logged in.
I use import { useCookies } from 'react-cookie';
If the user is logged in, he/she can open another tab in the browser, and being automatically recognized. Just the same as you are logged in multiple google pages: you log in just once.
The opposite for me is not true.
When the user logs out on one of the n pages, the cookies are deleted and the user is logged out on that page/tab.
But, in the other tabs, the user remains logged in.
I would like to use some mechanism to trigger the other page that the cookie has been deleted, so that I can force a logout to the other pages too.
I don't know how, but I'd like to have some kind of listener or hook able to be activated when the cookie has been deleted.
A kind of publishing/subscribing approach, applied to cookies ....
I found nothing. The only idea in my mind is to have a react timeout and then check once a second if the cookie yet exists, but I'm not enthusiast of this approach.
Any suggestion will be welcome.
I have a running react web application with protected routes. We are using JSON web tokens. We also using Redux saga. I want to provide a link and This need to be open in a new tab. But when the user logged in and click on the link, the link opens in a new tab but it asks user name and password again. I want to share the current state with the app in the new tab.
How are you storing the JWT? The most common way to do it is to store the JWT in cookies which automatically get sent on every request in the same domain. As long as the JWT is in a cookie, the cookie gets passed to the server, and the server checks for and uses the JWT payload, you should be able to open a new tab just fine.
I have an application that uses express.js as the server side language and React on the front-end. I use passport.js to authenticate routes in the server, using local login and facebook strategies (no JWT). I use express-session to manage the session, which seems straight forward ( or insufficient, which I do not know yet, for my case, as its work in progress ).
My requirement is to hide/show few links in the Header component.
i.e.,
Log In
Sign Up
should show up in index page, when user has not logged in, but hidden when he is logged in. Likewise, few links should be hidden when the user is not yet logged in.
What is the best wat to check this from the client? Making an AJAX call is not ideal, as I may have more use cases of checking if the user session is valid from the client.
I can see the default connect.sid cookie, which the express creates, but how do I make use of it, or is there a best way for the client to know that the user is already logged in.
You have a couple options. Here are some:
You can check for the presence of a different cookie in the browser, and use that as your metric for whether or not you are "logged in". Your browser won't know if the session has expired server side, so you still have to account for the fact that you may be logged out and not know it. Additionally, you have to be sure to clear this cookie when logging out and set it when logging in.
When starting, your browser can make a AJAX request to get the currently logged in user. This might be useful for all sorts of things, such as displaying the user's name when logged in. You really only need to do this once (on page load and on login), then keep track of the user's login state stored in memory. You mentioned you don't want to do this, but it is fairly common.
When loading the page, you can inject the user into the page. For example, when the page loads there will be a <script> tag containing window.currentUser = null or an object representing the user. You can use this to "bootstrap" the login state without needing an AJAX request.
To clarify, you can't use the connect.sid cookie by itself because this cookie is just the ID of the session, not the session data itself. Only the server knows the session data that's being stored for that user, not the client. You need some way aside from this cookie for the server to tell the client that it's logged in, and the client to keep track of that state.
If you want the client to know from the ID component itself, you'll want to look at token options like JWTs.
i have an angularjs app, i am using cookie based authentication in this app. when i login with two different users in same browser window in different tabs my cookie gets override. For example i am logged in with a user 'A' in first tab of browser and i am logged in with a user 'B' in second tab of the same browser window. when i check the cookie in browser, i only see the information about last logged in user. and when i try to navigate through application with user 'A' i get wrong data.
my question is is there any way i can skip login screen if a user is already logged in my application? so that no other user can login within same browser?
i tried to use resolve:in AngularApp.config and tried to redirect already logged in user to /home but still i am unable to achieve it. any thoughts?
Once the login is completed you can save the status of the application in session storage. Then when you are initialising the application you can check the value exits in session storage or not and redirect user to different page depend on the value. Make sure you are removing the stored value in session storage when user logout from the application
I am developing a angular app in which i need to give refresh ability to user. Using the localStorage i can get login details of the user. But if i login with another user in new tab then it override the login details of previous user.
So my question is that can we keep the localStorage tab wise?
Use sessionStorage:
sessionStorage is similar to Window.localStorage, the only difference is while data stored in localStorage has no expiration set, data stored in sessionStorage gets cleared when the page session ends. A page session lasts for as long as the browser is open and survives
over page reloads and restores. Opening a page in a new tab or window
will cause a new session to be initiated, which differs from how
session cookies work.