How to avoid client imposters in OAuth / OIDC

Question

I am currently learning how OAuth and OpenID Connect (OIDC) work. I know that with a typical WebApp, one would have a frontend and a backend-server. The backend-server would then store a client ID and a client secret through which it can authenticate itself with the authorization server. So far, so simple. However problems arise with native and single page apps, where the entire code is public to an end user and a client secret can not be kept secret. How does OAuth/OIDC make sure that only permitted apps access the authorization server?

Answer 1

The solution is to not do it in the browser at all, but instead do all the sensitive things in the backend, preferable using the BFF pattern as described in these two videos:

• alert‘OAuth 2 0’; // The impact of XSS on OAuth 2 0 in SPAs
• Using the BFF pattern to secure SPA and Blazor Applications

Storing tokens or client secrets in the browser is a impossible thing to properly secure, so the solution is not to do it at all in the browser.

Answer 2

However problems arise with native and single page apps, where the entire code is public to an end user and a client secret can not be kept secret. How does OAuth/OIDC make sure that only permitted apps access the authorization server?

Since these apps cannot protect a secret in a secure way, they are called public clients.

It now is common to use a Proof Key for Code Exchange for Public Clients. With this technique, the client generates a temporary secret and use a hash function before the authorization request and this is later validated when the client does the token request using the code.

See e.g. Implement the OAuth 2.0 Authorization Code with PKCE Flow