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.

Answer 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.

Answer 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).