Question
If you would use a similar setup as the following examples:
Would it be possible to protect other clientside files from being accessed? Say for example i have a directory with certain files which you need a certain role to be able to access them.
Would it be possible to protect my SPA from being accessed before logging in?
Or is there a better solution which would have you end up with a protected api, folders/files on a server, SPA and a silent renew mechanism like there is in the OIDCClient?
@dmccaffery helped me out by answering my question, here is his answer for those of you who are interested.
To summarize using the OIDCClient for an SPA is certainly the way to go. Exposing stuff which needs authorization should be done by using an API. Protecting parts of your Angular App can be done using a Route guard.
The way it works is as follows:
The access token is either a JWT or a bearer token (usually) and is added by the oidc client to every HTTP request in an authorization header — when a web API receives a reques, the bearer token authorization middleware will parse this HTTP header and will call the token introspection endpoint (and potentially the user info endpoint) to have the token validated and the users claims retrieved… if the token was manipulated by the client, it will not be valid, and an HTTP error will be returned (usually a 403). If the token was valid, a claims identity is created and assigned to the http request context. The API will now have a thread with an identity already assigned to it that represents that user.
Also he pointed out 2 pluralsight courses which would probably be useful: https://www.pluralsight.com/courses/building-securing-restful-api-aspdotnet https://www.pluralsight.com/courses/oauth2-openid-connect-angular-aspdotnet