Hiding API Keys in Production

[jkbeattie]

Hi everyone,

New to Supabase and wondering how people are handling their server-side functions (such as hiding API keys) for React apps?

Traditional React applications you'd just use a proxy server...Does anyone have any example repos of a node.js server handling the Supabase functions, and a React front-end app calling these functions?

Thanks

[silentworks]

In the case of most apps built with Supabase and React, the supabase-js library is used directly in the React application. The anon key can be exposed to the public and doesn't require being hidden. Also, NextJS seems like a nice option for those wanting client/server interaction in their app.

[jkbeattie]

Thanks for your answer.

I should rephrase my question...Is there a way to secure the Anon keys so even though they are 'viewable' when compiled by React, they can only be used on the domain I specify? Similar to a HTTP Referrer in the Google APIs?

I could use Next.js, but I'm hoping to just keep this as a client application. Much simpler.

[jkbeattie]

Doing some further reading of the Supabase docs and it seems as if I just need to enable RLS for my tables. Doing this should result in the anon-key being unusable regardless if it's viewable in the browser or not? Is this correct?

[silentworks]

Yes, that is correct.

[chipilov]

Even though, RLS mitigates authenticated use cases, I @jkbeattie's question is still relevant at least for anonymous use cases if not for anything else (and his suggestion to restrict the usage only for certain domains seems like a good solution).

For example, it seems that the only way to implement something like Pastebin where anyone can create a paste and associate it with a unique identifier is to use the Anon key. However, I think it would be better to disallow the usage of the Anon key outside the app itself.