0

We've got a legacy system which we want to bring over to Angular. Since the system is big we will go step by step and bring over module by module.

Now until we're done with the whole System we will likely need to switch between the Angular SPA and the legacy system since Angular is not really playing well inside the app as I read.

Now what do you do about auth? On the SPA side will be JWT and a corresponding endpoint to translate that into an authenticated user is there. On the legacy side the session exists.

But how do I handle switching the context (between SPA and Legacy) to use both, JWT and session cookie? My guess is to store the JWT token AND the cookie and keep both systems inside the Legacy public folder, authenticate via Angular, send and store both types.

Is there a better way to achieve this?

hogan
  • 1,434
  • 1
  • 15
  • 32
  • I am a bit unclear about what you want to achieve. Is your Angular SPA also communicating with some kind of back-end? And this back-end is separate from your legacy system, but you want to keep user authentication in both back-ends? Do both of the systems support session/cookies and JWT? – Daniel H.J. Nov 21 '17 at 22:51
  • No, legacy is the backend and one system. Currently MVC with existing session based authentication. We added API routes for SPA authentication and since the system is huge we cant work for 10 years to get everything into SPA but need both systems to work with the same underlying auth. Angular is a new system which consumes the api built in the legacy system. I hope that makes it clearer. – hogan Nov 21 '17 at 23:49
  • I see. So your SPA is pure front-end and consumes authentication API provided by your legacy MVC system, correct? Your legacy has its own implementation of front-end and you would like to preserve the authentication information across the two systems? – Daniel H.J. Nov 22 '17 at 00:14
  • Yes, correct. Both systems need to be able to switch between each other as more and more functionality is transferred to the SPA (users will need to be able to reach both of course). In the end a pure JWT is sufficient (or whatever best practice will be at that point). In the meanwhile we will have both systems for a while linking to each other. – hogan Nov 22 '17 at 00:20

1 Answers1

0

Sorry that I have not been able to respond sooner. One way I can think of for doing this is to embed an iframe in each of your Angular SPA and legacy system that loads a receiving page from the other system. What this receiving page does is to log the user in/out of the other system. Also, you do not want to store JWT or anything sensitive in a public folder; use localStorage for JWT and it should be sufficient to keep the session at client level.

For information about implementing iframes you can refer to https://jcubic.wordpress.com/2014/06/20/cross-domain-localstorage/

Let's look at the following scenarios. Depending on how you implement your authentication these may need some modification to apply:

Scenario 1: User Logged Into Angular App

When a user logs into your Angular SPA, the authentication through legacy API returns a JWT and is stored in localStorage. Every time the user makes a request through your Angular app the JWT is sent through your Authorization header so the user is identified.

Now, when the JWT is returned after logging in, send a login message to the embedded iframe (pointing to your legacy receiving page) such that the receiving page creates the user session/cookie on your legacy domain. You should set the cookie to have the same expiration time as your JWT.

Scenario 2: User Logged Out of Angular App

Remove JWT from your localStorage. Send a message to your iframe such that the user's session cookie is destroyed at your legacy domain.

Scenario 3: User Logged Into Legacy

You will need to modify the login a bit. When the user logs into your legacy system, you need to also generate a JWT and return it to the page when the login is successful. Send a message through your embedded iframe (now pointing to your Angular app) to save your JWT in your localStorage in your SPA domain.

You do not have to create user session at the Angular side as the JWT is sufficient, but keep in mind the the user session expiration time should be in sync with your JWT expiration.

Scenario 4: User Logged Out of Legacy

Send a message to your Angular SPA via ifame to remove JWT from localStorage. Again, you don't need to worry about session for your user at your Angular end since you are already using JWT for authorization.

Some Words about Security

Obviously, to implement this iframe approach, you will need to enable CORS if your sites are on different domains. Make sure you implement appropriate security measures to prevent exploits such as XSS or embedding iframe loading your sites at a disallowed domain.

Also, when I use JWT, I would generate an id (JTI) and make it part of the JWT payload, and store the hashed JTI as a cookie. This way, whenever a user makes a request using the JWT, I can check if the browser has the JTI cookie and make sure the user didn't just steal the JWT to use on another machine.

Let me know if you have further questions!

Community
  • 1
  • 1
Daniel H.J.
  • 438
  • 4
  • 9