In my project I'm using normal HTML for front-end and Django for back-end. There I have a login system.
I have two questions on that:
When the user logs-in how do I detect it in HTML and change the Login button to show Log out.
How do I maintain this changes across pages. So, that when I navigate to a different page after login it keeps showing the logout button.
Don't suggest me react. I have come a long way from where I can change
my technology stack for this project.
You can use Session Storage for storing the login state of the page for the current session only.
sessionStorage.setItem('isLoggedIn', true);
Fetching the Login Status while displaying the button :
var isLoggedIn = sessionStorage.getItem('isLoggedIn');
if(isLoggedIn) {
//code for logged-in users
}
Points to know about Session Storage :
A page session lasts as long as the browser is open, and survives over page reloads and restores.
Opening a page in a new tab or window creates a new session with the value of the top-level browsing context, which differs from how session cookies work.
Opening multiple tabs/windows with the same URL creates sessionStorage for each tab/window.
Closing a tab/window ends the session and clears objects in sessionStorage.
You can use localStorage to save as a variable such as isLoggedIn that will persist across different routes and on refreshes. Example when you want to save
window.localStorage.set("isLoggedIn", "true");
When you want to check if they're logged in
const isLoggedIn = window.localStorage.get("isLoggedIn");
Related
I am working on a project. Where my requirement is that, if admin is logged in and he want to customise his frontend site, then he make changes accordingly and click on preview where he check his changes in new window tab using iframe. But my problem is that, because admin is logged in the same browser, so when he access his frontend site in new tab with iframe. then that site also shown the admin panel. Because admin is already logged in . I tried to open it in private window but unable to find any solution for that. Have any one know the solution? Thanks in advance!
One way would be to use sessionStorage to store your user sessions and manage authentication and authorization. Every time you open a new tab, it's treated as a new session and the login is not transferred.
SessionStorage is similar to LocalStorage but is bounded to a window and its lifecycle. You can find more details about it below:
https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage
I'm new to react and I wanna know how to store a string like a JSON Web Token in the browser after user logs in...?
And also how to remove when user logs out?
When the component mounts or in the constructor, you can check to see if the user's browser has this data already using localstorage.getItem('webToken') and/or set it using localstorage.setItem('webToken', token). To clear it on logout you could remove it by using localstorage.removeItem('webToken').
See local storage docs
It should be noted that users may not click log out, but instead just leave or close the page. This means it is possible that the local storage item will persist on the next page load. Since local storage does not expire, this could pose potential issues.
I am using JWT token with msal for user authentication. Once user is logged in then we store the JWT token in the localStorage and on logout we clear the localStorage along with msal loguut.
But i wanted to force logout the user on the browser is closed.So for this i have to clear the localStorage once the browser is closed.
I tried to use onbeforeunload & onunload method for this but this methods get called on page refresh also.
- tried to use sessionStorage but this cause user to login on each tabs cos of its tab specific scope.
I tried following code
componentDidMount() {
window.addEventListener("beforeunload",this.forceLogout,false)
}
componentWillUnmount() {
window.removeEventListener("beforeunload",this.forceLogout,false)
}
forceLogout(){
localStorage.clear();
}
Note: after msal login redirect back to application we refresh the page because of using HashRouter
If you use the session cache storage option in MSAL.js then the tokens will be cleared by the browser when it is closed.
https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/383c2e3089f139daaaaf7b81a80bc8c47b6c1273/lib/msal-core/README.md#cache-storage
However take care if you have multiple windows/tabs open of your app as the browser probably clear until all instances are closed.
I have a project written in perl-dancer and angular. Im using google as a openId system.
Some of my pages have an edit grid with a save button. In order to avoid loosing unsaved data on session(session created from perl-dancer) expire, I have an angular interceptor which listens to 401 server errors and opens an angular modal holding the "google login" button(this is triggered on server request after session expire).
I have set the opening of google form on a new tab instead of redirect from original page in order to avoid loosing the possibly unsaved data.
On successful google authentication the new tab redirects to the project homepage and the original stays with the open modal holding the "google login" button.
Ok now the new tab can be closed and on the original window the modal closed and the unsaved data is still there.
But this poor solution as result of not being allowed to embed the google login form or similar seems as a terrible solution from the user experience point of view.
Solutions, suggestions, help?!
One suggestion would be to check $state (or some other service) in the interceptor so you could set a flag in localStorage that indicates user has data being processed.
Then have a special route for this situation that just tells user to close the window and keep editing/saving in the previous window they have open
There would then be several different ways within the app start up you could check localStorage for this flag in order to redirect to that special route.
Within controller of that route clear the localStorage flag. You could even use localStorage events to close the modal in previous window automatically
On my struts2 application, User redirects to print page and clears cookies(or session timed out let us say), and on click of print button instead redirecting to login page it is creating new session. I checked in logs, it is going in HttpSessionListener and creating new session leading to toggle back on same page.
I am using Applet based printing.I have interceptors which will check is session is not available it will redirect to login page but in this case it is not coming in interceptor.
How I can avoid this and redirected to login page..?