OAuth client secrets in React apps

user_392684 0
Viewed 826

I have been trying to learn about OAuth2 and OpenID Connect and this article was the most helpful so far:

https://developer.okta.com/blog/2019/10/21/illustrated-guide-to-oauth-and-oidc

But it made me wonder:

If the "client secret" is supposed to be a secret (duh) between the Client and the Authorization Server, and the Resourse Owner is never supposed to know about it... how does this work in things like React, where the Client is run directly in the "client-side" (redundant terminology...).

I am guessing that you are not supposed to distribute your "client secret" publicly, so you clearly cannot deliver it along with your app.

reactjs oauth-2.0 openid-connect
1 Answers

A React SPA is a 'public client' and does not have a client secret, since, as you indicate, it cannot. be stored securely in a browser.

For React you would use Authorization Code Flow + PKCE to sign users in. This involves use of a secret that is generated at runtime - as well as an end user providing credentials.

It is also possible (and recommended in 2021) to proxy OAuth requests that involve tokens via a Back End for Front End API. This allows the API to attach a client secret and in effect this upgrades the SPA to a 'confidential client'.

FURTHER INFO

Here is some sample code of mine that shows the approach of storing a refresh token in an encrypted HTTP Only SameSite cookie:

You can then either call APIs from the browser with SaneSite cookies, or you can download tokens to the browser and call APIs with tokens.

I think more libraries will become available that implement this type of security in 2021. See also this video.

user_90198850
Related