oidc-client-js | OpenID Connect and OAuth2 protocol support | Authentication library

You do not provide an idTokenHint (id token) with your logout request like the following:

You need to put tighter control over when signInRedirect is called, based on whether userManager.getUser returns anything. I would start with this approach:

• When the page loads, render the logged in state to a label on screen: true or false
• Use a temporary login button to trigger sign in redirects rather than doing it automatically in useEffect

Once that is reliable you can put back the onLoad automatic redirect. If it helps, here is some code of mine to compare against - you can run this code sample very easily also.

If you run SPA you, your best bet is oidc-client.

But the tutorials you have read are non-sense that suggest client_id/secret auth. No it is not save to have client secret in an SPA app.

For that reason you have the Auth Code + PKCE Flow. AuthCode + PKCE (Proof of Key Code Exchange) works like Auth Code flow (client_id + secret + a code to obtain the token), but the secret is generated per request (see here). This solves the issue of having a static secret and prevents replay attacks.

In the past Hybrid Flow, which would return the token in the redirect request from the Identity Server (after logging in and when being redirected back to your website) but this is the recommended approach anymore as Auth Code + PKCE is the more secure approach.

You can't use a code flow based in the backend in an SPA, because the backend doesn't know the credentials and asking user to directly type in the credentials instead of redirecting them to the identity server is less secure (and less trustworthy since your app has to actually see the credentials) than interactive flows (that redirect you to the Identity Server login page)

1. If you login the user on MVC application and you want to call the API on behalf of the user use the Code flow. In this case only difference between MVC and angular apps is that Asp.Net Core 5 MVC is a confidential client and you can use Code flow. But Angular 10 SPA client is a public client and you should you Code + PKCE. It is although recommended to use PKCE in both cases.

2. If you just call an API through MVC and as the app itself and not behalf of the user, you can use Client Credentials flow. This flow is for server to server scenarios and it is secure. In this case you should do authorization for MVC app as well.

So you are issuing a cookie from an API domain that is a sibling of the WEB domain:

• web.mycompany.com
• api.mycompany.com
• Cookie domain = .mycompany.com

POSSIBLE CAUSES FOR COOKIE BEING DROPPED

Maybe it is the withCredentials flag or maybe due to a lack of user gesture, since the user has not done anything explicit to navigate to api.mycompany.com, such as a browser navigation or clicking a link?

FORCING WITHCREDENTIALS

You can override the prototype like this in order to add the withCredentials property. This is a little hacky but you could limit usage based on the URL and it should let you know whether setting withCredentials resolves your problem:

The best practice is to keep your IdentityServer on a separate service, just so that you can reason about how it all works. When its is one place, its really hard to understand what is going on. I would start with a separate IdentityServer, and then merge when it works and when you fully understand what is going on.

If you get the "You must either set Authority or IntrospectionEndpoint" exception in your API, then the Authority is not properly set. You have the source code for the exception here.

In your Api startup, I would also set the default authentication scheme to:

services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)

See this page:

It is possible to send a message to the identity provider using oidc-client by using the args parameter of signinRedirect method.

If you take a look at oidc-client-js/src/SigninRequest.js from their github repository, you can see that you can supply the following optional parameters to the aforementioned method:

• data,
• prompt,
• display,
• max_age,
• ui_locales,
• id_token_hint,
• login_hint,
• acr_values,
• resource,
• response_mode,
• request,
• request_uri,
• extraQueryParams,
• request_type,
• client_secret,
• extraTokenParams,
• skipUserInfo

Later in the code, on line 75 of this file version, they have this:

REQUIREMENTS

There are 2 main aspects to making this work. It is a design pattern really, and can be implemented in any language:

• Trigger login redirects based on whether you can get data from APIs
• Handle the login response as part of your page load, which then makes tokens available for calling APIs, avoiding further redirects

You'll have to figure out the Angular specifics, since I don't know that framework. I hope this gives you a few useful pointers though.

RESOURCES OF MINE

The code below uses plain Typescript, and you'd need to translate that to your preferred Angular syntax.

• Code to get an access token. Note that the getAccessToken function triggers the login redirect.

• Code to load the page. Note the call to handleLoginResponse as part of page load

• Code to deal with access token expiry. Note that on expiry a new login redirect is triggered.

• Blog Post with more details on initial OIDC client integration

My blog also has some more advanced samples if useful, on stuff like silent token renewal - and a Quick Start Page where you can run an online React sample with the above behaviour.

• For the first Question try replacing ClaimTypes.Role by JwtClaimTypes.Role.
• Regarding the second question isn't your username the same as your Email?

Edit:

In your ProfileService constructor inject IUserClaimsPrincipalFactory and apply the following changes to your GetProfileDataAsync() function: