angular single-page-application identityserver4 aspnetboilerplate oidc-client

IdentityServer External auth provider - auth-callback - Redirection - 400 Bad request

I am following https://www.scottbrady91.com/Angular/SPA-Authentiction-using-OpenID-Connect-Angular-CLI-and-oidc-client and https://www.scottbrady91.com/Angular/Migrating-oidc-client-js-to-use-the-OpenID-Connect-Authorization-Code-Flow-and-PKCE to implement OIDC in SPA(Angular)

I am using aspboilerplate integrated IdentityServer

I've set up everything as per the above articles and I was able to navigate to external auth provider and was also able to enter the required credentials.

While redirecting to angular I am getting 400 - Bad request. Here are the details

Call back URL :

http://localhost:4200/auth-callback?code=b74f38054d4becadaa3c45ce58a83c892e0d25e7fc4bfcc1ef29ce369b477596&scope=openid%20profile%20api1&state=18af0415b22b4614882d3e31113e2717&session_state=yP4rCdCetarKTsX6X0JXYTeV_1Xo8dud9V2FnT-14QE.db913b7a39e26220d8ac07de5a523eb2

Cookies : Request sent 9095 bytes of Cookie data:

  .AspNetCore.Antiforgery.xkdte50z5pg=CfDJ8FAKJpEizERFtUzdjBClgctpGC-BWtg81DZ33kUapCDBb84U7ILfbqhExQzI3oVOWReKh72cV8hdROZcCh6wK7tbwl14PnWzNIECZGxyYx-K3MINQnZEp3cp-Ury1Z4KaRHs7mqvmf6oc30h6Q-oFxI
  idsrv.external=chunks-2
  idsrv.externalC1=CfDJ8FAKJpEizERFtUzdjBClgcum3jNb_Pj5sm5cfWLtKGcBqkU1VIUHlMdupOgnYwqTNw3bjxOoeVbCR1YR9y6Y2Q6zZvxX2juNv1iiUTwVIcTAG99R0QU8Ki1EJ8uOvaVN-BgUFNXYzcrct69nxfTGj5Ay2wL18-ziLczxnqurAbgTVkgyZs6IWHgtbOwyoyJb3klbQUkt4nmNZbwNSzeYknhDq7ohwEqeva51TIw73lciD2bJpJZnxUFx9eRI7FiJcf6qM3iYzvQ9R1-IRAmTleGEul_KY0eEcf8srxjPDgCRvj_Chy14N0rJdvWvrgio2yfdKTiCam2y-xPporU1oBOupt4zuaKsnPlHzzY9NksO_Gp7TTXJi91d3P2rl9FtBbQVQQDgpuNlwKO_WWIbd_nvcns647_0Cm0-mXiPecFrCC_plifOJ3ZRQHDYd-_ykOR_8WtGVYNigh0LPn4WxHoWJujUneRVaF_ootP4I1-uzcP6oDtTdxzCBgQpsujS_gRsHzZQ4S_EUX90R_BNEfWpg9Z5je0sT4Rma_tBeDBTCtqaZEKng_n4ybbn8xZc0dwuuGsVjYDSLXXoHLhQ55MalqJmRITH2mBNl89on3l2Y_e3_N-T_ScBJOS6HUHhTbKgiA2-R3XP5T_Gd0Fbmhpyrb4uqRJDybQb3muaKwYAJg51PSoiicA927KTcfiVPUzHY7YoENJ8MqBHkonvpjw9QtrWCgn0t4wTgrj_jIkIg9VmIZFReWGDiIw1cQnvA8u0lnPdxXl0D0ywm1eKCcvliHuFiT4KM2nKhUtlg75X5w5AYBFRb8ocx6Gx4zNEuV6cXzsx0-PVkbm7DllcMu3gMchpk47rDrIUjTDqlSjnlM1JaRWbrxXAui5tvZwOdAlI3e3__RIu-hdSJNO_ZgvPkLRUBiv0weNmsUWPjLzSjP8RVj-fWWCj1DuXSeUKcWTeEiXu019Klco48i1eUKB-vqLsUZHWAc8E02A8xF3kyz8OXOIam4tOlBD03-CgUK8zf0ahdtFegsXspJ75Z7Swml8CHpPkHrdZvGrryd-UbRipNpejtde1B9-WnLhpLQjXYCZdCOFndeg9CG1L9uBpaAU9pOB-AzmLqNIa1zi5qS0h9YqlL4wHGnK0iDlSmmK9kpZuTUS2nSEqs9hDwew1asxl7LPF1sMJyhjfDBAOmcHV4kZA_E6w0Y8_JQC4vu8Oda7vVoApvolhhHPqXpmmwbHxwxv1HjmC1UBdGUOJyn1rX6ASFJnEu1mmgqD1mgXizbmPzJd_KzRUkd5F7M0DcTBX3U3_p337g3QG5WJlBE5v_2JBlh6s-G5Lxs7UNXwcEigg6amJEgcIejNKXRbynJ-IKE41kd9PvXeG29d9B27Y37LPQu0xVaH7C7Z46pkASHZVrcPGLOoN0gHBTNwGaDUfca8Sb2bq3umhNjzK5uNxLaEZErCmjQQzUidKHcbWyuHC0ht0X1phOJv6hMTiUroYVaTP-ma_B350Z0euJq4atEPu59-Redz56aYtuKBW13axJs8qtsvXolwkGGboHzB-gj8PjDrT-iHGVMnoXVLkkOM_nYzfY5PwnaSWUdPtXnI6hxTlJomU5Bvhm-7TKLfB4bl3Fel4MM0QdrTQJz28FBTVFizzdksoPB4N_3jfSZsR373mN0wdtqpEjmKNUvGnVNX5wTc_3oMTO0cprxSVXwUK23phkomKHUYMZ8i11Z7T1mZHx5Yci1CMp-mHqTD-fBbmSK7YYvwtsSLeeI7u4cH-IYRl_3YQtxrFLwqTOzWllcz_JgbvwNXPYirLj0EVqGwttipg8QIuNyJIaPAnovTpJVI15ioJKfS9F9xlx-JVETbgxK3Py259pbTu8r-jHEZT0YdlItIZO-t5FM6hlTHAtQ2SuY8kdFQyBlUNZQPpw3ft6cz6mUt-2CcTdZ-xibkEdr7dEAZflSIrhL3Kt4lrdNalI5j68zG_0g9qfcXKTaqyMN0bawAzBfmaWAIp-u1KZb5vi6Kwf9ZEcNYF4fzHjHIOSNmySgiaYt2zH8EvbcJbTQmfBhuLOG6zBDU1-fDTK4-eBPkRJWEh4OTHm0jC8GV_N-80CrbUxjJUzoBWJXReu-sE00d4zBVHTHNJDlShXlyUPb_vqaGCJDFIlEEZUjyvAdwP0eOOeuhSz6jYicK9WwaZgsoLLsyeNZwLEOLftEBAax5ddoUdwe2kwxJ9eMZd_TE4YYzI9ZI37QAjzfhf573n8l2V--UEr-Kt6asTxzNvg1gK7doRns66W7KC6qnL_9ApLeoZ-hOX2QZ2J32D78mk5h4Dtv06lsNm4pBs8855PeZ7ygBu-p1edi1UjEWLzIxHxQ8YNNErP-U75HDgStXVRBY7CuXqz8RVc62Pjrj6z3Z98nV3KfcYJloq-Qejg1oSmFLgHrs5tTecL3caIopMy_MV0XRg6ly7cZtWq_8GQclQP_-6nTGy2ucN9ncj6sSjbFXxtKPV3bLAUm_JFtMfzzjR4TxP8s95zOiBwF5XXlLPu5QzBOoprI4Qf_XhmlTe8_1Z7X_HzCZSfWtgSDMEmcyOXxp4sPeKnh4U7o6ZlKukGz14F7gB94l0ZEHpbtOScRWb88o0fisHQv_G2Erslx3O5sGDMQG8G_W7d6IMBs1FFU1wcy8gmAznDbgFxtEPmXwdcoMY5MxliQQ8SrmREP_fU32jfGox5BiebA10BtQKjctJdnF_KPu3UzFuPGjFncCrpT74J3bR8O7BTUY175pOR2Vw4dtPCubHDeLHzFT8QWsPOO0CUS1kbtlooYbPS292E8lawWmYcFMcYsDq5x40NeX4-NVLuL0DvaqC_tgBLqvjDsrv6hQy6xQBoJt0PtfB-X0n38TCl9jwmpA3IiLR77FEAbpf0RRs4NB1_fIs9nSgK76JFPunxZ8jsgOW1ERNBTjgCaO72tct0l6rtrZAD35fu6KPBCFsofdoRpw5e5hxiq_Py2nYniCv6BkDLezt5wyYW83Zh8RJ1MQgZxNg3mJj0yvs0b3shdmxcjYZruCswCpcYHUCmqsTIjj4yQOHY15c8R50Asq4-eBuf3FhrIY7UWftvY3f3yL4IRQyX93oD0o1SCgpULpzR3dUAJD-QId3fHHbq-fC80Jqs09LP-HA9r7SutOSDpbcH-qD6ZDIVMddxGNOSyEVEN21fNPMUmVD-7u3-B9hmTrmb48HJLAQn9JjN7SdYjlNOoiyzwqZchnmWE3Twuro0S-GBryAqKdF7eQKpPqgtOks03JcXFERS0iRIJLZe3syjY39SZbhYMahkAc0D2TnJdUSxc-g85H_e0GobgE6R74fAwKeFDNrThwaULJBQTq0EWFikOMpZFzylfluw1M9U4ad-f53bYHPcvKFw8giZN6N-VM6qLrg3D3oU5169cXpmbRDeawreIOHvlVoIfhRZu7cSkARO0AGmL9XUrGivRNgMyDXRBIgIn_tbIPFvIrWkhgcZZZZP2t4YFzhn2MvKoHEFAfQHFFQ4jvCv-Waof19dRzbMSjS_Vz9qPzslbUjYATnIykQCeylOybDQKl5b6QVwmz9ioSl9OrJNFbzy9TDXSqjgCnefoHdZyVubpHSCADKJMB4FnLK5IdCFwcn2MSz_FuZzuCzDzR1B_WNTMuLQBR7Ks70uizUOJ8BKI7tuMO9nU9N6AQ7Preb_XRLVFJ31ISl5DvrQxyh__1Uet1IuT1vYrH4owFgaTnwOPRMPNxmnUTJRsbyEFdP6p6kQjV8zrId3qhBDIRMTfuOgT2n4awFqGbIM5DUnag003rbzpqD5zuL1RAlCfwyf2Yx0u0qY3es-zJV9CtlzU7X7YR-GBDSVJCKSqRRNg7YY-B2Y2E53Wudp6DDzVFuGs5G-XGJKzq3mru5h1CWaplCNgpDkdaRId-mfp1p2EP0vmoVkQnlkXqT0oJTsOBSTLKDrCfkniMbmKP_afqWS5jn6BmRDuFjEhdhl6Wa2GkMznTps_g9My
  idsrv.externalC2=TudWp3eg3iUDnXn_uBCELCcSM1M6cxDlaF2RtsIFq74WusG6xZaIXZi033_2psAUpYZ-rKCn-fR-0p9RsHfw4Tot6oTODOcVUeF61Q3Zw6yoXZp497mMT3u-RMB58Yai5pUSMJk1Ex_2H1ekLjks9_ngpns76ARB3dWi_gzblCLQ-zSujcPw7ksoBLlt2X_h4B3w6Y91lCyHkn77NcAKdTiVgRs4-nX33NEr7Rogr3p365AV9vrJqWIl-eP7I0Di4mQn-EUZAd6C1iqBA-Af0wp3Nm2OmJJr-dEoPpppha7wW0_3IGk4_O_0cZjv5e0-63ER0X3cB5ZoKzRarKkdNEm3uBgcexGLOWJyTL8ntrXfytxxC0iP4DiO-wSnydrD0r-k6F9iLd_-pSuz30MnHDAAXn0141EC7gLr-J1EFS3ou2b8ocjIjJUF9jZ_V9IfibMrI_K7o4e-Yk5uhvjIzOq_usu2LgDhLjLIYXYwX_lQPX-D_z9Apn5IfE6iaGpc2ziqocj2uDFEA_j2dKtJBiyRylBcv89BJfWcsNHLybiB1dVBSFeRmQx_Bi24Hv0fkjw-7FLIFnGHv0UM2t09zp6QL4T9K7ggxOZMWp1-l4yIfnJRBDOVzSUcJZLEmAzv-lFcppUOtvrUmERDHItWFI2IF56flIGH5bLv7FJBFCW8Ke4HcI70EiWwBSHvO6JionGOrXpsAmVGW3WbfVH-iTrepjmYeJpzsKJbjBWvtTOy4BjcxjUe7S0UZvrMIpulv-bH8EJhT-ZnSublufZBtnUa5AB8Eo746zPmoEBhFETx_kGMKtwG11Cj_awV2xlY4P7Teb1UsNYvncPHn7B0gPRq-e3MHeqo0O8GgKcnZb9rR96NpBsLqZ64D--9kbYengtKR25guD1lRRb2ijqkC4aCp7hD7ohE5RjggPoxo5wr8ZQA4-c2HT_uwlpe-QpyY_GdFErAW-eT0sSA0JljDVTsgFFt45CP2Hid2gqRX89-vgBVXjmV9rTZHocGEBg-PgQP0TGeGQMg6RWL9ryzsb0auFRBhiAPkyoPonTNKM_Uh2tSVXKZB27T-dAJRXF4qZ6sFzAgQsrJxphmucPUuFw1RnaFGSM3swf4A8JR6egRegMIHq2qci2uEUyQnfSTYLciNvur5OXXkfYCEb73KaYwzI1I32FUnJ3RsrQPSgS-RhNHSlrfHgf6DjAqa5VNk3u7c4RIreVTxI-ZiGjLJgxHxHUuSIyiKnClH1WrZBZ0yVupkmjcNd08jMbAEIUeP43tMg_Mwl9zjN6kGQdbDbRMNqGw6cIv7_6cCPcT0Uc5e8biHEYdLO6MPsCbH9bOEjVluRY76g8-CNQx188rxm_C1-qmxqbjGlHmebmtA9Gm4WR9RJ4ZBZkuMjMNn-rZv6fuVBtOUxzFUj0RZu4p5yhURxLRDh8OAAYj3gMd1TJ4qXrITd6Qa3VCnaCe9WHJgAEmfHjUiFulqTsv6NIFZiZfr4JysHSSk6qDAwdLDHEfb-XjM7EbS6h-2ehU1wLM6HvXv2PMpq05leZ30XYHpM0m-JGT4iOE-23jcEYba8kx8FpPAEvMaxllEMx-U6cXpaSY7gICbk08mrZJoRwqm1x14JsfWnS40NxypgaEm4Ofz32YP0gzg_96wwS5dPgEU56gS6iQLfdLwyuME7KLcVNGRs0fGDH7hsfBZk1FwBpOQO2o60dsxZTtIHqKnftVrn2fhoc2Q6Cpe3GKPHD3fIzga4_umSTZL_uQg_XTi_01IYRr5dSKQ1GwQVM6ELf1o5Un4YiCZ3qOpjioKWLapQwckdUrKjg95Lxlnq7TkkTlB2C33tjgo_UQ-CLxSYEGR78m0USywEfXi6N0LS2MaDmu0rNY_UweMs9EV0r_y2KqqLy_afFrn3IWn5XcmAaDhI59a_yRtkNYXMnKP3rexMYSdHSY10AVgPO88U-_5nelN5CX4zwNnJsyjD8sno59zEPq1UPvW5q72USgnt3wY4YWSPfkkhNBWr16pKSmTUkuaWtbcP9MQg0uwrHhlQAXcM
  idsrv.session=3a7192efc6a9690cb33226c0241d91be
  .AspNetCore.Identity.Application=CfDJ8FAKJpEizERFtUzdjBClgcva9BrL5NevHGMOeN3Y4e-BtNupVoy3JNq-gAf0-xVS97cU9-h7xQXpsv2zJP6nx5leh2DsRxN4uwXPrxiAoJgdfXyTFvhtATpLLRmWPEFnLSH1hD8BTV0U2b2kbBAFl_ny-27_-xoZdV72SVkJcrwAuWCZkNpMcBdGfmNMWXwyL1c8cz684o0oWicEyHvquOdHW_bBpkUrXSQK9b42pln40tPVBlYFLMEgMDKCwWGwYcR8_gx5P0dyobN1R0RHYXFXiwkFNWzz9ZsEpKk9wxWF_Hn7XDNuVV4IiLRwQiVm60njvg15gKUlxPpYQY-8C7oTRPsgZGvSqisVbSlF1EyoLsarDak_Yns21HEQY2AVGs2VxuPidNe6cRdjb5sIRuHUX8kDawttIu8MnrHyLRjaF94Zz-qrCpZfYiHOtfpu7VVg_7HBNusMBOy9xJQLXBftgPamYkCFhnXepQ34RJiM3-1yfQNibj-TaVvSHtt7_lyQdwcnX2MqjxyX3XI7uYqyYT6ela_qBg1C-bTYoiFbiqcv8C_dME9RsBdB_V7q0BtSPvgcHrG5lUJlvksAGyUzo0fQn9dzdEjKU86CaQ_XD349PPznjRe8Tk1E67XqI0CzPhB3RzV_sHdy4Ghfq7MP_WXvOy3hc0mH4TNN03AbB7_aHcIojeHVNh7cyfmcJ-9A6n0jCrSXHxEdf66jjc_VMgxk3nytS_g749s84jAajtxBGnXmqvAnqEYuZZgTAJFMaajq5rrxBU_X_W0DQbErZu3fQU6e_LYrJxAIcXfy4Qh-iynY1flPZBihr0S3qfOxUhrvpB64zq1b3fa9r5edByt9tgBm8KK-wC0b9JjF6kms3rn3YrJIJF00lUG8vZ_MfRr_fU3-e6rG7eQn6YTiQK2ZFfnEo_dzTegfDTJ2fez984jJzJFSC0s47rrb4N2ofoHpAqqqybEWW2UQtURvOU2d5CLRvo32RTI4EBD6bKbv4k92TBpOsZe09ipHmAO9cIBTNfCEkm7AYjv_ZvRrasb6kU7GcrNwRUx1k4fcmDnEeBZZgMbMjWzE6ieJ2miqxOiA3z2vuYcPTMB43vjKjqeAsn5juCx7l4Qo_zdE9UEqLlBSmEOA-UQsdg6m9Dz48QmW0XIxZ1WGVPz2Dbot4zVrgRNg5FzLpUwsvyd3IoLmjSCnvUxNDAXYN2zlUr2ToGVU6O2fYhjmJHRqTVepTebaZ-qjAzex07SR0Oo-LZq0780WKdKIiq5wNNFTVxN30tZuPcfPqd7CBIfZzlkMlyko_RUs18ZiZ8bQaiDLWSbLV-d6nNCO_TSDbLLWkr0gc6BW0ZM8G6BdCVCS6Pb5WlkVGuwejZ5QXSHjPEfqbr06_6FqnrcRts7irjDWnw1GpnT8jkSlwPnLFkcCndm90nWbQ-EKns1qEXQi-m31jdP7m3i83Fyc3pxpcgkTFi0cLfFc1hswdacpBCHPwyDikQ5mszondBiqCHDzZMy635jq8HHREfnJgDNUxkj1WOKnpwCFa6GLWsN1w_U8KpvTEpXM87PRTqIhZW6EfnLzZHuWGpuWCiEATDyyVvgJFIOxQeEHqfXDPPTxl0EuDYCC-9eaw6q0AcgNYbAqlXHWCgqcXshpI1qVu0aQRP_81UT9vk3orUZNZqD-WSA_GHRUTVMedpp-piqDEZ-q35V_NIzhrUwyflpCcTItrhy57-IJbHujRVosl8x6s2A9J_JytTK9y4lqfBe38h6dQtPNOdjhkA_ioWdvWn2KFVLtULnapFScWLm4ew-Gbrxfrmj68JzmsKUOKmm6i0o2Y0JMEg9gsExTh1K3Z_e_DCnfJl3XGgB6Q5rX_qzcvqwyldPn1xJyXealA5KCi38hqsI0wy5-LZhiIUt6PEQX_WNF5wiL9jkT_6-qVfUhlRB87tcqx6YHwdwlYUErsNkrRwZJQrtXxDJoZwEWYy31Ehpi2XVoKTksNGdvHbJcPtFBt7BactgMy6MRu0LVTI8XFhVaG-9LaiHAq9U3c2vblpNjdlBW0nrujZo5MaV5xroyrL3PxZ3j9oj3FzbtgcN_ys5J8FMdhTBAaN5V_YtAWpBH1kP527q_raw1wWdnIvLKQk9hsQJqdldZoKM6mZgyE5_lAWzLs1KN4xwD7Gbz3uQVoaIdIGGsW1iXhB6wJ7WeN9vD6kAJBiI9aHn_iJLmh-QPEWPdMntVipec4UXAACVXPX_QmOvFYxdVhSQp9tdmzpvAfVpQpsbrF29ro0olru0Aimv73wMp4UtIacGSu2T7rHfwkXJ05o9IDuUnjOC9oXMhxLvz_dBwjHeHt_B3BvBQ-XNSEQra0fD0MzJ3GBRqK1vUWRJQzaUmfZF5aE39az8qoRZBAYKFrAzqE8Y2IsEK6UhrJj4QuJ03l_skguhXuraLyH-IO6fnRqF5lZQgO81RIZKDvRlhNrcGJsM6yOotUXXTpVz9xjOtn1rMO1woO0up8kr16vlcRKp_TUh_VqDvV-AbY93ZYBUuvVUiLonGaOK7V3X7uqJGFsh0f27hy7CKYyjviPLo9eEs_oMsjh34cLEzDEPSZtgdqbv6_82ruVRA6S5wKWr6v3HluBVjJP7Q8iBJbLzFfl85ihIjj04hYZQmBUx0E0a646NVETdibYC7zcmdtGOUb045Nifb3A

