Logout GET /connect/endsession?id_token_hint=xx call from angular app was cancelled

[itorian]

I have several applications built on .NET Framework and .NET Core, all works well with Ids4 (3.0.1). Now I added a new angular (8.0.0) app with oidc-client (^1.9.0) in solution. In this app, login works fine but logout GET request to /connect/endsession?id_token_hint=xx was cancelled.

Chrome console error:-

Edge console error:

Other similar calls to Ids4 works well, here's screenshot:

I checked Ids4 log, it has nothing and even breakpoints was not hit on logout.

Do you faced similar issue ?

[brockallen]

Are you doing that in an iframe?

[itorian]

No.

Here's my client setting on Ids4:

new Client
{
    ClientId = "demo-client-app-new",
    ClientName = "Demo Client App",
    AllowedGrantTypes = GrantTypes.Implicit,
    AllowAccessTokensViaBrowser = true,
    RequireConsent = false,
    RedirectUris = {"http://localhost:15007/auth-callback"},
    PostLogoutRedirectUris = {"http://localhost:15007/"},
    AllowedCorsOrigins = {"http://localhost:15007"},
    AccessTokenLifetime = 3600,
    AllowedScopes =
    {
        IdentityServerConstants.StandardScopes.OpenId,
        IdentityServerConstants.StandardScopes.Profile,
        IdentityServerConstants.StandardScopes.OfflineAccess,
        "roles",
        "demoapi"
    }
}

Here's my configuration on Angular app:-

export function getClientSettings(): UserManagerSettings {
    return {
        authority: 'http://localhost:40908',
        client_id: 'demo-client-app-new',
        redirect_uri: 'http://localhost:15007/auth-callback',
        post_logout_redirect_uri: 'http://localhost:15007/',
        response_type: "id_token token",
        scope: "openid profile roles demoapi",
        filterProtocolClaims: true,
        loadUserInfo: true,
        automaticSilentRenew: true,
        silent_redirect_uri: 'http://localhost:15007/silent-refresh.html'
    };
}

When user clicks on logout, invoke this

signout() {
this.userManager.signoutRedirect();
}

I double checked id_token_hint.

[brockallen]

Is this using the new ASP.NET Core 3 template? Also, what do you see in the browser -- a blank screen, or does it redirect to the client post logout redirect uri? Finally, do you see anything odd in the IS logs?

[itorian]

Yes Ids4 is running on ASP.NET Core 3. Here's packages:

No black screen at all, clicking on logout creates a GET request to /connect/endsession?id_token_hint=xx and then loads back angular client app. This GET request was block is visible under chrome network logs, here all logs upon clicking logout:

Here's the Ids4 log file:
identityserver4_log.txt

[itorian]

This #3593 issue looks similar, he missed to check browser's network log to see his GET request to endsession was actually blocked.

He used MVC controller action in angular client for logout, which will not work if angular app is running outside .net and using 'ng serve'.

I see similar issue few more places, like on https://www.scottbrady91.com/Angular/SPA-Authentiction-using-OpenID-Connect-Angular-CLI-and-oidc-client

Is this because of updating projects to .NET Core 3.0 ?

[brockallen]

Not sure. I still don't know if you are using the template from ASP.NET Core 3 to use IdentnityServer of if you built it all from scratch.

[itorian]

@brockallen today i downloaded latest Ids4 (https://github.com/IdentityServer/IdentityServer4/tree/master/samples/Quickstarts/3_AspNetCoreAndApis) and then using spa client (no .net assemblies in spa) and running it using ng serve.

Changes made in Ids4 for spa client :-

1. Added a new client in Config.cs

// spa client
new Client
{
    ClientId = "angular_spa",
    //ClientSecrets = { new Secret("secret".Sha256()) },

    AllowedGrantTypes = GrantTypes.Implicit,
    RequireConsent = false,
    //RequirePkce = true,

    AllowAccessTokensViaBrowser = true,
                
    // where to redirect to after login
    RedirectUris = { "http://localhost:4200/auth-callback" },

    // where to redirect to after logout
    PostLogoutRedirectUris = { "http://localhost:4200/" },

    AllowedScopes = new List<string>
    {
        IdentityServerConstants.StandardScopes.OpenId,
        IdentityServerConstants.StandardScopes.Profile,
        "api1"
    },

    AllowOfflineAccess = true
}

2. Added Cors policies for spa client in Startup.cs

// for spa client - ConfigureServices(IServiceCollection services)
services.AddCors(options => options.AddPolicy("MyCorsPolicy", builder =>
{
    builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader();
}));

// for spa client - Configure(IApplicationBuilder app, IWebHostEnvironment env)
app.UseCors("MyCorsPolicy");

I still see exact same error, this is something related to Ids4 itself which blocks GET call.

I zipped and uploaded this project here so that you can reproduce it.
https://drive.google.com/file/d/1qktrN855vvb7XTCeJpudOVO30E88qPMs/view?usp=sharing

[itorian]

I found solution. It was angular which blocked/cancelled the request to end session on angular app.

Here's the older code:

login() {
  this.authService.login();
}

signout() {
  this.authService.signout();
}

register() {
  this.authService.register();
}

Here's the new code:

login() {
  this.authService.login();
  return false;
}

signout() {
  this.authService.signout();
  return false;
}

register() {
  this.authService.register();
  return false;
}

So, we need to use return false in the methods when click event is bind with anchor. If you have button to singout/logout then you don't need return false.

Reference: https://stackoverflow.com/questions/41458842/attaching-click-to-anchor-tag-in-angular2

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.