Angular boilerplate app - individual accounts authentication doesn't work in IIS

[MiroKov]

Hi,

I created a new AspNetCoreWebApplication with Angular in .net core 3.1 (individual accounts).

Without changing any code, I published the app in folder, and hosted it in IIS.
I changed the base href in index.html to /test/, and added the

"Key": { "Type": "Development" }

in app.production.json.

When starting the app in browser, I get the following error(s):

I have seen that the authorize.service uses

const response = await fetch(ApplicationPaths.ApiAuthorizationClientConfigurationUrl);

fetch command to get something from the server, but the fetch command will not use the base href from angular.

When I change the code to:

const response = await this.httpClient.get<Response>(ApplicationPaths.ApiAuthorizationClientConfigurationUrl).toPromise();

then I get an endless loop and it fails to work.

Changing the

links manually to have test/ in front doesn't help either, because then after

authorize?clientid=....

comes the

error?errorid=....

and then my angular app tries to route to test/home/error which fails.

I do not see how best to fix this. In IIS Express it runs without problems.

Any help is greatly appreciated.

[javiercn]

@MiroKov thanks for contacting us.

You are running your app in production and need to provide a key to sign tokens. See https://docs.microsoft.com/en-us/aspnet/core/security/authentication/identity-api-authorization?view=aspnetcore-3.1#deploy-to-production for details

[MiroKov]

@javiercn
Hello,
Thank you for your answer, I had not had the time for this project till now, so sorry for the delay.

I have implemented your answer, and now my app.production.json looks like:

"IdentityServer": {
"Clients": {
"TestIISApp": {
"Profile": "IdentityServerSPA"
}
},
"Key": {
"Type": "File",
"FilePath": "..\localhost.pfx",
"Password": "notShowingHere"
}
},
"AllowedHosts": "*"

My problem now is this:

The uri to

_configuration/${ApplicationName}

doesn't work, but I have managed to hack it by manually setting it to:

this needs to be done automatically, but I am not sure how to do it. Any ideas here?

[javiercn]

@MiroKov You need to set the base path in your app if you are deploying to a virtual path (seems like you are deploying to <<someorigin>>test

[MiroKov]

@javiercn
I changed the base href in index.html to /test/.

Fetch command does not take it however.

Or how should I set it?

[javiercn]

@MiroKov I'm not sure how you set the base path on angular, but that should work.

I would check on the debugger what the document.baseUri (or similar) is

[MiroKov]

hi @javiercn

It is ok:

However, use of fetch command seems not to pick this setting up, and that is what makes the call to the wrong address.

Use of HttpClient in angular makes all other calls go to right adresses. Why did you guys use fetch just for this one?

[javiercn]

@MiroKov I don't know if/why fetch is not picking it up. As long as the url does not start with a leading / it should be base relative.

I would try this in a minimal angular app and then move the working approach to the app with auth. There should be nothing in the template preventing you from use a base path, unless we left a url with a forward slash (which I think we didn't but I might be wrong).

[MiroKov]

@javiercn I never had a problem with an angular app without auth. Thanks for the info on the leading slash. Will test it.

These are the links that you guys supplied in the template, so far I noticed, just the ApiAuthorizationClientConfigurationUrl should be changed:

[javiercn]

@MiroKov yeah, that sounds about right. If you remove the leading slashes on /_configuration and /Identity everything should work.

We would take a PR for this if you want to make the change.

[MiroKov]

@javiercn Just tested it, it works.

Would love to, but where do I make the change? Sorry, but not sure what exactly to fork, and where the source is.