IdentityServer Config :

public static class IdentityServerConfig
{
    public static IEnumerable<ApiResource> GetApiResources()
    {
        return new List<ApiResource>
        {
                  new ApiResource("api1", "My API")
        };
    }

    public static IEnumerable<IdentityResource> GetIdentityResources()
    {
        return new List<IdentityResource>
    {
        new IdentityResources.OpenId(),
        new IdentityResources.Profile()
    };
    }

    public static IEnumerable<Client> GetClients()
    {
        return new List<Client>
        {
             new Client
            {
                   ClientId = "angular_spa",
                    ClientName = "Angular 4 Client",
                    AllowedGrantTypes = GrantTypes.Code,
                    RequirePkce = true,
                    RequireClientSecret = false,
                    AllowedScopes = new List<string> {"openid", "profile", "api1"},
                    RedirectUris = new List<string> {"http://localhost:4200/auth-callback", "http://localhost:4200/silent-refresh.html"},
                    PostLogoutRedirectUris = new List<string> {"http://localhost:4200/"},
                    AllowedCorsOrigins = new List<string> {"http://localhost:4200"},
                    AllowAccessTokensViaBrowser = true
            }
        };
    }
}

Angular Configurations :

export function getClientSettings(): UserManagerSettings {
  return {
    authority: 'http://localhost:44380/',
    client_id: 'angular_spa',
    redirect_uri: 'http://localhost:4200/auth-callback',
    post_logout_redirect_uri: 'http://localhost:4200/',
    response_type: "code",
    scope: "openid profile api1",
    filterProtocolClaims: true,
    loadUserInfo: true
  };
}

