Session Management in Angular+Web API application

Question

Here's what I am trying to do

1. I am creating a SPA in Angular.

2. All my Business Logic is written in Web API.

3. I am making http calls from Angular to REST APIs and getting Json data and binding it to Angular UI.

This is all working fine. Further I want to implement session maintenance in my application.

Once a user log in, I am calling another api to check if credentials are correct and API returns true or false, based on which Uesr is redirected to home page.

Now here I need to maintain user's session unless user log out. Now here's the way I know to do it.

Cookie-> I could create a cookie to maintain session but it would be risky and it could help with session hijacking.

Note: I am not talking about token authentication, that has completely different purpose I believe.

If you can suggest something related to may be using node.js or something in Angular which I am not aware of, that would be a great help.

If you want to suggest on the architecture I am following. that is also welcome.

Solution 1

As every one confirmed there's no way to securely save info on client side in angularjs. What I did for my web app was follow:

1. Whenever user launched my web app I fetched his/her ip credentials using https://freegeoip.net/json/.
2. Second step was to create a unique key using his/her Ip address (as this will be unique for each user)
3. Send this key in request parameters during login
4. On server side we checked user credentials and saved this key to validate future requests, also we generated a token to validate user session
5. On login response, we save generated token in localstorage.
6. Next time user launches app, we fetch token from localstorage and generate the unique key using IP. We send both to server and it validates if token is valid and associated with same unique key.
7. If user is still on same network the validation is successful else not.

Drawback

1. If user switches network or his IP address changes server considers he/she has logged out.

Solution 2

With most AngularJS apps, there is no concept of a session. There might still be authentication and some kind of token, but storing session information, like form contents between pages, is stored in the browser in ram, cookies, session storage or local storage.

the best way is local storage, you can use local storage using javascript & store data in variable

https://www.npmjs.com/package/angular-local-storage

Validate user from backend using API Call (dont forget to call API with token always) after that once API gives positive response, you store this data in your browser local storage (it is normal javascript, you can google it)

This is how session is maintained from front end.

As long as it remains in the browser, the user gets logged in, if he has not cleared the local storage or logged out.

When the client receives an HTTP status 401 unauthorized response from any REST API, the angular controller clean all the cookies and redirect the user to the login page. The server may send HTTP status 401 unauthorized response when the server has not received the app-token for some time (say 10 minutes).

Solution 3

Now this is an interesting question.

Since you use Angular, I assume you are familiar with the way services and factories work. They both act as a singleton meaning that there is only one instance at any point in time. This means that any time you store some data into a factory for example, it will be available in whichever controller you inject it effectively giving you state.

Imagine that you build your SPA in a very specific way. Most people don't dig too much into Angular and simply create a controller, access the scope, add methods and stuff in there and that's it, they're done.

Now imagine that you actually separate your code a bit. For anything that requires some functionality, you put that code into a service which you inject in whatever controller needs it. If you get some data and do some calculations, you store the result in the service and that data stays there. Of course, you can get rid of said data when the user logs out. Now, if the user hard refreshes the page with a ctrl-f5 then everything reloads and all the state saved up to that point is lost.

If you want to maintain state past a user hard refresh, you have to consider other alternatives.

You could use local storage which is an Html5 only thing which means support in modern browsers only.

But, one thing you always need to consider is that nothing you store on the client side will ever be truly safe simply because it lives on the client side which is not under your control.

If you don't like the idea of using local storage or cookie ( and I don't blame you for this ) you will have to introduce another layer where the session is actual stored and that would be a backend layer. Since you use dot net, you could create a simple MVC application, give it a few controllers which will probably mirror your web api one. Instead of calling the web api controller directly, you call the MVC one.

How does this help? Well Web Api is stateless, there won't be a session there since it makes no sense. But Mvc has Session and that's the one you can use.

So you add MVC, make your mvc controllers call the web api ones, they return JsonResult so they can be called the same way you would call a web api one and deal with the session, securely on the server side.

Choose whichever solution fits your bill most.

Solution 4

Cookies are the way to go. Session hijacking is always going to be an issue, but it can be mitigated. Use a long key for your session key. And use an HTTPS site.

Solution 5

I guess what you are trying to say is user context like in server side in Angular .

Angular is a Client side Language and nothing on the client side can help you preserve data .

Its totally upon the users discretion

What if he deletes the Cookies and cache , All the data in Local Storage and cookies is lost .

The things you can use to help have data across you application is Shared Services. or NGRX Mind it that if a user hard refreshes the page all the data is gone . So here you might need to use stuff like Angular Local storage or cookies.

The best design to go here will be to not use all of these just implement a shared service or a Ngrx suite and check if the user has logged out , if so redirect him to the login screen again. And make use of context in the server side.

Hope this helps you .

View more solutions