I am building a Flutter Web app that needs to use the OpenAI API for a features. The Flutter Web app compiles to client-side JavaScript. I know I cannot call the OpenAI API directly from the app with the key embedded in it. Anyone can get the key from the developer tools.
I have a Firebase project already set up for this app. It has Auth and Firestore. My plan is to use a Firebase Cloud Function to make the OpenAI API calls. I will keep the key stored on the server only.
Before I start doing this I want to ask people who have done it before. Is using a Firebase Cloud Function as a proxy, between the Flutter app and the OpenAI API the way to keep the key hidden?. Is there a better way to do it? Maybe I can use Cloud Run or a small separate backend.
Is it enough to keep the key on the server?. Do I need to add something else to stop people from abusing the endpoint? For example I could require users to sign in or use App Check or rate limiting.
If you have set this up with Flutter Web and Firebase and OpenAI what are some things I should watch out for? What would you do differently if you had to do it ?