Angular-auth-oidc-client: 400 - Bad request - Angular OIDC - IdentityServer

[gops-mmp]

I am following https://www.scottbrady91.com/Angular/SPA-Authentiction-using-OpenID-Connect-Angular-CLI-and-oidc-client article to implement oidc client in Angular along with IdentityServer4 (External Authentication).

I was able to redirect to IdentityServer login page and was also able to login using external authentication provider like Google or Microsoft.

But after authentication, while redirecting to the Angular auth-callback component, it throws 400 Bad request error in Angular.

http://localhost:4200/auth-callback?code=b55d27fcb5fb377140890c79aa165e7f092f0e21d5937f65316f6d6fb60f01f4&scope=openid&state=1eff26c9c4304ec0be1cee8b4d222976&session_state=jhbaw92GB3QSiZ2fjJ0k48tdq0H1oWa0swUaFEf5KIU.a56f19c7162cee6bb63ce3d775c4ba10

I tried to put a break point on the constructor/ngOnInit of AuthCallbackComponent but neither of it was invoked.

export class AuthCallbackComponent implements OnInit {
  constructor(private authService: AuthService) { console.info('AuthCallbackComponent');}
  ngOnInit() {
    console.info('ngOnInit');
    this.authService.completeAuthentication();
  }
}

IdentityServer settings

export function getClientSettings(): UserManagerSettings {
  return {
    // authority: 'http://localhost:5000/',
    authority: 'http://localhost:44380/',
    client_id: 'angular',
    redirect_uri: 'http://localhost:4200/auth-callback',
    response_type: "code",
    scope: "openid",
    post_logout_redirect_uri: 'http://localhost:4200'
  };
}

So I am not sure from where does it throws the bad request error.

[jeroenheijmans]

Apologies, I posted a response but was temporarily confused about the repo I was looking at! 😅

If you get a 400 Bad Request from IDS4, could you investigate what the response of that request looks like? Does it perchance contain an error id from IDS4 in the body? Could you cross-reference the logs from the server to see what the error was?

[gops-mmp]

I do not see any error in IDS4 logs.

Also looking at the URL, it looks like the 400 Bad request is from Angular and not from IDS4. My understanding is IDS4 has done the job and it has redirected to Anngular's call back URL (URL provided above). But as stated above, the call-back component's constructor is never invoked. Hence I am not sure where the Bad Request raises from.

I need to understand why this error occurs and how to rectify it.

[jeroenheijmans]

Disclaimer: I'm far from an expert with this library, merely an interested community member :D

If I'm not mistaking, a "Http Status 400 Bad Request" is always a _server_ response. When you've logged in during Code Flow, I believe you're redirected back to Angular, but the library will still need to make a call to the API to exchange the code for tokens. It might be _that_ request that's failing?

Have you checked the Network tab with developer tools yet? Might be useful to turn on "Preserve Log" (between redirects) if you're using Chrome, and see which redirects and xhr requests are being done.

[gops-mmp]

Here is the fiddler log. I don't see any call to IDS4 after the auth-callback call

http://localhost:44380/.well-known/openid-configuration
http://localhost:44380/connect/authorize?client_id=angular&redirect_uri=http%3A%2F%2Flocalhost%3A4200%2Fauth-callback&response_type=code&scope=openid&state=51c48f68fca6419190f1e290525d3bf9&code_challenge=R7l5ClxWGG6Vt4pXDwf4UQcQpy5U8QUiaP7JhjxpqPE&code_challenge_method=S256
http://localhost:44380/Account/Login?ReturnUrl=%2Fconnect%2Fauthorize%2Fcallback%3Fclient_id%3Dangular%26redirect_uri%3Dhttp%253A%252F%252Flocalhost%253A4200%252Fauth-callback%26response_type%3Dcode%26scope%3Dopenid%26state%3D51c48f68fca6419190f1e290525d3bf9%26code_challenge%3DR7l5ClxWGG6Vt4pXDwf4UQcQpy5U8QUiaP7JhjxpqPE%26code_challenge_method%3DS256
http://localhost:44380/External/Challenge?provider=openid&returnUrl=%2Fconnect%2Fauthorize%2Fcallback%3Fclient_id%3Dangular%26redirect_uri%3Dhttp%253A%252F%252Flocalhost%253A4200%252Fauth-callback%26response_type%3Dcode%26scope%3Dopenid%26state%3D51c48f68fca6419190f1e290525d3bf9%26code_challenge%3DR7l5ClxWGG6Vt4pXDwf4UQcQpy5U8QUiaP7JhjxpqPE%26code_challenge_method%3DS256
http://login.microsoftonline.com:443
http://login.microsoftonline.com:443
http://localhost:44380/signin-oidc
http://localhost:44380/External/Callback
http://localhost:44380/connect/authorize/callback?client_id=angular&redirect_uri=http%3A%2F%2Flocalhost%3A4200%2Fauth-callback&response_type=code&scope=openid&state=51c48f68fca6419190f1e290525d3bf9&code_challenge=R7l5ClxWGG6Vt4pXDwf4UQcQpy5U8QUiaP7JhjxpqPE&code_challenge_method=S256
http://localhost:4200/auth-callback?code=499c9c8249770498450301fc8926937497fee5bb19ae008e050d3b045d9795ec&scope=openid&state=51c48f68fca6419190f1e290525d3bf9&session_state=aBKe6hLnBiHI1DLGcFMfoNjENhT6oCfJtrMm4LOcEzk.f2c909100ec08e0e3f446be299a3b030

I see the same log in Chrome, Firefox as well

[jeroenheijmans]

Hmm, strange. Do all of those requests from Fiddler result in 200s or 302s?

Taking a different approach, if you mention "throws 400 Bad request error in Angular" what does that mean, exactly? Do you get an error in the console? If so, could you give us the stack trace, let us know where the error originates?

Could be that I'm just misunderstanding the entire problem, and that we need another community member to chip in on this issue...

[damienbod]

You need to add an angular route auth-callback

[gops-mmp]

Sorry, I added this issue to wrong OIDC client

[gops-mmp]

@damienbod I tried 'angular-auth-oidc-client' by following the https://github.com/damienbod//tree/master/projects/sample-code-flow code sample.

I was able to redirect to my identity server login page, I was able to authenticate using the external auth provider (Azure AD) but while redirecting to angular application I am receiving the 400 Bad request error.

I modified only the app.module.ts to reflect my identityserver4

app.module.cs

