Make cookie presistent even after browser shutdown/restart using Angular.js - javascript

I am using Angular for my project, and got into a problem with authentication. On successfull authentication user retrive a token from server, and as long user have this token he can access all the places where he need authentication (i thought its a best way to do this since i use MVC web API as backend, and i dont have sessions). Everything works fine, until i close down my browser, and start it up again $cookieStore and $cookies are empty after restart.
Does anyone have any idea how to make cookie presistent, or are there any smarter way of doing this?
Ive created a test controller with a testview where i have 2 buttons which set and load $cookie before restart it works, if i open a new window while the other one is still up its works too, but as soon i close everything down, coockies is empty.
$scope.Set = function () {
$scope.LoadedData = "test";
$cookies.myFavorite = 'oatmeal';
}
$scope.Load = function () {
var b = $cookies.myFavorite;
console.log("testasdasd" + $cookies);
$scope.LoadedData = $cookies.myFavorite;
}

There are 2 types of cookies: session cookie and persistent cookie.
Session cookie is in memory and only survives until you close the browser.
Persistent cookie will be saved into disc and will be expired based on the Expires property.
The decision to save the cookie as session or persistent is server side, not your client side javascript.
When you use .NET Forms authentication, you can use FormsAuthentication.GetAuthCookie to create a cookie, the second parameter determines if this is a session or a persistent cookie.

I know this question was already answered, but actually you CAN manage cookies persistence client side. Just $cookieStore.
Persistent cookie:
// from your controller
$cookieStore.put('auth_token', token);
// in your module
$http.defaults.headers.common.Authorization = $cookieStore.get('auth_token');
In the module, we are telling angular that we want to use this session everytime any page of our website it's loaded.
EDIT: You may be interested in HTML5 localstorage instead of cookies.

Related

how to find tab close and clear local storage

I am using onbeforeunload function in javascript but problem is that if browser is refresh then also clear local storage . I want to only clear local storage when browser close not refresh browser
window.onbeforeunload = function(e) {
localStorage.setItem('isLoggedIn', 'false');
};
You can use sessionStorage instead. It is automatically cleared when the browser is closed.
Example:
sessionStorage.setItem("isLoggedIn","true"); // Value will be set to null when browser is closed
You can be needed to learn about local storage, session storage, and Cookies. there are 3 options use for store data but it's one of the different another concept.
local storage store locally and it's permanent if you not remove this or clear browser.
session storage use for containing a status or a token or a user some information.
when you close the browser then session storage remove automatically. (note: if you went any running time you can change it like as logout).
Cookies is another powerful way to store data in the browser or client site. it also allows the time schedule or date. when expiring time or date then it's destroyed automatically.
there are 3 storage are the different their concept and work it's also different storage capacity each other.
Session storage operation:
sessionStorage.SessionName = "SessionData" ,
sessionStorage.getItem("SessionName") and
sessionStorage.setItem("SessionName","SessionData");
Cookie example simple operation:
you can also learn about more:
https://www.quora.com/What-is-the-difference-between-sessionstorage-localstorage-and-Cookies
https://developer.mozilla.org/en-US/docs/Mozilla/Gecko/DOM_Storage_implementation_notes
https://www.w3schools.com/js/js_cookies.asp
=== Thanks ===

save user session in localstorage in React server side application

In my app I want to save the user session_id in local storage. My app is written with React and Redux ( With server side rendering ). I fetch user session_id from Api. I want to save session_id while user is logged in to my app ?
How is the best solution for this ?
Can you share the code you currently have to understand your question a little better. From what I understood you want to maybe try the code below. In the else statement make the api request for the session id and then setItem with the session id that came from the api request. You will then have access to it with a variable called currentSessionId.
var currentSessionId;
if(localStorage.getItem('session_id')){
currentSessionId = localStorage.getItem('session_id');
} else {
localStorage.setItem('session_id','<session id>');
currentSessionId = localStorage.getItem('session_id');
}
Hope this helps!
Just save the session_id to local storage when you receive it from the server. Then in your application initialization file check if the local storage contains any session_id. If so, use that id to fetch user data.
As local storage is client side (browser) feature, you can't use it in backend.
Another option could be to save your session_id into cookie and read that cookie in server side. That way you could authenticate the user already in server side.

Do something when a session ends

