To integrate OIDC in our Angular applications we are using the great angular-oauth2-oidc library from Manfred Steyer.
Once we receive a valid token back from our IdentityServer instance it is stored inside the session storage using the OAuthStorage class. This all seemed to work fine. However we got into trouble when we started to switch between applications. Different Angular apps were receiving a token from another app which resulted into errors.
The problem had nothing to do with the angular-oauth2-oidc library but with the way we had setup our applications. All our applications where sharing the same root url and were hosted as virtual directories inside IIS;
- apps.example.com/app1
- apps.example.com/app2
- apps.example.com/app3
Session storage is scoped per domain but as all applications were using the same domain, they accidently accessed each other tokens.
To fix it we had to create our own OAuthStorage class that used an application prefix to isolate the tokens:
All credits to Jens who investigated the issue and created a fix.