title: Authentication in Angular: handling new tab or new browser window
body: <p>My AngularJS-based app was designed to use localStorage for saving the JWT auth token returned from the backend after authentication. For every request (POST, GET, etc) going to the backend, the app uses an interceptor to piggyback the token to backend. This process has been working well until I encountered the following problems:</p>
  
  <ol>
  <li><p>My manager does not allow using <code>localStorage</code> for saving username and the JWT auth token, because they will persist in the browser unless he/she intentionally logs out of the app (which clears the cache from localStorage). If the user closes the browser without logging out, the cache will remain in localStorage.</p></li>
  <li><p>Because the problem 1, I switched to use <code>sessionStorage</code> to store the username and the JWT auth token instead, however, this causes further problems when the users right click certain links to open the app in a new tab or new browser window. In the new tab/window, the app cannot see that the user has been authenticated and requests going to the backend get denied (<code>401 error</code>), because the app cannot find the JWT auth token in sessionStorage in the new tab/window.</p></li>
  <li><p>If I cache the username and the JWT auth token as variables in the JavaScript code, the app would lose them if the user refreshes the browser.</p></li>
  </ol>
  
  <p>So these are my dilemmas in using JWT auth token in angular. Is there any better solutions to handle the requirements: not using localStorage and the app should keep using the same auth JWT token in a new tab or new browser window. Thanks!</p>