Securing Public APIs using Authorization Code flow in IdentityServer 4 - oauth-2.0

Question

I am stuck with one very basic requirement in my application. Here is my scenario. I am building a custom e-commerce portal using angular as a front end and rest API as a back end. I have a product listing API that is going to be called by my angular client application without the user's credentials as the product listing is a public page. However, I don't want anyone else to consume my product listing API. I know I can use client id and client secret to obtain token and make my API secure using Identityserver 4 but, how do I avoid exposing my client secret in an angular app?
Anyone can steal it very easily. Is there any way to use Authorization Code flow with PKCE for public my APIs such as product listing API where user id and password are not required?

Answer 1

To me best approach to answer this is to go back to definition of Authorization Code flow.Authorization code grant is a redirection-based flow used to obtain both access tokens and refresh tokens, the client initiates the flow by directing the resource owner's.
And pkce is just is an extension to the Authorization Code flow to prevent certain attacks.
Then the answer is no, we can not use Authorization Code flow with PKCE to secure a public API without user login.
There is some other ways to secure public APIs or at least make it less/harder accessible. CORS is an option, read more here, as its out of context for this question I wouldn't go further.
For scenario with login, Authorization code flow is supported on IdentityServer4. here is what we need to do to implement it:
On IdentityServer add the configuration entry for js client like:
new Client
{
ClientId = "jsclient",
ClientName = "JavaScript Client",
AllowedGrantTypes = GrantTypes.Code,
RequirePkce = true,
RequireClientSecret = false,
RedirectUris = { "http://localhost:5003/callback.html" },
PostLogoutRedirectUris = { "http://localhost:5003/index.html" },
AllowedCorsOrigins =
{
"http://localhost:5003"
},
AllowedScopes = {"openid", "profile", "offline_access", "api1", "api2" },
}
On SPA app use oidc-client library, and also add the OIDC config to be like
var config = {
authority: "http://localhost:5000",
client_id: "js",
redirect_uri: "http://localhost:5003/callback.html",
response_type: "code",
scope:"openid profile api1",
post_logout_redirect_uri : "http://localhost:5003/index.html",
};
var mgr = new Oidc.UserManager(config);
Find full sample code here. I strongly suggest to read the quickstart doc to get a better understanding of implementation details.

Answer 2

You should implement Authorization Code Flow (PKCE) in your Angular App by plugging in the widely used OIDC Client library - its UserManager class will do the work for you.
For an example of how to use it, see these resources of mine:
Visual Tutorial Write Up
Code Sample
Authorization Code Flow PKCE Code