Using IdentityServer4/5 without Angular additional libraries

Question

Background

I check options to migrate my service authentication system to identityserver4\5. I have two websites:

account.company.com
company.com

My websites are SPA based on .NET core and Angular.

Question

I saw few demo projects identityserver4 demo projects based on SPA that using additional angular libraries (like angular-auth-oidc-client and oidc-client-js). Those libraries are actually client, with id and secret, that exposing this information to the public.

1. Is it safe to have client id and client secret on the browser?
2. I must implement identityserver4\5 with Angular client? maybe a server-side client is enough (all the client requests will be transmitted to server-side, which is a client)?

Answer 1

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)