CODEWITHSUNDEEP
javascriptangularjsauthenticationjwt
TonyW
TonyW

Reputation: 18885

Authentication in Angular: handling new tab or new browser window

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:

  1. My manager does not allow using localStorage 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.

  2. Because the problem 1, I switched to use sessionStorage 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 (401 error), because the app cannot find the JWT auth token in sessionStorage in the new tab/window.

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

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!

Upvotes: 10

Views: 7135

Answers (2)

wave
wave

Reputation: 61

Have you tried setting the JWT in the cookies of your domain. That way if the cookie is set it will be included in every GET/POST request you fire from your application and will resolve your new tab or new browser window issue.

Upvotes: 0

Reactgular
Reactgular

Reputation: 54801

This is more of a design flaw in your angular / server setup then a simple token problem.

Normally, when the user opens a link in a new window/tab that starts a clean new session. The URL would point to something that requires authentication, and since it's a new session the angular app should attempt to restore it. Either the user has signed in with remember me enabled, or they will be prompted for their username/password. After successfully authenticating the user the URL should be restored with a redirect.

So it works something like this.

http://example.com/page1 <-- user uses ctrl+click to open new tab
http://example.com/page2 <-- user doesn't have session
http://example.com/signin?url=/page2 <-- redirect to sign in with return path
http://example.com/page2 <-- user session restored after sign in

The signin step can be skipped wit the remember me feature was enabled by the user.

Store the session token in localStorage is the same as not having sessions. Since the token will be restored when the browser is restarted. What's the security in that?

Upvotes: 0

Related Questions