Authentication for firebase hosting

Question

I have a static app hosted on Firebase hosting whose backend is also on Firebase(communicating using firebase JS api). I want to add a simple auth page to all pages of this website so that only users I want can access this site. Is this possible?

Looked at the docs but didn't find anything that helps me in this regard.

Answer 1

You can do this using Firebase Functions, and an Express call. Put all of your static files into a folder named functions/admin and put this function into functions/index.js:

exports.admin = functions.https.onRequest((req, res) => {
  const url = req.originalUrl ? req.originalUrl : '/index.html'  // default to index.html
  res.sendfile('admin' + url)
})

Then, a request to your functions server for /admin/* will serve up the file of the same name.

If you want to add authorization, try this:

exports.admin = functions.https.onRequest(async (req, res) => {
  const url = req.originalUrl ? req.originalUrl : '/index.html'
  const user = await get_user(req)  // get the current user
  if (user && user.is_admin)        // is current user an admin?
    res.sendfile('admin' + url)
  else {
    res.status(403).send(null)
  }
})

You will have to define get_user() so it returns a user object with an is_admin field.

Answer 2

Firebase Hosting provides no way to limit access to the static resources (HTML, CSS, JavaScript) of your site. See Can Firebase hosting restrict access to resources?, Firebase Hosting - Members Only / Secured Webpages?.

But if your site serves dynamic content (e.g. loads data from the Firebase Database from JavaScript, or uploads images to Firebase Storage) you can use Firebase Authentication plus the server-side security rules (database, storage) of those products to ensure users can only take actions they're authorized for.

Answer 3

This can be done by adding rules to your Firebase Database, to only let authenticated users enter the website you can use this:

// These rules require authentication
{
 "rules": {
   ".read": "auth != null",
   ".write": "auth != null"
 } 
}

You can use this:

 {
 "rules": {
   "admin": {
       "$uid": {
          ".write": "$uid === auth.uid"
      }
    }
  }
}

Using the above you will let only the users under the admin node(they must be authenticated) to write to the database and no one else can.

more info here: https://firebase.google.com/docs/database/security/