Kindly let me know what could have gone wrong

Edit: What I've found so far is

Even with another Angular oidc client angular-auth-oidc-client, I am stuck in the same error
With JS client, (https://github.com/IdentityServer/IdentityServer4/tree/master/samples/Quickstarts/6_JavaScriptClient), it is working as expected. but since we have Angular as front end, I implemented the JS sample in Angular by including the required JS library and to my surprise, I am facing the same issue
When I copied the URL and pasted in another browser, the call-back component is invoked. So it seems like there is something wrong in Header & Cookie. Here is the complete data of the request I took from Fiddler

GET http://localhost:4200/call-back?code=7bc6c3d343067f2ede3ed86268e3622bb909cb8df5d75d2f223b335bd75b730c&scope=openid%20profile%20api1&state=86215491d41a4c3c83d52007edf372cd&session_state=ibjjr0YMpGp_UZ1ezmUMusoAIpht25ySKfq8hoCKHXQ.e7f8f959a82f09b830a9635911c0b9f3 HTTP/1.1

Host: localhost:4200 Connection: keep-alive Upgrade-Insecure-Requests: 1 User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36 Sec-Fetch-Mode: navigate Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,/;q=0.8,application/signed-exchange;v=b3 Sec-Fetch-Site: none Accept-Encoding: gzip, deflate, br Accept-Language: en-US,en;q=0.9

Cookie:

.AspNetCore.Antiforgery.xkdte50z5pg=CfDJ8FAKJpEizERFtUzdjBClgcvmHhFjLJ4WDhku77bzpIxGI20-....

HTTP/1.1 400 Bad Request Connection: close

This is what I see in the browser

Solution

For some reason Angular do not accept that much data(Cookie) as part of Header. Though this works with JS client, I am not sure why this happens with Angular.

During initial phase of development, for some reason, I have commented out the following lines in Account/ExternalController.cs of IdentityServer

// delete temporary cookie used during external authentication
await HttpContext.SignOutAsync(IdentityServer4.IdentityServerConstants.ExternalCookieAuthenticationScheme);

When this line is commented out, there will be additional Cookie that will be posted to Angular during the call back.

Uncommented the above line will delete the temporary Cookie and there will be less header data during the call back and it invokes the respective Angular call back component and sets the bearer token.

Clarifications Required

If someone can share why Angular isn't accepting large header data while it works perfectly with JS client.
Though Angular says Bad request, I was not able to find from where(which layer in Angular) this error occur is thrown. I did not even see a single line of error from which I could get some hint on reason for the error(large header data)

If some expert could share their experience on the above couple of points, it will be really helpful to understand how Angular works.

If for any reason, you cannot limit the header size, then increase the node's --max-http-header-size. Kindly refer https://stackoverflow.com/a/57667786/2922388 on how to do it.