I just created a shopping website where users can shop for products and get a PDF generated invoice/bill regarding their orders. The invoice needs to be generated on the client side and stored on the firebase storage services so that it is available any time to the user as well as the admin (me). The problem is that, since the invoice is generated and sent to firebase storage from the client side, the user can peek into my code, modify the Javascript code and upload any other files or corrupted files or modified invoices on the firebase storage.
What can I do to allow writing files in the firebase storage but users can't see or modify the js code? Is there something I can do with Firebase security rules?
Invoices should not be generated on client side and there's nothing you can do to prevent reverse engineering especially on a web. Security rules can't scan the contents of your PDF file. The best they can do is check who is uploading the file and the file size and some metadata.
You should change your workflow to make sure the invoice is generated on server side (or Cloud functions). One way is to add a document containing the order's details such a total amount and any detail you need and then run a Cloud function using Firestore Triggers. Essentially this will run a cloud function when a new document is added to Firestore.
exports.createInvoice = functions.firestore
.document('invoices/{invoiceID}')
.onCreate((snap, context) => {
const invoiceData = snap.data();
// perform desired operations ...
});
Client cannot change the code in Cloud functions so if you create invoice in a cloud function and then upload it to Cloud Storage, it'll be much safer.
Off-topic, I wouldn't bother to store the invoice in PDF format (unless there's any legal requirement). Storing invoice data in Firestore should be enough and you can fetch it whenever required (just give a copy to client).