Web only for authenticated users Firebase

Question

I am developing an HTML webpage using Firebase, my working tree is:

• css: folder with CSS style files
• js: folder with Javascript files
• login.html: logging in page
• signup.html: signing up page
• app.html: main application page

I would like to restrict the app.html access only for logged users. I have implemented in Javascript some scripts to authenticate users via email and password using the login.html and signup.html pages. For the project, I use the hosting tool that offers Firebase. However, I'm not sure whether I need to apply this capability with the hosting tools or the real time database or other. Maybe the solution is to upload my web as a real time database resource and then, control the access to some paths modifying the database.rules.json file, but I don't know how to implement it.

Thanks for your help :)

Answer 1

All content on Firebase Hosting is publicly available. There is no way to restrict access to your HTML or JavaScript or any of the other resources you host on Firebase Hosting.

Also see:

• Can Firebase hosting restrict access to resources?

As one of the answers there says, you can control access with Cloud Functions, but at that point it's not a static resource anymore.

It's pretty common indeed to leave the resources on Hosting unprotected, and then restrict access to the data that you show in the page, which may be loaded from one of Firebase's databases. In that case you can control access to the data with the security rules, which are fully documented here. If you're using Firestore, there's also a codelab making it easier to get started.