CODEWITHSUNDEEP
javascriptapiangularjsbrowsersingle-page-application
user605331
user605331

Reputation: 3788

Single page apps: auth token management and browser refreshes

When working on an Angular app, I have a single page app that communicates with a JSON web service for data.

A "login" in my Angular app is really just exchanging a username/password for a token. That token is passed as a header on all subsequent requests so the server can authorize them. This works great until the users refreshes their browser window of course (via refresh or leaving the "page" and returning).

Obviously one option would be to make the user enter their username/password again, but that seems like a good way to not have any users.

I can think of 4 options:

  1. Store token in a secure session cookie. (What I'm doing now. I am only using so the client can read. Not used or wanted on the server.)
  2. Store token using local storage of some kind. (Would be insecure and require manual expiration maintenance.)
  3. Prevent user from refreshing browser with some "onbeforeunload" code. (I don't like when I get the "are you sure you want to leave this page" messages and I assume others feel the same.)
  4. Include token as part of url. (Could make url's look big and messy. Possible physical security risk. Might make for extra work with bookmarking and expired tokens.)

Is option 1 the best option for this functionality? Is there something better to do than all of these?

Upvotes: 8

Views: 1134

Answers (1)

Alex Pop
Alex Pop

Reputation: 655

I think option 1 is the best one for your use case. All major web frameworks have support for this option.

In case you need to handle this manually you need to ensure these steps:

  • The web service will process the initial authentication request by creating and setting a secure authentication cookie. The auth cookie should be time based(only valid for a specific time interval) and its value should be a unique value if possible;
  • After the initial authentication request all subsequent requests will pass the authentication cookie with the request header automatically - this is handled by the browser.
  • The web service needs to handle cookie based authentication on subsequent requests by validating the cookie value and returning an error if the cookie has expired.
  • You need to ensure a client side global authentication handler captures any authentication exceptions and displays a friendly message to the user.

Upvotes: 2

Related Questions