IdentityServer4 - combining MVC and SPA - avoid extra round trip

Question

I have a website which combines ASP.NET Core MVC and angular based SPA which I am trying to secure using IdentityServer4. The login flow currently looks like:

1. User clicks the login button on the homepage (www.example.com, MVC based)
2. User is redirected to a login page (login.example.com, MVC based) and logs in
3. User is redirected to www.example.com/app where site detects it doesn't have a cookie for the user so it redirects the user to the login.example.com/connect/authorize endpoint
4. User is redirected back to the site with the id_token to www.example.com/signin-oidc which drops the cookie
5. User is then finally redirected to the www.example.com/app which should show the SPA

The problem is then when this is finally done, the SPA needs the access token so it can call the APIs. I tried using angular-auth-oidc-client library, the trouble is that this waits for the whole angular app to load app only to find out it doesn't have the access token and do yet another redirect to the login.example.com/connect/authorize endpoint to get the token.

Is there a simpler way do this? I.e. redirect the user to the app with the access token at step 5? Or choose a completely different approach to the identity?

Answer 1

Firstly, after step 2 user should be logging in and then step 4 why 3, not sounds right. This scenario should be handled by hybrid flow and when step 4 happens client app should have id token and access token. you should now have Controllers where you can access "Access Token". you can create a base class that returns httpclient with headers set.

And all you calls from angular app should go through these controllers, which will call your server apis.