accessing session object in html 5 - javascript

I would like to know - how to implement a login in HTML5 where I want Login to be shown if session doesn't exists on first load and if any session with user data exists i want 'name' to be displayed instead of 'login'.

You cannot manage sessions without a server side language like PHP, Ruby, etc. HTML5 and JavaScript can only manage things on the user's side.

You should look at HTML5 Local Storage
https://www.w3schools.com/html/html5_webstorage.asp first. If this is not what you want then you have to use a server side language.
For using session object for login, you can do something like(PHP example):
1.Store the user's details in session object when user logs in via xyz.com/login
$_SESSION["username"] = "username";
2.When the user visits xyz.com next time, check if a value of a session object already exists.
if(isset($_SESSION["username"])){
// redirect to user profile etc.
}
else{
// show login page - xyz.com/login
}
For more info: https://www.w3schools.com/php/php_sessions.asp

Related

How to restore state while changing window.location.href

After a user enters credentials on the login page, a post request is sent to the web server, which sends a cookie (if successful). On the client side, simultaneously, write the user details to my global redux store. On successful authentication from the server, I call window.location.href = 'newURL'. This call reloads my app. Now the user info I stored to the global store is lost, and I am not able to display username which was enetred by the user. How can I access the user credentials?
Thanks in advance :)
As mentioned in comments.
You need to use either localStorage or sessionStorage to keep the data alive.
For eg
localStorage.setItem("user", {"name": "abc"});
Now, though you logged out your data will be there in localStorage and you get the data using
localStorage.getItem("user");
If you want to remove then
localStorage.removeItem("user") or window.localStorage.removeItem('user');
Same applies to sessionStorage as well

Find out If user is loged in (Laravel) in frontend

so I come to you with a simple question: how is laravel session relay working.
My use Case: I have a laravel site cached with a varnish like so :
every get request is made as the user is not logged in
any user related info if loaded via ajax after the user loaded the page.
My problem is that I need to know in my front end if a user is logged in.
Things that I noticed:
Laravel session is not accessible in js
Laravel session is there even if the user is not logged in
I also tried to set my own cookie on login and unset it in on logout, but it my cookie is randomly diapering while the user is still logged in.
If someone has any idea on how to find out if my user is logged in from the standard cookies I would be so grateful.
You can pass the data to JS like I'm showing in my repo. For example:
<input id="authenticated" type="hidden" value="{{ auth()->check() }}">
And then get the data which will be true or false:
let authenticated = $('#authenticated').val();
Alternatively, you could use an Ajax call and execute auth()->check() in a controller method.
You can use in JS var userCheck= " <?php echo Auth::check();?> "; , then check if userCheck is equal to one then user is logged In otherwise not.
you can generate a token whenever a user is logged in and send it to the front-end and save it in the cookie. The cookie can have and the expiry time of say 5 hours. If during these 5 hours, user sends some requests, then the token is refreshed and 5 hour time starts again. In case, no request comes to the backend it means user is not active and you can log him out.

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.

Firebase RememberMe functionality

My webapp allows different users to login in different tabs/browsers on the same machine with different credentials (using signInWithEmailAndPassword). I achieve this by calling firebase.initializeApp(config, 'appName'+new Date().getTime()) for each login
When the user closes the tab or reloads (in window.onbeforeunload) I call .auth().signOut() to log him out.
I now want to add a RemeberMe functionality to my app page, that is a tickbox that if (and only if) ticked, will allow following logins from the same machine and username without giving the password even if the machine was for example restarted in the meantime.
How can that be achieved ?
what I am thinking about is (when remember me is on) to generate a token on the client stored in a cookie and maintain a table on the db which links tokens to passwords, there are two problems with this, first of all the password is saved as is on the db which is bad and second the password needs to be sent back to the client which is also bad.
any better options ?
Starting with Firebase JS 4.2.0 you can now specify session persistence. You can login different users in multiple tabs by calling:
firebase.auth().setPersistence(firebase.auth.Auth.Persistence.SESSION)
And when the window is closed, the session is cleared.
For more on this, check https://firebase.google.com/support/release-notes/js#4.2.0 and https://firebase.google.com/docs/auth/web/auth-state-persistence
Just add a rememberMe checkbox to your login form with a reference variable(for an exmaple remember) and use firebase setPersistence like this,
firebase.auth().setPersistence(this.remember.checked ? fireauth.Auth.Persistence.LOCAL : fireauth.Auth.Persistence.SESSION)
(here I have used javaScript for the example)

How to hide some URL (pages) to a not logged user in AngularJs?

I'm about to create a simple website (to learn Angularjs v1) that displays advertisements and I want to display only 2 pages for the public:
1) page that have the advertisements
2) And a login page
When the user logged (the admin) he can see the other pages like createAd.html
Any clue please?
You could store this data in a cookie and read the cookie whether the user is logged in. And when the users logs out, of course destroy the cookie.
Another option would be to store it in a variable in a global service and just have a get in the service to retrieve the value of the cookie.
If using a factory you could simply use:
factory.getAuthToken = function () {
return _authToken;
};
If you use an authentication token.

Categories