The React website has following requirements:
Stay logged in when opening a page of the current website in new tab.
Log out if browser is closed and reopened.
Stay logged in on page refresh.
IE11 support :(.
If I keep auth token in sessionStorage, it meets the 2 requirement but not the 1.
If I use localStorage - 1 but not 2.
If I use:
window.onunload = () => {
localStorage.removeItem('authtoken');
};
it meets 1 and 2 conditions but it also clears storage when I refresh the page which shouldn't happen too!
This solution to check if the page is refreshing can't be used in IE11
https://stackoverflow.com/a/53307588/12994741
So how should I keep the auth token? Any way to make it? Maybe it's possible to prevent unload event on refreshing in React?
You can use session cookies.
It keeps its value when you open a same website in different tabs.
They are expired once the browser exits.
https://stackoverflow.com/a/8894280/15881471
It keeps its value on page refresh.
It works for IE11, though there are some caveats.
https://github.com/cmp-cc/vue-cookies/issues/29
Related
I have a simple react app, and I'm trying to redirect the user to a login page if they came directly without logging in.
App.js
useEffect(() => {
if (document.referrer === "") {
window.location.replace("../loginpage.php");
} else {
console.log("user came through login")
}
})
This works perfectly for Chrome and Edge.
The problem
When I refresh the pages, Mozilla directs me back to the Login page whereas Chrome and Edge stays on the same page.
For some reason document.referrer is not working as expected in Mozilla. Any help is appreciated. Thanks !
Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1324860.
Though what you are trying to do it quite odd from a user experience perspective. Usually you would only redirect to logon if they didn't have a session, and you would make an API call to check that server side.
Typically, relying on referrer for anything at all raises flags since the referrer header is easily manipulated by the client.
I have created an Azure AD authentication in ReactJs application. It is working fine whenever we are logging into it. However, after login and try to copy the home page url in another tab, it is not redirecting to the desired page. I console logged the isAuthenticated, it is showing as false. Home page is the login page actually.
Here is my code snippet of Home page to redirect to the Dashboard :
useEffect(() => {
console.log("isAuthenticated", isAuthenticated);
if(isAuthenticated){
navigate('dashboard');
}
}, [isAuthenticated])
Is there any way out to get isAuthenticated as true in another tab if the user is already logged in.
Thanks...
As juunas stated in the comment is correct, You might be using sessionStorage that is reason you facing this issue.
In sessionStorage where data is automatically deleted when a browser tab or window is closed, data in local storage has no default expiry. It's only deleted if you manually delete that data from the local storage either directly, via browser settings, or through your JavaScript code.
That means that data in a local storage persists even after a particular tab or browser window is closed
for more information you can refer this Link
For my Next.js application, I'm embedding a DocuSign form using an iframe. At times when I visit the page where that form exists, I'll sometimes see the Return URL page (which I should only be redirected to in the iframe after having signed the form) when the page initially loads. After a few seconds, the correct page with the form loads in the iframe.
This issue does not occur when first visiting the form page. This typically happens after I return to home page (or visit any other page) without having signed the form and then return to the form page. Has anyone else who worked with embedding DocuSign forms using an iframe experienced this issue? If so, could you please explain how you were able to resolve it?
It's possible the envelope is locked. Instead of getting an error you get redirected back.
Normally, that will happen when you already signed.
It's also possible the URL you generated has expired. You have to generate it when the user click, not ahead of time, it expires within a few minutes.
Using an iframe can cause problems. What is the reason you use an iframe?
I need to know, How can I load (redirect) to a particular page(using react-router) after browser session is closed? Suppose, i have logged in and visiting edit-profile page, but i closed the browser, if i open the website again, i could get logged in(as the user details are saved in local storage), but how can i redirect the user to edit-profile page.
I tried the below solution, but i wont have history session once the browser is shut.
What is the best way to redirect a page using React Router?
I'm facing a problem don't know how to solve. I would like to get some light here.
Given an AngularJS application that routes using the standard $routerProvider, and considering the fact that whenever an end user tries to access a private area he gets redirected to the register area, happens the following:
User just landed onto de application (didn't get logged in).
User goes to /profile
The application checks whether there is session info in the client or not.
The application redirects to /profile/register
User clicks on "Back" button of the browser and goes to /profile.
(Next step is number 3 again and again).
This happens because each time the application redirects using the $routerProvider, it pushes all routes in the browser history.
My question is, how can I jump the failed /profile access over the browser history? How can I tell the browser do not save this route under given conditions
like the user is logged in?
FAQ regarding history: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history
Supposing you're using the $location built-in service to redirect, you can use $location.replace() to replace the current history entry:
if (notLoggedIn) {
$location.url( "/profile/register" );
$location.replace();
}
Note that this will apply to current digest only, as noted in the API docs.