import { HttpClientModule } from '@angular/common/http';
import { APP_INITIALIZER, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { AuthModule, ConfigResult, OidcConfigService, OidcSecurityService, OpenIdConfiguration } from 'angular-auth-oidc-client';
import { AppComponent } from './app.component';

export function loadConfig(oidcConfigService: OidcConfigService) {
    return () => oidcConfigService.load_using_stsServer('http://localhost:44380/');
}

@NgModule({
    declarations: [AppComponent],
    imports: [
        BrowserModule,
        HttpClientModule,
        RouterModule.forRoot([
            { path: '', component: AppComponent },
            { path: 'home', component: AppComponent },
            { path: 'forbidden', component: AppComponent },
            { path: 'unauthorized', component: AppComponent },
        ]),
        AuthModule.forRoot(),
    ],
    providers: [
        OidcConfigService,
        {
            provide: APP_INITIALIZER,
            useFactory: loadConfig,
            deps: [OidcConfigService],
            multi: true,
        },
    ],
    bootstrap: [AppComponent],
})
export class AppModule {
    constructor(private oidcSecurityService: OidcSecurityService, private oidcConfigService: OidcConfigService) {
        this.oidcConfigService.onConfigurationLoaded.subscribe((configResult: ConfigResult) => {
            const config: OpenIdConfiguration = {
                stsServer: configResult.customConfig.stsServer,
                redirect_url: 'http://localhost:4200',
                client_id: 'angular',
                scope: 'openid profile api1',
                response_type: 'code',
                // silent_renew: true,
                // silent_renew_url: 'https://localhost:4200/silent-renew.html',
                log_console_debug_active: true,
            };

            //config.start_checksession = true;
            //config.post_login_route = '/home';
            //config.forbidden_route = '/home';
            //config.unauthorized_route = '/home';
            //config.max_id_token_iat_offset_allowed_in_seconds = 5;
            //config.history_cleanup_off = true;

            this.oidcSecurityService.setupModule(config, configResult.authWellknownEndpoints);
        });
    }
}

URL that throws bad request

http://localhost:4200/?code=8bbb3f7008b4f219f0da633793d328abc021ece8956082e3a4b9611e5f82451a&scope=openid%20profile%20api1&state=15662138560910.64395859527703370.17670985013411666&session_state=dxcFqB4V7dEpkEdGuGY5FqpayVPTwRWisefxJRQJ1cY.a5e976e31c738ede10bcfc58e1040dd2

Cookies

Request sent 9159 bytes of Cookie data:

    .AspNetCore.Antiforgery.xkdte50z5pg=CfDJ8FAKJpEizERFtUzdjBClgcvmEYA4FpRSoL_XEWuf7LdG4P7Wa3GE67SHEjY-r10cOH203Azj5z_zh_92H2eDzoJQD-5OBFLMxIykCL67yl1tadsRulPB5p6xDgRitXwvxobzmx-iovC5uoXh1lcRuwc
    idsrv.external=chunks-2
    idsrv.externalC1=CfDJ8FAKJpEizERFtUzdjBClgcuPLGOOoartcJyngrawbAE-m1McrfwMlNyDTnapxo5XUUqGff8jDd99DmwtHB7R5WfGUluBYd-QHG1Hswih8sr8YN0dHZhkUnEv-cptirN6Q0sars5JhFGpDYVH70F1PluMgv6bc3KXKXmAx1zH_qJTgyZ8kpDvNCpfqOZ-0Of-5ZkrGYBzEr2CavToZ6JbWJx9Ie28JJahiyqGEeb_oigqK10JsjwOe0VgVT8HgmIkSJMFP9NBPEkt63vUPiar90I-sDyfl1gyqeVsS2U3QxB_0zMnY8mC01dPinvCQJMXSim_X0aJkrT_wmC_OaYC_BlvFFJZJjKCqHKRJfyuAlGvDEw9pdITQndIDmKl1XCPwaZbNnvsAKI3N3sg0OGCPy1Gm2jliiZ8v0Vb_SJKPfzi35gS59nCQVvCawSSYA7bCzS8IhZ7UyJy-Z3jQRiIN6x98_KAhSlo2H4DB8cEdlRUsCuUQRX5FviUwCBlsn0jV1d-h1NA3WxJw-1Ud7TZngOwBBlCXDNwpNyljI7yk00PaLsjODlRuagGIBSzQz3WoY9yc2AWBBkFMtmdl5Tj_6_JRgO0InD8SLR-79jtLR2de2ewAC3hqNMEOrhqwK5Re5v0yLVuSLY0LSK1CJUJO9lLdRAWkWSfURucYhQCxqUMnayUGk9F-C8YC4B_oV4Cv7CUJEkknZ_PIlakCDfjLf24XGTXTvqDYixDIFLwwBeLHK35FSTRZR94wQ4nIeYLPoF6NXFREAe6CSL1IiSxR_7a2u9WDpxDjiM3j7tfd_AwRsHUH81uINhQEx4c313vG0IVfM5FLIB3M9anEqq6HE_9rv7k9Nx7BB4o-KPmRaG34Scr4WRSjUIOF5ftlfBShnEQcq7entAO-pdrsQp-GJOLjZwzdYgZhNHaF4gX1OzFuFwBeDGF3XrIQvmu539O-pwz2tuQL-CHsVkMCVwBeVHEDo7b-TXFXblbE98HWDdJxFV_32f7eX7s7B2F-JqT63kDfjt2rdnzudJzZkm0QJDcx_zp7bJ83pwGYDHhV3V98yVeNJLhuNN0D-YYhQ8YkYDcZagpxticXnHhGaD-qKfa7U7tC9a7edHp-DVGb59BGrESgV5MamNpvVj1BcwsqTsef9NNXK5rsPhY6TTpQH5b8jSSyOqVKa-ZUa6-gEXc3JHbFmom1x_AoDOusKPyouJQ5EjjdGruaLh-LNuRNzmiduWh1vcUNQM9WyRAsr2H-hHV28A0hH6rkQBDLn5YJ_bt_moknhSStRkto0C-MVT9z7B4fVtGymAk56BtC8O190Q522nK5hGSacvcoCTSPZ-gqwMUkQSQ-kNOEH1MUdybJIAxGyBJs1jur5LgGOKkJ9dr-GoQSIYxyqVDneLaNDXDo1RBkN8reNws3fkgpncdHFbDKgAKEmwCPbP16sWeeS9CzDbKTH10RZ9Va5l5-2qqr--1YVr2JFFDm7BsO6JvwH4bboeo218Mr6yrCkf3x-darWD7pzG6ATM72LEullAEgrm0wQkvlAm1JGTHgtAgJokxQtUZEF1mXdb_ueX-2M3aKrR4biTBk-OP-t3jQCNuZG2RvONRBbpFdDODlku76K-jBgzP10-FHULH-JIhuCYxeSG_LV2TMaDbvc7XD7_GPUwQrVXNVylQCWnOMi1_jz4DU_Zj0ojKMI2-3-JioqZFPNL1MgHPjJZvqFW4ZJtroEMUY0fF8wG2ututPhu6d96ZeSq90F1pdGTmBjL5SDBnRh1Bsv6iAWE2JnbpN8lQ57tycbqm4nUtAhFcB7LPQ1qmla1qASUouKrGgqX1ECgMfF2pKTohxvucUc6cYM6r5CPx68qKTfc7cjIIluRUVff_dJWLtrZIMBtfMkCJ4Td5lBs5GhGGmjj-TxelA8NcFyY11_X3qb40ud7R3MqkBV-JdXJglVBXBteyXgoaqr4jQylfNK84tusX7Ys8TREALtW8aQXeOBqVKNSXhGbdlAzgfA096cM8a3ECdSPTMf4F0djG4DkZs-oYzPtJv40H-uoo8z0hm_2CPSd7LpPkKuzT8R3p3Togu1fsRGYi4s3IPJmKuBRGOq13dAKtapoUEsUPlt1Jdl9AvUtNqmPqfbSOtfeAQKUDJIjDGlOcZxXpwzEWQJ_x1etkswjK8mHf0NloL27ZIKUkDCqEmKsUEonjgOpy7nehExa00S5BoIE_dfk5xgm8llNWBcK3cVa4wo0FsUi4MYbZ8UHyweWECXay-4YsUrH78LF_BMfk-Fs1yV6iB5dVJDXt7j9fkc0GFlUrdhrZYT8972lflT2nmGwZRT8qjWS4Gb7wAWSeUCPNAOmrFJ4HJqLu9N5ZAIK3kkR2zYKVP5KagE3arOrHw1RVRwVhu7IW3oA6sms3onqiltlR73WHoun60b8dUno0K3a8kNHPhJQS3u0MO8ukh28sgilTZhv711zzaeQntLevTrmoAw3NcHo5_ZpwJovKCYGyQ1WrDOR6pqMsehrslVX2tSNDQreBleQrsnWAw3Y5cr2BXKkuTj6y9G6gyOWF_fUdws2AePzSBSALGS3ZpKtT5c-sUgxdTpQtENEt6nr__KNOKiG1gbKCDmxI_OGeWUX_yILSzZYD9jlEppy8WCOx58ed2ZAcrGXqgbaRLJmcRhvTXku_Pi3MaKP7m8VxBrKhBpqRm6iQr6QlkcwUk-GKdJ_Ij888q2sup_9s5rHPrzXHkeL9kcR2F-JlaC_tcy0gR9yyIPJQSKeAMmJlo4mG0aIouKsX-TlNdntgsVlpMnlYQhKZI9d07sbn5S3-61aes9c6xAHvo6lNY5Msij9ItVTArjOo8VX-Rd45SkXvEXZQBCMcLcjDZpWzmLjLnYqXVU1og_vPOZm59dk3e4xg5xINt0pLHtWh_N6dwUOrB8o5_BoRKpyLSUQ_Hnnqrw5PDUOkN9Yam72dXUqbbkTLbKPUOv6nCTycZ_VKnZO_piSnTaba7yS9muFmqX14MKw2DyEsuw0O6speNQAWolvrHOY_bgKzQI9hRnMKqJpR5mFPR7LTPhst-VEaGNC45iczvKVQKr10Zyxpn9zABjGif-SiPYAhREcOx96jKFAearRs0qbCiaMHWhy4jlte2oMWCYa0IKin5eQdx8fRySBv3ktmujESGlXlasmZTUDZqUu-vZyPKQ7cqPTFYs0w0fRTFobtgxO9GwBTvWmiXjTq2IktwAnba8JZcf-bfiMcCFVrQEgx8p39qB-4tFbulBCNX5Onm97qBSaDfCg7xOeFmx2llJ-Bpx27F8IRbJgxjR-x-P_iq9Gl9JqDNDHYzZTQxfb9uQRYla1gtCjJ3qlOz42_8z2Znu-EpgCXPNwK-rWCKCDB1JnN5iwxNuz5OBUComqsvbH9jMJddv-JMtg11QNJJpU-4zjJXs6_IHhKe9dvFumLL1SZLEg2NctSZvuatZ_hNvfg61wu1Nu9mJD6GyHVSxaGBz7cSOmSYu1J1s1ZUn_hcqOe15TRoPtghCEJ7ElHxDDHI4QdWb8G1EhdrOZbbpzO97ngWVmp0e1uBLqR3Rwpf3aQ0yj0m40esApvevIAOx_G1RdtgansIX3ynKiBcsOXd9ePvEKG9wRPqkV3_WXvWja75cGry44rdHxdsKzMkW5-AyO1bJcoRl8B9y0voPCYidLpt0N4N0677S_10hPrqw5pgNhC-LReFUyMuV9P1rYqoVuUjHxU_47W7hEm4jQjRCPej38ZWI2Xf6FJt4bv5Frz4E3vfkx9pcSHs8nkxMEJtR6KwmftlJjaHwbyB0y8dOOVBcM4hMDFvnupCzfffk2KtJKB_T-VK-b8CdT1RvFuUsXuL4PCDoGcBeKpcwOfXuPab8hHTX6b_LYKmCWKUonOllyL3_llQP5MxjrvpP9XIjq7MSc9MY0tG5nvOEA39Aeki1rl3lqWsGvjh6XvmloTaSAK4v_1BBdXX7KMBAdq4ggCl9OwNjeZPfp1jP8_vWKr1G
    idsrv.externalC2=KZyR84woIoV2Zg9Xo8OPS4bGHIcPD0FqbvqtSwOuJRpJJUdfE9FUcQGoiHwbU1B3wdFOw8gNcLS7YCjQ1v-gRp-mDNcxT0f2cLtGWuy99jrwJozDlIVkw8KhWdPD8iCJbyFYcfd8Z0AMeS9O0wCAXa06626w2lsgycl2cidLlLLjKcXBkinEcKwDHy9F-n2EI-OqaJOUXmEDyDZRL452dLW3863wnl57M78zDqaJk-jr5gg8W-kkNdD8S19WqaWBqNu9vCc_CjLv0W1epS9N5uEPEioHlIXYV3V0nqu0ufjAs9R0cJ6xS1ZTYrkRp1yswVCrwB6Su_YrClBLSfqaRiKOD7Fs2sENB2Qw09cyG9aAl0p0Hp2dUczMWBVwJ_6Jo5sv4-Bvi9NywUxN8Ex-zXECPB4XfSJciwaNISJX_qLTzUheN36Sk11BLkV8rkrf1Lk8Ic_XZKOh7BDGHvbuNjLtKBgRe2IP_QXWVvfjSNEcNW4htdfYiEjXR-cc0sQRCbZ9KUYlMHGSy9rxQo-nIVUfMZMZVvfVWiCleE3BPfrxlQvEpTzheKttB7PkizWCmzfVqDuYHufGrdRx6dedlyzJyM2DAAByqtdG49goDuNv7eDYmGcx3GsKm74KZcYZII_NP-7cDaFo3A4n0ZQYdFWb1-S8vo6UYCSTKt4tzB4aEO7S2OUh1phznIj3TkNEFrwKockiNE9eZZEuqhA0TqZ1ZR3cfkoSdxB04iyJcNwHrO9UmB50Baj2e3D-7GKVeIhR7sVsEwEZDiYk1HvNghQ27E6PYpAUSuOWC9axWnwkbPZX9yBMtevzanvQ9JDYg4OmXDBFdbMDKJJFEqx4cknYo24jcZreBHWlSSDqabTmLTDe6f3q-yrhAHIvZ_ZvSFIY4bNpWi4ha9Va7PdUcPt92ZMfbH6JfB2mdXXtN2x5U5OLIbertk5WclKEU17XRAEzvvG7B_bZzeVdKTrf1a_Y98ZE-FL5m-iD5bSlIlibee7JZMgUs1L9JSgP9U73cCNZ_GTrfYlszejFtQx6QH7tTmjL4JR0EsU3iSR6Jwo_tkh0BH4kVC_3OWdHwEwuGGB8lW5rdR1Lj6bOl_G_XeiJHhOGIeHR3Qay0DWraFQJSg8f-xDA19rp_Iv7UYxCxL0aEYimNldukbrABtYSnvGkdAHYaxmoOl8C4z0A4-i_F75D6gcWR8YvIpdk0NbrMDD5gqEC8VAkJbEsVcn7VsLnFAOYmUzYFcaXi0brl-MFVupTkqYs7omG_Br3ySKm-bWh5Ud_BI7VJsg6nMe529Y-9a3M0nUQp0xNIRHcBloNXVWMVlc0Tkp6DvaB3AOnfhQz8huhthAPwVRm5IGbYdakpK2veJEQwnCwqXJyMSdQON3COtLVbjLXyl-NSbH9qwAeXEOl0NJnGZpb-i83OD-jhzEAv8WjIv1DQ_TXg5sJnbcnXK6gfYL0st9diS4Yjk6B57ndcNpLmsilkuOUYOLI7U8kuiyJZ4E6f_wLNhHlai7BA4LS3htjUKWtllQLaXYolv6yA4jfIYRvqx0gr5cIKoNKYR8xKJF6jJjf7csMA6FpxDyLV-HxsxeII48y9H4s4m3ON6Pum_JBU2aaHkcHWPF3ChFBGN085hoULqdjDpuVaqYjBkgEPYgibvK8DxuLOe6ZoDwjxE0ivr5QqZ2E20hT9umayvaFZI2CN7JlwfhwTLhxLfIcmMwZNM2Iq8i7WyQjLGMIlpzfOSJY8zw50QMwq7YoVe2tw37LLtEEHkKgVF8I0wMpv3e6WjQgU29B0jwQ1jZb-vw2EZs5Fa3vX8aaRiePvk_dIboX5BfdbPEydiRuwgs7xTJE-qIeUBdOsvjolVYMxexZwK7xhFAaK1Jo8Ei2gbxHOd_NBf1tDvCpo2pDQvgiFP4TCoxewpdf0G6usRIwG-sHS8tXvC4p9ULuia7zy9UoCi0wLnloin4G9wKiTayz0P0SZV5kQzZ8hHdRyhUYbjhbbmbxOScL3KcCvOin0GUYpdEkLD6b77-lGMr37BjkaN2KcjEwnlXJy_vcodCVldickvS56EV7vapjGufjadWYC-1fkW9cKx9UILinjLu53_8YLNSu2E
    idsrv.session=06f915f727210203d7a3a7b33c9b71c4
    .AspNetCore.Identity.Application=CfDJ8FAKJpEizERFtUzdjBClgcsxHzhEvACA_rNY65inIdjsRmJSE-Fh0Rnh8-R9lgP4qqd4OYwbPSO-k1lnCbUuNjQyjuqe2RiJSQpHV1R1AGv8MBqJxY7ONiaz2Z7xyn14EM0i2h8Ev9Be5AhuJAnJCxA_tVCGOqYsq9JwILLLj-gy0JBRtV4AW-WEfpaHDZ6_F41Uz_6mrJLAlY6mjy0icolbAVBoIYaWZRnnAjgY9Wh_PTHt7x2VQv98ckNyKMXbUMmbPY2HP39Ic8tjJx3LF8GDQ0ZqAXoJ7gxuKGRZP65vkcmLytrkAAxyVJr59cGy_lGbo6_YrY1dXLPA7zaPWwuPbejI_ox4gy5pYfs1gWn1UlkiqHQR2W4KXo-izTeGKO2QyA6jVfTn-vj8lHtk3sYVPCDuXaUV0NCyJqDzRtIkBu6JgeZY5VmoS0y_vSg_eqWu8QCk1IdfT-sgdyrDwO8M6u812c4evoFmzb0mNoCcjjOLH9x2DnDzSI_DRDFiieOXfhWJc1-py426_cBBmHmGsOyHTzhmQFVqM4_-rDOo-Qa_eIK61sYw-vV2fC3LW5sG7RfXzrlzK8ICfW1Mumk02pP5JLnt0s_7OqP2gnUdtuFl91YzjMxCnMcVbjCPY2trOveE3g9o0n83S9mxJW8kXbizXMMlaFWoZ916HXE7iYpgRUB9iAJKxe1uT0dOkEjI7ylnJJtsg35kXK_IP-bpB7oKUv-u2Y5Jjud2cpsYFyP5kf69a6zSs26Ip-FWFbxpXA1ZxwBCObL0L3TH7WDI2uLW3Jm32WJkrcNKnJRPvgmT263DPwxwj97hXjVloYJPvgz6_QOWNIsYdwwz_Us-Q41SHpwhoFQPTQHipMOv_bHuevdFhoxRButS3L_u3ioChlthgAoOYi8EA-ij50FLtPMVTWiqBOhbLmAO2bYPENavAACdT1rFf694pY57MRoeq93tQyjcccj9GgFNBzvPjDHUHioO7iPTJlhRLKZSJAYyKYF_5IgzIj8bJT-_J5Lt5O7g_xePWRHo6Op-p1lVJKrTK2lc_irmLh-IOr8sQM_QQBuIkoG5MmwuB0O0znw09z6gUS6T_VN-zykWaAmIv9yrcNTpWDGENJ2UgA67wYrI6q9ROS4aZEx18nYTqMta1IyIxwoGw0Th3tPptavjBjNCL9W2kQhLvtY-PNkRoiZ7FIZCmhae8eQvGFbjp8ddK_5lpr1aNHV-e053NAOmTrx9SW3LYQhxl50Vff2Hbl-CsB2neePWmMuIZw3KH725boOezpsKbaV2lYTplXBOy27lUR37EbMisC1YHJB2Ez_fuTEIeOdhXpAiUSLA9mTu14x0Nw1T_tlbNk1aYut0Xxy_aC3minbNnuWjQxm7QH2ZoqKxCknNn1FmKdjA_x2rDOlNykmCKIlua-7q8r2r1WjJnr1ti9XJUQMMI6znOrBLb2rnpuTDEyackBkhgCHFz9dWI7xSI5UlJOiwF9B-ff8iHtv95biuUv4r-hl9vg7EaHw2G1-b9_dChxfxaUZUnC2ievN7RVW-_xRno-Ygmu8sH4gMHmhjekrQIk2kLNYu3eZ3DVR8SQYwBytPasMmE1SBw40YAJQMlyiWovPEF2cs-UIRNFhsyC4OPvnvPVK-EwFOvkhcIlDxLdIyrqIiSOkNRZgHaSuD-W1htyz0NOoowFZGsE5xRDvPQ0rjox-uomqf0xmDlkYBzlcHjRu56QTBVsvRRmX1h-WVDBeVw4US-Bicda11rN4UF9GYT0-wPUeX4oaK7xg2JdWusl1NKtR8IGpWF7r4JLkZ0wFRNrgvC-fjo377KGQQOR66W5EwCPTzHCcFL8XEPlYYUPXPvHRhzgGRgEHJSC79B23oPLm6kuilQE9kqsIRDMirP2vk4a7p-IYXmv_4SaRX8v_5CRhpNG_GyFT8W828FjWAwKmRH0lyEFjynKX2RTq5l3YafflKyW7Hl9n0JZCkgKMSBe79j1o9ED_IowQwa0ZJjh3iSqAqH4JiscLAbC7NgwjfffzWZyYH9muuEKbrD-PznMxbvB6AbGHzKyOqOCx_t23fye5q_trPvHpFXphnQPLLU14gVFJh9bvHuCmQyRfAYdlyMJKgO5tVHMp8P3XKw721-qhLwQ6wM7yXq07Znng5zStwjnvtNQzRfK_IUlG33EZ24bqtnfFtTztXOHxCpw5RslK7k9PRw982rP1CG-OOpv7IP-cIhD9FlJ2z9N5ADPrF6f4NDrAP-ZSzMDW1QBH3hjv2KhEqhxXFDHjoLUmfGIwN9KHS65KLv6q5VLDgzocHxHOYIHGsAZF5w3M2MJ9Udqm_g6p8yx7nEt4o9DvygFWF28_ePLfnIzO3bW-FReImZXhKTzErgwYJWEaeoWwKdK8c78bu_EnKc2Tz_RQOZz5kL0KVwFkbCaTJJ63shaqNqv6b7x_NCvI7RxlcXynbKx46VMK4c-UQBaE6F5Wgjxu7NVzBvCnv8upWBooxZyE9Ckiro4jVvYJfbNrnHIJz50CBHJlOj6hTf46hxlnzu5bRjPN1hCtCTq2jfIr72OBURkkiPfSyQqh2zMfNilVuu84yZhzcJlg2rIRohMhTH_TvKVPlJkIQMV3Uf_TKqDW1d-mRBqAju3mXKQb1MtYWD9ddFKwsKBSwdPm9BfYidYCi5SJfGe6Fks6ugw

Note: My identityserver4 is part of aspnetboilerplate

[damienbod]

closing this, please open if you still have an issue

[junyuan]

@damienbod I tried 'angular-auth-oidc-client' by following the https://github.com/damienbod//tree/master/projects/sample-code-flow code sample.

I was able to redirect to my identity server login page, I was able to authenticate using the external auth provider (Azure AD) but while redirecting to angular application I am receiving the 400 Bad request error.

I modified only the app.module.ts to reflect my identityserver4

app.module.cs

import { HttpClientModule } from '@angular/common/http';
import { APP_INITIALIZER, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { AuthModule, ConfigResult, OidcConfigService, OidcSecurityService, OpenIdConfiguration } from 'angular-auth-oidc-client';
import { AppComponent } from './app.component';

export function loadConfig(oidcConfigService: OidcConfigService) {
  return () => oidcConfigService.load_using_stsServer('http://localhost:44380/');
}

@NgModule({
  declarations: [AppComponent],
  imports: [
      BrowserModule,
      HttpClientModule,
      RouterModule.forRoot([
          { path: '', component: AppComponent },
          { path: 'home', component: AppComponent },
          { path: 'forbidden', component: AppComponent },
          { path: 'unauthorized', component: AppComponent },
      ]),
      AuthModule.forRoot(),
  ],
  providers: [
      OidcConfigService,
      {
          provide: APP_INITIALIZER,
          useFactory: loadConfig,
          deps: [OidcConfigService],
          multi: true,
      },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {
  constructor(private oidcSecurityService: OidcSecurityService, private oidcConfigService: OidcConfigService) {
      this.oidcConfigService.onConfigurationLoaded.subscribe((configResult: ConfigResult) => {
          const config: OpenIdConfiguration = {
              stsServer: configResult.customConfig.stsServer,
              redirect_url: 'http://localhost:4200',
              client_id: 'angular',
              scope: 'openid profile api1',
              response_type: 'code',
              // silent_renew: true,
              // silent_renew_url: 'https://localhost:4200/silent-renew.html',
              log_console_debug_active: true,
          };

          //config.start_checksession = true;
          //config.post_login_route = '/home';
          //config.forbidden_route = '/home';
          //config.unauthorized_route = '/home';
          //config.max_id_token_iat_offset_allowed_in_seconds = 5;
          //config.history_cleanup_off = true;

          this.oidcSecurityService.setupModule(config, configResult.authWellknownEndpoints);
      });
  }
}

URL that throws bad request

http://localhost:4200/?code=8bbb3f7008b4f219f0da633793d328abc021ece8956082e3a4b9611e5f82451a&scope=openid%20profile%20api1&state=15662138560910.64395859527703370.17670985013411666&session_state=dxcFqB4V7dEpkEdGuGY5FqpayVPTwRWisefxJRQJ1cY.a5e976e31c738ede10bcfc58e1040dd2

Cookies

Request sent 9159 bytes of Cookie data:

  .AspNetCore.Antiforgery.xkdte50z5pg=CfDJ8FAKJpEizERFtUzdjBClgcvmEYA4FpRSoL_XEWuf7LdG4P7Wa3GE67SHEjY-r10cOH203Azj5z_zh_92H2eDzoJQD-5OBFLMxIykCL67yl1tadsRulPB5p6xDgRitXwvxobzmx-iovC5uoXh1lcRuwc
  idsrv.external=chunks-2
  idsrv.externalC1=CfDJ8FAKJpEizERFtUzdjBClgcuPLGOOoartcJyngrawbAE-m1McrfwMlNyDTnapxo5XUUqGff8jDd99DmwtHB7R5WfGUluBYd-QHG1Hswih8sr8YN0dHZhkUnEv-cptirN6Q0sars5JhFGpDYVH70F1PluMgv6bc3KXKXmAx1zH_qJTgyZ8kpDvNCpfqOZ-0Of-5ZkrGYBzEr2CavToZ6JbWJx9Ie28JJahiyqGEeb_oigqK10JsjwOe0VgVT8HgmIkSJMFP9NBPEkt63vUPiar90I-sDyfl1gyqeVsS2U3QxB_0zMnY8mC01dPinvCQJMXSim_X0aJkrT_wmC_OaYC_BlvFFJZJjKCqHKRJfyuAlGvDEw9pdITQndIDmKl1XCPwaZbNnvsAKI3N3sg0OGCPy1Gm2jliiZ8v0Vb_SJKPfzi35gS59nCQVvCawSSYA7bCzS8IhZ7UyJy-Z3jQRiIN6x98_KAhSlo2H4DB8cEdlRUsCuUQRX5FviUwCBlsn0jV1d-h1NA3WxJw-1Ud7TZngOwBBlCXDNwpNyljI7yk00PaLsjODlRuagGIBSzQz3WoY9yc2AWBBkFMtmdl5Tj_6_JRgO0InD8SLR-79jtLR2de2ewAC3hqNMEOrhqwK5Re5v0yLVuSLY0LSK1CJUJO9lLdRAWkWSfURucYhQCxqUMnayUGk9F-C8YC4B_oV4Cv7CUJEkknZ_PIlakCDfjLf24XGTXTvqDYixDIFLwwBeLHK35FSTRZR94wQ4nIeYLPoF6NXFREAe6CSL1IiSxR_7a2u9WDpxDjiM3j7tfd_AwRsHUH81uINhQEx4c313vG0IVfM5FLIB3M9anEqq6HE_9rv7k9Nx7BB4o-KPmRaG34Scr4WRSjUIOF5ftlfBShnEQcq7entAO-pdrsQp-GJOLjZwzdYgZhNHaF4gX1OzFuFwBeDGF3XrIQvmu539O-pwz2tuQL-CHsVkMCVwBeVHEDo7b-TXFXblbE98HWDdJxFV_32f7eX7s7B2F-JqT63kDfjt2rdnzudJzZkm0QJDcx_zp7bJ83pwGYDHhV3V98yVeNJLhuNN0D-YYhQ8YkYDcZagpxticXnHhGaD-qKfa7U7tC9a7edHp-DVGb59BGrESgV5MamNpvVj1BcwsqTsef9NNXK5rsPhY6TTpQH5b8jSSyOqVKa-ZUa6-gEXc3JHbFmom1x_AoDOusKPyouJQ5EjjdGruaLh-LNuRNzmiduWh1vcUNQM9WyRAsr2H-hHV28A0hH6rkQBDLn5YJ_bt_moknhSStRkto0C-MVT9z7B4fVtGymAk56BtC8O190Q522nK5hGSacvcoCTSPZ-gqwMUkQSQ-kNOEH1MUdybJIAxGyBJs1jur5LgGOKkJ9dr-GoQSIYxyqVDneLaNDXDo1RBkN8reNws3fkgpncdHFbDKgAKEmwCPbP16sWeeS9CzDbKTH10RZ9Va5l5-2qqr--1YVr2JFFDm7BsO6JvwH4bboeo218Mr6yrCkf3x-darWD7pzG6ATM72LEullAEgrm0wQkvlAm1JGTHgtAgJokxQtUZEF1mXdb_ueX-2M3aKrR4biTBk-OP-t3jQCNuZG2RvONRBbpFdDODlku76K-jBgzP10-FHULH-JIhuCYxeSG_LV2TMaDbvc7XD7_GPUwQrVXNVylQCWnOMi1_jz4DU_Zj0ojKMI2-3-JioqZFPNL1MgHPjJZvqFW4ZJtroEMUY0fF8wG2ututPhu6d96ZeSq90F1pdGTmBjL5SDBnRh1Bsv6iAWE2JnbpN8lQ57tycbqm4nUtAhFcB7LPQ1qmla1qASUouKrGgqX1ECgMfF2pKTohxvucUc6cYM6r5CPx68qKTfc7cjIIluRUVff_dJWLtrZIMBtfMkCJ4Td5lBs5GhGGmjj-TxelA8NcFyY11_X3qb40ud7R3MqkBV-JdXJglVBXBteyXgoaqr4jQylfNK84tusX7Ys8TREALtW8aQXeOBqVKNSXhGbdlAzgfA096cM8a3ECdSPTMf4F0djG4DkZs-oYzPtJv40H-uoo8z0hm_2CPSd7LpPkKuzT8R3p3Togu1fsRGYi4s3IPJmKuBRGOq13dAKtapoUEsUPlt1Jdl9AvUtNqmPqfbSOtfeAQKUDJIjDGlOcZxXpwzEWQJ_x1etkswjK8mHf0NloL27ZIKUkDCqEmKsUEonjgOpy7nehExa00S5BoIE_dfk5xgm8llNWBcK3cVa4wo0FsUi4MYbZ8UHyweWECXay-4YsUrH78LF_BMfk-Fs1yV6iB5dVJDXt7j9fkc0GFlUrdhrZYT8972lflT2nmGwZRT8qjWS4Gb7wAWSeUCPNAOmrFJ4HJqLu9N5ZAIK3kkR2zYKVP5KagE3arOrHw1RVRwVhu7IW3oA6sms3onqiltlR73WHoun60b8dUno0K3a8kNHPhJQS3u0MO8ukh28sgilTZhv711zzaeQntLevTrmoAw3NcHo5_ZpwJovKCYGyQ1WrDOR6pqMsehrslVX2tSNDQreBleQrsnWAw3Y5cr2BXKkuTj6y9G6gyOWF_fUdws2AePzSBSALGS3ZpKtT5c-sUgxdTpQtENEt6nr__KNOKiG1gbKCDmxI_OGeWUX_yILSzZYD9jlEppy8WCOx58ed2ZAcrGXqgbaRLJmcRhvTXku_Pi3MaKP7m8VxBrKhBpqRm6iQr6QlkcwUk-GKdJ_Ij888q2sup_9s5rHPrzXHkeL9kcR2F-JlaC_tcy0gR9yyIPJQSKeAMmJlo4mG0aIouKsX-TlNdntgsVlpMnlYQhKZI9d07sbn5S3-61aes9c6xAHvo6lNY5Msij9ItVTArjOo8VX-Rd45SkXvEXZQBCMcLcjDZpWzmLjLnYqXVU1og_vPOZm59dk3e4xg5xINt0pLHtWh_N6dwUOrB8o5_BoRKpyLSUQ_Hnnqrw5PDUOkN9Yam72dXUqbbkTLbKPUOv6nCTycZ_VKnZO_piSnTaba7yS9muFmqX14MKw2DyEsuw0O6speNQAWolvrHOY_bgKzQI9hRnMKqJpR5mFPR7LTPhst-VEaGNC45iczvKVQKr10Zyxpn9zABjGif-SiPYAhREcOx96jKFAearRs0qbCiaMHWhy4jlte2oMWCYa0IKin5eQdx8fRySBv3ktmujESGlXlasmZTUDZqUu-vZyPKQ7cqPTFYs0w0fRTFobtgxO9GwBTvWmiXjTq2IktwAnba8JZcf-bfiMcCFVrQEgx8p39qB-4tFbulBCNX5Onm97qBSaDfCg7xOeFmx2llJ-Bpx27F8IRbJgxjR-x-P_iq9Gl9JqDNDHYzZTQxfb9uQRYla1gtCjJ3qlOz42_8z2Znu-EpgCXPNwK-rWCKCDB1JnN5iwxNuz5OBUComqsvbH9jMJddv-JMtg11QNJJpU-4zjJXs6_IHhKe9dvFumLL1SZLEg2NctSZvuatZ_hNvfg61wu1Nu9mJD6GyHVSxaGBz7cSOmSYu1J1s1ZUn_hcqOe15TRoPtghCEJ7ElHxDDHI4QdWb8G1EhdrOZbbpzO97ngWVmp0e1uBLqR3Rwpf3aQ0yj0m40esApvevIAOx_G1RdtgansIX3ynKiBcsOXd9ePvEKG9wRPqkV3_WXvWja75cGry44rdHxdsKzMkW5-AyO1bJcoRl8B9y0voPCYidLpt0N4N0677S_10hPrqw5pgNhC-LReFUyMuV9P1rYqoVuUjHxU_47W7hEm4jQjRCPej38ZWI2Xf6FJt4bv5Frz4E3vfkx9pcSHs8nkxMEJtR6KwmftlJjaHwbyB0y8dOOVBcM4hMDFvnupCzfffk2KtJKB_T-VK-b8CdT1RvFuUsXuL4PCDoGcBeKpcwOfXuPab8hHTX6b_LYKmCWKUonOllyL3_llQP5MxjrvpP9XIjq7MSc9MY0tG5nvOEA39Aeki1rl3lqWsGvjh6XvmloTaSAK4v_1BBdXX7KMBAdq4ggCl9OwNjeZPfp1jP8_vWKr1G
  idsrv.externalC2=KZyR84woIoV2Zg9Xo8OPS4bGHIcPD0FqbvqtSwOuJRpJJUdfE9FUcQGoiHwbU1B3wdFOw8gNcLS7YCjQ1v-gRp-mDNcxT0f2cLtGWuy99jrwJozDlIVkw8KhWdPD8iCJbyFYcfd8Z0AMeS9O0wCAXa06626w2lsgycl2cidLlLLjKcXBkinEcKwDHy9F-n2EI-OqaJOUXmEDyDZRL452dLW3863wnl57M78zDqaJk-jr5gg8W-kkNdD8S19WqaWBqNu9vCc_CjLv0W1epS9N5uEPEioHlIXYV3V0nqu0ufjAs9R0cJ6xS1ZTYrkRp1yswVCrwB6Su_YrClBLSfqaRiKOD7Fs2sENB2Qw09cyG9aAl0p0Hp2dUczMWBVwJ_6Jo5sv4-Bvi9NywUxN8Ex-zXECPB4XfSJciwaNISJX_qLTzUheN36Sk11BLkV8rkrf1Lk8Ic_XZKOh7BDGHvbuNjLtKBgRe2IP_QXWVvfjSNEcNW4htdfYiEjXR-cc0sQRCbZ9KUYlMHGSy9rxQo-nIVUfMZMZVvfVWiCleE3BPfrxlQvEpTzheKttB7PkizWCmzfVqDuYHufGrdRx6dedlyzJyM2DAAByqtdG49goDuNv7eDYmGcx3GsKm74KZcYZII_NP-7cDaFo3A4n0ZQYdFWb1-S8vo6UYCSTKt4tzB4aEO7S2OUh1phznIj3TkNEFrwKockiNE9eZZEuqhA0TqZ1ZR3cfkoSdxB04iyJcNwHrO9UmB50Baj2e3D-7GKVeIhR7sVsEwEZDiYk1HvNghQ27E6PYpAUSuOWC9axWnwkbPZX9yBMtevzanvQ9JDYg4OmXDBFdbMDKJJFEqx4cknYo24jcZreBHWlSSDqabTmLTDe6f3q-yrhAHIvZ_ZvSFIY4bNpWi4ha9Va7PdUcPt92ZMfbH6JfB2mdXXtN2x5U5OLIbertk5WclKEU17XRAEzvvG7B_bZzeVdKTrf1a_Y98ZE-FL5m-iD5bSlIlibee7JZMgUs1L9JSgP9U73cCNZ_GTrfYlszejFtQx6QH7tTmjL4JR0EsU3iSR6Jwo_tkh0BH4kVC_3OWdHwEwuGGB8lW5rdR1Lj6bOl_G_XeiJHhOGIeHR3Qay0DWraFQJSg8f-xDA19rp_Iv7UYxCxL0aEYimNldukbrABtYSnvGkdAHYaxmoOl8C4z0A4-i_F75D6gcWR8YvIpdk0NbrMDD5gqEC8VAkJbEsVcn7VsLnFAOYmUzYFcaXi0brl-MFVupTkqYs7omG_Br3ySKm-bWh5Ud_BI7VJsg6nMe529Y-9a3M0nUQp0xNIRHcBloNXVWMVlc0Tkp6DvaB3AOnfhQz8huhthAPwVRm5IGbYdakpK2veJEQwnCwqXJyMSdQON3COtLVbjLXyl-NSbH9qwAeXEOl0NJnGZpb-i83OD-jhzEAv8WjIv1DQ_TXg5sJnbcnXK6gfYL0st9diS4Yjk6B57ndcNpLmsilkuOUYOLI7U8kuiyJZ4E6f_wLNhHlai7BA4LS3htjUKWtllQLaXYolv6yA4jfIYRvqx0gr5cIKoNKYR8xKJF6jJjf7csMA6FpxDyLV-HxsxeII48y9H4s4m3ON6Pum_JBU2aaHkcHWPF3ChFBGN085hoULqdjDpuVaqYjBkgEPYgibvK8DxuLOe6ZoDwjxE0ivr5QqZ2E20hT9umayvaFZI2CN7JlwfhwTLhxLfIcmMwZNM2Iq8i7WyQjLGMIlpzfOSJY8zw50QMwq7YoVe2tw37LLtEEHkKgVF8I0wMpv3e6WjQgU29B0jwQ1jZb-vw2EZs5Fa3vX8aaRiePvk_dIboX5BfdbPEydiRuwgs7xTJE-qIeUBdOsvjolVYMxexZwK7xhFAaK1Jo8Ei2gbxHOd_NBf1tDvCpo2pDQvgiFP4TCoxewpdf0G6usRIwG-sHS8tXvC4p9ULuia7zy9UoCi0wLnloin4G9wKiTayz0P0SZV5kQzZ8hHdRyhUYbjhbbmbxOScL3KcCvOin0GUYpdEkLD6b77-lGMr37BjkaN2KcjEwnlXJy_vcodCVldickvS56EV7vapjGufjadWYC-1fkW9cKx9UILinjLu53_8YLNSu2E
  idsrv.session=06f915f727210203d7a3a7b33c9b71c4
  .AspNetCore.Identity.Application=CfDJ8FAKJpEizERFtUzdjBClgcsxHzhEvACA_rNY65inIdjsRmJSE-Fh0Rnh8-R9lgP4qqd4OYwbPSO-k1lnCbUuNjQyjuqe2RiJSQpHV1R1AGv8MBqJxY7ONiaz2Z7xyn14EM0i2h8Ev9Be5AhuJAnJCxA_tVCGOqYsq9JwILLLj-gy0JBRtV4AW-WEfpaHDZ6_F41Uz_6mrJLAlY6mjy0icolbAVBoIYaWZRnnAjgY9Wh_PTHt7x2VQv98ckNyKMXbUMmbPY2HP39Ic8tjJx3LF8GDQ0ZqAXoJ7gxuKGRZP65vkcmLytrkAAxyVJr59cGy_lGbo6_YrY1dXLPA7zaPWwuPbejI_ox4gy5pYfs1gWn1UlkiqHQR2W4KXo-izTeGKO2QyA6jVfTn-vj8lHtk3sYVPCDuXaUV0NCyJqDzRtIkBu6JgeZY5VmoS0y_vSg_eqWu8QCk1IdfT-sgdyrDwO8M6u812c4evoFmzb0mNoCcjjOLH9x2DnDzSI_DRDFiieOXfhWJc1-py426_cBBmHmGsOyHTzhmQFVqM4_-rDOo-Qa_eIK61sYw-vV2fC3LW5sG7RfXzrlzK8ICfW1Mumk02pP5JLnt0s_7OqP2gnUdtuFl91YzjMxCnMcVbjCPY2trOveE3g9o0n83S9mxJW8kXbizXMMlaFWoZ916HXE7iYpgRUB9iAJKxe1uT0dOkEjI7ylnJJtsg35kXK_IP-bpB7oKUv-u2Y5Jjud2cpsYFyP5kf69a6zSs26Ip-FWFbxpXA1ZxwBCObL0L3TH7WDI2uLW3Jm32WJkrcNKnJRPvgmT263DPwxwj97hXjVloYJPvgz6_QOWNIsYdwwz_Us-Q41SHpwhoFQPTQHipMOv_bHuevdFhoxRButS3L_u3ioChlthgAoOYi8EA-ij50FLtPMVTWiqBOhbLmAO2bYPENavAACdT1rFf694pY57MRoeq93tQyjcccj9GgFNBzvPjDHUHioO7iPTJlhRLKZSJAYyKYF_5IgzIj8bJT-_J5Lt5O7g_xePWRHo6Op-p1lVJKrTK2lc_irmLh-IOr8sQM_QQBuIkoG5MmwuB0O0znw09z6gUS6T_VN-zykWaAmIv9yrcNTpWDGENJ2UgA67wYrI6q9ROS4aZEx18nYTqMta1IyIxwoGw0Th3tPptavjBjNCL9W2kQhLvtY-PNkRoiZ7FIZCmhae8eQvGFbjp8ddK_5lpr1aNHV-e053NAOmTrx9SW3LYQhxl50Vff2Hbl-CsB2neePWmMuIZw3KH725boOezpsKbaV2lYTplXBOy27lUR37EbMisC1YHJB2Ez_fuTEIeOdhXpAiUSLA9mTu14x0Nw1T_tlbNk1aYut0Xxy_aC3minbNnuWjQxm7QH2ZoqKxCknNn1FmKdjA_x2rDOlNykmCKIlua-7q8r2r1WjJnr1ti9XJUQMMI6znOrBLb2rnpuTDEyackBkhgCHFz9dWI7xSI5UlJOiwF9B-ff8iHtv95biuUv4r-hl9vg7EaHw2G1-b9_dChxfxaUZUnC2ievN7RVW-_xRno-Ygmu8sH4gMHmhjekrQIk2kLNYu3eZ3DVR8SQYwBytPasMmE1SBw40YAJQMlyiWovPEF2cs-UIRNFhsyC4OPvnvPVK-EwFOvkhcIlDxLdIyrqIiSOkNRZgHaSuD-W1htyz0NOoowFZGsE5xRDvPQ0rjox-uomqf0xmDlkYBzlcHjRu56QTBVsvRRmX1h-WVDBeVw4US-Bicda11rN4UF9GYT0-wPUeX4oaK7xg2JdWusl1NKtR8IGpWF7r4JLkZ0wFRNrgvC-fjo377KGQQOR66W5EwCPTzHCcFL8XEPlYYUPXPvHRhzgGRgEHJSC79B23oPLm6kuilQE9kqsIRDMirP2vk4a7p-IYXmv_4SaRX8v_5CRhpNG_GyFT8W828FjWAwKmRH0lyEFjynKX2RTq5l3YafflKyW7Hl9n0JZCkgKMSBe79j1o9ED_IowQwa0ZJjh3iSqAqH4JiscLAbC7NgwjfffzWZyYH9muuEKbrD-PznMxbvB6AbGHzKyOqOCx_t23fye5q_trPvHpFXphnQPLLU14gVFJh9bvHuCmQyRfAYdlyMJKgO5tVHMp8P3XKw721-qhLwQ6wM7yXq07Znng5zStwjnvtNQzRfK_IUlG33EZ24bqtnfFtTztXOHxCpw5RslK7k9PRw982rP1CG-OOpv7IP-cIhD9FlJ2z9N5ADPrF6f4NDrAP-ZSzMDW1QBH3hjv2KhEqhxXFDHjoLUmfGIwN9KHS65KLv6q5VLDgzocHxHOYIHGsAZF5w3M2MJ9Udqm_g6p8yx7nEt4o9DvygFWF28_ePLfnIzO3bW-FReImZXhKTzErgwYJWEaeoWwKdK8c78bu_EnKc2Tz_RQOZz5kL0KVwFkbCaTJJ63shaqNqv6b7x_NCvI7RxlcXynbKx46VMK4c-UQBaE6F5Wgjxu7NVzBvCnv8upWBooxZyE9Ckiro4jVvYJfbNrnHIJz50CBHJlOj6hTf46hxlnzu5bRjPN1hCtCTq2jfIr72OBURkkiPfSyQqh2zMfNilVuu84yZhzcJlg2rIRohMhTH_TvKVPlJkIQMV3Uf_TKqDW1d-mRBqAju3mXKQb1MtYWD9ddFKwsKBSwdPm9BfYidYCi5SJfGe6Fks6ugw

Note: My identityserver4 is part of aspnetboilerplate

I think I have the same issue. I use IdentityServer4 as well. The request post to /connect/token trigger twice with same request data and the second one trough 400 error

First request body

Second request body

IdentityServer 4 errors for second request

Looks like identityservice4 will delete the record after validation which cause the second request failed. But I have no idea why the client trigger the request twice. It's only happened on the redirect with ?code=..... parameters and it's won't happen again after I refresh the same page. every time I open the url in new tab, this will happen. Please open this issue.

I use the "angular-auth-oidc-client": "^11.1.3"

[damienbod]

@junyuan

Here's an example using Azure AD

https://damienbod.com/2020/06/08/angular-spa-with-an-asp-net-core-api-using-azure-ad-auth-and-user-access-tokens/

use the src code to compare. Azure AD have many different STS servers... You need to use the correct one. Compare the config and what you have configured in the Azure App Registration in your AAD

Greetings Damien

[junyuan]

@damienbod

Thanks for reply. I didn't find any difference in your article. But I find the double trigger in my code.
I follow the samples to add this.oidcSecurityService.checkAuth().subscribe((isAuthenticated) => console.log('app authenticated', isAuthenticated)); in ngOnInit in app.component.
And my default route have authGuard also call the this.oidcSecurityService.checkAuth() to check if user authenticated. these 2 code both trigger the connect/token request and one failed.

The error is gone after I remove the code from appComponent.

Thank you again for the great project.