basically i just need to do something when a session ends in javascript.
I have already tried
window.onbeforeunload = function ()
but is there a way to do it with cookies or something.
i have to do this is javascript because it is to be used for other sites not just mine so i cant do anything server side.
I think you want if all browser tabs of your site are closed?
var state=false;
setInterval(function(){
state=false;
window.postMessage("ami","*");
setTimeout(function(){
try{
if(state==false){
window.lonely();
}
}catch(e){}
},2000);
},5000);
window.addEventListener("message",function(e){
if(e.data=="ami"){
window.postMessage("no!","*");
}else if(e.data=="no!"){
state=true
}});
Use like this:
window.lonely=function(){
alert("im alone :(");
};
Based on your comment "use a session cookie for example when the window is closed and all session cookies are removed", have you considered using window.sessionStorage?
From it's page on MDN:
The sessionStorage property allows you to access a session Storage object for the current origin. 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.
(my emphasis added)
From what it sounds like you are trying to do, this may be exactly what you need.
NOTE: Do NOT use this for storing any authentication or other sensitive data.

Executing code when a session ends in sails.js

Using sails.js, is there a way to run a function when a user session expires or is finished? Some configuration to do in config/session.js?
I know exists session.destroy, which you can set a function to execute when the session is destroyed, but I need it to be a global unique function for the application.
The idea would be writing in db table the state of a user as offline, when it's session ends.
Thanks.
If you're asking if there is a way to see if a user's session has expired -
Yes! It depends on how you're storing the server-side component of the session. Remember, traditional sessions require 2 pieces to work correctly - something on the client side (a cookie for example) and something on the server side to remember the user. In Sails the server-side piece is stored in the data store specified in the adapter portion of the Session Config File. You can query this data-store (even if it's the default Memory Store) and look for all users that have expired sessions.
Going deeper...
If you're asking if there is a specific method that gets called when a user session expires, then no, that's not the way sessions work. Sessions are a "hack" to make HTTP stateful. They aren't an active/live thing in the way that if they die we are notified. A session is just a record (likely a database) with a long code and a date. When the user visits your site, they give you a code from their cookie and you verify against the record in your session database. If the record matches and hasn't expired, HURRAY! you know who they are and they continue with their request. If the record doesn't match or has expired, BOO!, prompt them to log in again.
Really jumping to conclusions now...
I presume from the last sentence that you're looking to try to monitor whether someone is logged in to track "active" users. I would suggest that sessions are a poor metric of that. With sessions I can log in to your site and then leave. Depending on the length of your session expiration (24 hours or 30 days are typical values) I would be shown as logged in for that entire time. Is that a really helpful metric? I'm not using using your site but you're showing me as "logged in". Furthermore I could come back on another device (phone or another browser) and I would be forced to log back in. Now I have 2 or more sessions. Which one is correct?
If you're trying to gauge active usage I would either use Websockets (they would tell you exactly when someone is connected/disconnected to one of your pages - read more here) or just have a "heartbeat" - Each time a user visits one of your pages that visit is recorded as last seen at. This gives you a rough gauge as to who is actively on the site and who hasn't done anything in, say, over an hour.
You can do this by adding policy to all route
for example add sessionAuth.js to policy folder :
module.exports = function(req, res, next) {
// If you are not using passport then set your own logic
if (req.session.authenticated) {
return next();
}
// if you are using passport then
if(req.isAuthenticated()) {
return next();
}
//make your logic if session ends here
//** do some thing /
};
add this lines to config/policies.js :
module.exports.policies = {
'*': 'sessionAuth'
}

How to create session inside Loopback app with an AngularJS client?

Here is my problem :
I'm creating a web app with loopback (great framework :) ) with an AngularJS client, everything works well but impossible to reload the page without being disconnected. This behaviour is normal, however I would like to persist the session with a "Remember me" checkbox and just avoid to be disconnect on page reload. The access token is stored in localStorage, I think I have to create a cookie on myself but the main point, how do I avoid disconnection ? And redirection to forbidden page. Then should I do this on server-side or client-side both ? I'm lost actually...
I did start from this application on github if you wish to have a better idea of the project:
https://github.com/strongloop/loopback-getting-started-intermediate
You shouldn't need to create a separate cookie to store the authToken if it's already in localStorage. The part you will need to modify is inside app.js, the .run() block, which checks for the existence of $rootScope.currentUser to determine if you're logged in, which will not be persisted across browser reloads.
The code creates $rootScope.currentUser in Auth.js. The .run() block of app.js simply checks for the existence of $rootScope.currentUser to determine if you are logged in.
So you'll need to change how you detect logged out state from simply checking for $rootScope.currentUser to attempting an actual call to User.getCurrent() or something. If you are logged in, the call will include the auth token in the headers, if not, you'll get a 401 status code response and you can redirect to the login page in that case.

Categories