Storing client secret in SPA

[reganm]

I’ve gone through some auth0 tutorials for various personal projects, most of which are standard web application setups: I have a backend API (using node.js), which has some basic CRUD endpoints that I want to secure with scopes. Then I have a front-end SPA (in react) that I want to use to interact with this API. The front-end also uses auth0 login (standard username/pass, no social media linking). The long-term goal is to have multiple front-end applications interact with this single backend API.

I’m getting ready to deploy to production, and I realized that I need to securely store my client secret, which, as it stands (based on the tutorials), would be wide open for anyone to see. After a bit of google searching, everyone is saying that you should never store sensitive secrets (like the client secret) in SPAs. Most recommend using another backend server for the front end.

Is there any way to securely store these credentials without having to spin up another server for the front-end? If not, then that leads me to the question: Why do we even bother having an auth0 integration with SPAs if there is no good way of securely storing the client secret?

I’m still fairly new to this, so I may be missing something. But can anyone shed some light on this?

[markd]

Hello @reganm,

There is definitely no good way to handle secrets on the client side. This isn’t an Auth0 thing … the client is not under your control and can never be trusted. The old default way to handle SPA authentication was the implicit grant flow, but there is new guidance coming out on that front. The link below should be helpful:

SPA with Authorization Code Grant

This is actually a recommended approach in the current draft for using OAuth with SPAs: I would recommend reading the whole draft, and also recommend reading Vittorio Bertocci’s blog post on the subject: