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.
Related
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
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
I have designed a site in ReactJS and have a number of tracking tools and session cookies embedded. Therefore due to the legalisations I need to get user consent first before I can enable any form of tracking. Besides GTM, I have facebook, HotJar and so on.
I am using 'react-cookie-consent' to run the cookie banner. I have managed to control all other cookies/tracking tools by creating functions and only execute them once user has give the relevant consent. I have done the same for GTM however it does not seem to be working properly.
I have imported import TagManager from "react-gtm-module" into my cookie page and put the following code in a function which only runs if user presses accept.
const tagManagerArgs = {
gtmId: "GTM-*******", // My GTMID
dataLayerName: "PageDataLayer"
};
TagManager.initialize(tagManagerArgs);
and have pasted the following code in each page under componentDidMount() function and have imported import TagManager from "react-gtm-module" as well.
const tagManagerArgs = {
dataLayer: {
page: "home", //Specific to each page
pagePath: "/home" //Specific to each page
},
dataLayerName: "PageDataLayer"
};
TagManager.dataLayer(tagManagerArgs);
The GTM is triggered once when the user presses the accept button and it appears it is only triggered for the page where the cookie consent banner is on and none of the other pages.
What I want is only when the user presses accept, to then enable the tracking on all pages.
Am I doing something wrong?
Update 01/11/2019
I am still waiting for an answer, not sure if I can repost the question and whether this edit bumps this post :)
I have the following code I execute in Chrome with Tampermonkey, which I use to login to digitalocean.com.
setTimeout (function() {
document.querySelector("input[type=submit]").click();
}, 3000);
For some reason, this code sometimes work and sometimes it doesn't: That is, sometimes I'm logged in and sometimes (most cases) I get DigitalOcean's 404 webpage.
My login details are already saved in local storage and appear on the form.
By principle, this problem can be reproduced by registering to DigitalOcean, installing Tampermonkey, and executing the code with it, with the match:
https://cloud.digitalocean.com/login*
Might something be missing to ensure human-like behavior in the eyes of the machine?
OK, it took some digging, but I see what's going on.
There is an authentication token in the form.
If the token is not what the server expects, it kicks you to a 404 error at https://cloud.digitalocean.com/sessions.
If your browser loads the login page from cache (usually because you got to it by clicking the "back" button in your browser) you'll be submitting an invalid token (the one you got back when the page was put in the cache).
Sometimes it's wrong for some other reason I haven't figured out.
To deal with the cache-loaded page issue
I'd edit your script check if the page was loaded from cache, and refresh the page instead of triggering the click event:
if (window.performance.navigation.type === 2)
{
location.reload();
} else {
document.querySelector("input[type=submit]").click();
}
The other issue is probably an issue with DigitalOcean's back-end
I'd recommend that you report the fact that their login page seems to occasionally get a bad authentication token, as the issue can intermittently be reproduced by clicking (with the mouse) on the "Log In" button of a freshly loaded copy of the page.
(I wouldn't mention the script or they'll blame it and then you'll be out of luck.)
In the mean-time
As a stop-gap until they fix their issue, you could make a new script matching https://cloud.digitalocean.com/sessions (it sends me to that page exactly, but add a * if it's needed) that sends you back if you came from the login page, and got a 404 error:
if (document.referrer.startsWith("https://cloud.digitalocean.com/login") && document.title.endsWith(" (404)"))
{
history.back();
}
Note that document.title.endsWith(" (404)") only works because the contents of their 404 page's <title> tag ends with (404).
It seems to be a bug in Tampermonkey as the reported behavior doesn't happen in Greasemonkey.
Anyway, 3D1T0R's answer provides an interesting workaround with the current situation (would thumb up if I could).
We have an angularJS/html5 site. While trying to log in to the site immediately after logout causing the home page to keep loading continuously and it doesnot proceed further. After we close the browser and then try to sign in after some time the page loads properly.
Any solutions.
Please help!
Have you considered using the Router to change your view after logging in or out? In the example below, I called the router to take the user to /home (which should be defined in your routes) after logging out.
logout(): void {
//do other logout stuff here
this.router.navigate(['/home']);
}
You can view the documentation here:https://angular.io/docs/ts/latest/tutorial/toh-pt5.html