Develop Reference

Best way to protect frontend pages with Json Web token?

I'm working on a website where the user needs to log in to view the content. I'm working with react for the frontend and i'm using node to develop the API. I'm trying to protect my pages with a json web token, this way once the user logs into, the server gives a jwt which the frontend asks for to let the user to continue navigating or otherwise redirecting him to the login.
I know the server needs to verify the token, and i know i can create a middleware and implementing it to my API routes to achieve this. But my question is, if in the page i want to display i don't need to call any API route how can i verify the token?
I mean, should i create a route only to verify the token? or there is better way to do it?
Any suggestion or code example is welcome.

I suggest to use backend for token verification it is easier to manage in long run and safer. For example , if you use hmacsha256 signature , you have to leak your private key to client side for token verification. For client side identity verification, i suggest work with server side rendering instead to limit access to the protected part of website.

Website hold user details

Using angularjs in the client , and c# in the server side.
I want to learn how can i create a website with users.
I know how to store the data in the db.
My real question is how the site remember the user session
After refreshing.
So the user dont need to login again.
Thanks guys.

Microsoft created a JWT (JSON Web Token) package for .NET Web API projects specifically for this purpose. And since you're using Angular.js, working with JSON is perfect.
There are plenty of tutorials for understanding how JWT works and securely saves a user's session like this one: https://scotch.io/tutorials/the-anatomy-of-a-json-web-token.
The idea is that your server sends your client/user a long encrypted string. The client saves it in their cookies and sends it to your server whenever you want to verify the user.
Most of the complicated details regarding encryption you don't need to worry about. Just follow the tutorials for setting up the exchange of the JWT tokens.

Back in the days, we use cookies to do this.
In the Restful html5 world of today, we can use several other options.
Websql, Localstorage, IndexedDB.
Probably you are using something like JWT to store an authentication token you use to make authenticated api calls.
The way to go, or as i do is store that token in localStorage and then, inject in every call to the api.
Then in the angular run section i check if the user is authenticated checking if i have the token stored, and if is not, send to the login page.
angular.module('Scope', ['ui.router', 'ngStorage'])
.run(function($localStorage, $state){
if (!$localStorage.authenticationToken) {
$state.go('login');
}
}
});
In this example, every time the app reloads, angular execute the run function, and checking if we have stored the token, if is not, send the user to the login webpage.

How to maintain login session across multiple tabs?

I am developing a website and i am having a problem in finding the best solution to maintain user login session.
Currently i am using Html5 web storage "session storage" to store whether user is logged in or not. But problem in this is that this only works in a single tab not across multiple tabs of a browser.
What should i use either Cookies or LocalStorage or i should maintain server side session and check every times a page loads on server whether the user is logged in or not ?
What is the best solution? please guide me.
I am using Node.js and mongodb in the backend and Angular and jquery in frontend.

First thing you must know is that sessions are made only for server-side not for client side. Second thing, if you want your user to not load everytime, try to save the data in user's cookies also don't think about it will require more time to load on server. Because sessions are only made for security purpose and i guess by storing them on client side you are not using that purpose. Also now major question is how to store them on the server side. Suppose your server goes down now all of your sessions will get deleted. Now to avoid that use some external data store like connect-mongo/connect-redis. redis is faster than mongo but if you want to use only memory store then search for memcached/cookie-sessions/jWT hope this answer helps :)

How to manage server user session within client side single page app

I've been fumbling around with different client side technologies, like AngularJS, EmberJS, even trying to use straight JQuery and figure out how to use ReactJS with it. That aside, my goal is to build a single page app using json in between the client and a Java Jersey 2 jax-rs back end api.
I have two stumbling blocks right now. Some info though..I am deploying my app as a WAR file in Jetty. My back end is java based. I am using only jquery in the client side as of now.
My main stumbling block is how to handle login, logout and session management. With an rest API and using ajax, I have login working, including it setting a cookie. My concern however is with a single page app, there is just the one index page, and if the user closes the browser, then reopens it to the index page while the cookie/session is still good, the user should be logged in, not see the outside (not logged in) page. I am unsure how to handle this, whether it be a jsp page, index.html with some templating library, etc. With JSP I can insert some scriplet code (against my better judgment). In the old days I'd include a header that would check for request.getSession().getAttribute("user") and if it was there..the user was logged in and using scriplet if() code I'd display a logged in header, instead of the non-logged in header. But I am in the belief there has got to be a better way to do this with todays client side JS frameworks.
The other stumbling block is the navigation and dynamic aspects. For example, when I was messing around with angular js, it was easy enough to use Welcome {{name}} and within the scope replace name with a json response value for the logged in user. In my current situation, I am not exactly sure how to best go about displaying dynamic bits like this with pure jquery other than using some sort of $("#elem-id").innerHtml="..." code within the response success method of an ajax call. As well, I am not quite sure how to handle navigation to different pages. My logged in site will have some drop down menus or links that will replace the content area with different varying amounts of content.
So first, what are some ways in a SPA to handle user sessions, in the case of a page reload, or close/crash browser restart.. to ensure the user is still logged in and direct them to the right page? Second, what sort of templating and routing/navigation options exist that don't require me to put a huge ton of code in my one index.jsp page?
Thank you.

If you're having a REST API as the back end, then you must have implemented oAuth as an authentication mechanism. That is, when your user logs in, using a username and a password, you exchange that data with an authentication token. This authentication token is sent your server with each and every API call and your backend validates this token before servicing the request. Clear so far?
What you could do is, when you obtain the access token, you can also obtain the access token expiration time from the server and store that data in your client side app. In localStorage maybe? And when your user closes the browser and reopens again, you can first check whether such access token is available (and not expired) before asking the user to log in. This should solve your first problem.
Secondly, if you're looking for a lightweight routing option, I recommend director.

I am building a similar application. OAuth is not mandatory. You can have normal sessions etc by hitting the jersey login endpoint and setting a session and a cookie "keepme" with the session if user wants to be persistently logged in. You can then have a jersey AuthFilter for example check if either there is a cookie with a valid session or an active session and keep the user logged in.
Your frontend application should have no say over this, just communicate with the server and if it doesn't get unauthorized access (from the AuthFilter) then continues otherwise it displays the login page.

difference between LoginToken and Session? node.js express connect

For example right here:
http://dailyjs.com/2011/01/10/node-tutorial-9/
https://github.com/alexyoung/nodepad/blob/master/models.js
There's something called a login token. I don't understand what the point of that is, isn't there already a session? There's a session cookie and a session entry in the database. Can't you check against that instead of LoginToken?
Thanks.

This isn't really a node.js question, since it applies just as much to websites written in any language, but here's an answer.
Session cookies are generally quite short-lived, and reference a whole bunch of information about what you're currently doing on a website, which you don't want to store for every user for weeks or months. The login token is a much longer-lived cookie that just records that this web browser is authorised to connect as this user without having to go through the login process.