connect/authorize/callback not able to authenticate a user for Angular child app from angular Parent APP - IdentityServer4 SSO

Question

we had a working SSO between Parent MVC app and a client Angular app using IdentityServer4. We wanted to migrate the parent MVC app to angular [port : 4200 ] Which I did.The login mechanism works for parent app but its not able to authorize the child app [port:4202].

port : 44308 is the AuthIssuer identityServer4

When I launch the child app => It takes me to the Parent angular App login page with the ReturnUrl as http://localhost:4200/login?ReturnUrl=https:%2F%2Flocalhost:44308%2Fconnect%2Fauthorize%2Fcallback%3Fresponse_type%3Dcode%26client_id%3DMyApp-client%26state%3DclE1U3VPRnpRfnZmOGdCbFVQelh2ZF9oVU81TUpIOEluREVGZENjRkZIWmd1%26redirect_uri%3Dhttp%253A%252F%252Flocalhost%253A4202%252Findex.html%26scope%3Dopenid%2520profile%2520MuApp.api%26code_challenge%3DYJzQ_Afi5Ldd4pjNvXOlVipMTh8--zzcDq6ip9LOKgY%26code_challenge_method%3DS256%26nonce%3DclE1U3VPRnpRfnZmOGdCbFVQelh2ZF9oVU81TUpIOEluREVGZENjRkZIWmd1

I perform login on the parent app and do redirection to the ReturnUrl (I did the parsing and all), by window.localtion.href= returnUrl; but I get User is not authenticated message in the Web api console. and I am thrown back to the login page. where as it is expected to take me to the index page of the child app which is mentioned in the redirectUrI

I am really stuck in this and dont understand how do I authenticate the child app.

When I debugged the old MVC app, I see from Login controller, it is doing Redirect(model.ReturnUrl) which is the similar ReturnUrl as above. [I did the same action on parent angular app too using window.location] From here, it is getting authenticated and then getting redirected to index.html of the child app with login params as below : (4202 is child app) http://localhost:4202/index.html?code=3C5A72C8AA7BACC3E24C236FC347F36E55BA1D15A62B8B91F8F0EE57D0FB5B17&scope=openid%20profile%20MyAPP.api&state=ZktubWVxR2xlSDNuZVIzc3I2cHU0fi5vZUpDUU1MVUpqaEtVSVJ1ZEFsd0Fu&session_state=r2rsCHhkiNNw8V8xUW84M_yzxbaPefV6cxU6E3AT9kw.DF08ACCBE8165BC00909A453EEFB005D

Any help is really appreciated. Everywhere I see When people are doing SSO with identityServer4, the login mechanism is in MVC.Couldn't find anything related to angular.

I called the connect/authorize/callback?..... from window.location.href = this returnUrl.Here the user is not getting authenticated. Not sure how to handle this callback from angular.

I can confirm that the redirectUri and all entries are correctly mapped in db as the same clientId's are used while migration and Port number of the child is also same.It works in old MVC app, not in new angular app

Answer 1

Your issue is all about 3rd Party Cookie restrictions. localhost:4200 and localhost:4202 are completely different domains so they can not reach out to their cookies.

When you log in, the auth server sets the cookies exclusively to localhost:4202. Then, when you navigate to the child app -localhost:4200-, it can not read the authentication cookies as it works in a completely different domain.

There are 2 different options to solve that.

1. Allowing 3rd-party cookies in your browser

Chrome:

1. open Chrome.
2. At the top right, click More and then Settings
3. Click Privacy and security and then Third-party cookies.
4. Select an option: Allow third-party cookies

Ref: Chrome Docs

2. Make them run in the same domain to let them be able to read each other's cookies.

You can simply build a reverse proxy to make them run in the same domain. It needs to be something like that;

Reverse Proxy: localhost:4200 Parent App: localhost:4201 Child App: localhost:4202/child (you need to configure the base ref as well)

The reverse proxy should do the following;

• Navigate from /child/* to localhost:4201/child/*
• The rest is to localhost:4200/*

If you deploy both applications in different domains, the same issue will occur. They must be working in the same domain.