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.

@PeterHaddad I've developed this for a single user but since it is hosted on firebase, web don't want any sign ups but just one account that can be used to access this site. — ayushgp, Feb 12 '18 at 19:11

score 13 · Accepted Answer · answered Sep 29 '18 at 20:34

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.

You stopped explaining at the most important part I guess, authentication. Can you please elaborate a bit more on how you get the current user from out of the Request object (i.e. with get_user(req))? — Burak, May 12 '21 at 11:40
Add middleware that performs authentication, maybe something like this: https://www.codementor.io/@victornwaiwu/using-firebase-as-an-authenticating-middleware-in-express-js-5z435fvaz — Brent Washburne, May 18 '21 at 03:04

score 6 · Answer 2 · answered Feb 12 '18 at 19:12

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.

Peter Haddad · Answer 3 · 2018-02-12T19:21:40.563

0

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/

edited Feb 12 '18 at 19:21

answered Feb 12 '18 at 19:12

Peter Haddad

78,874
25
140
134

3

That's for Firebase Database, not for hosting. – Dimitri May 16 '18 at 17:23
1

@Dimitri OP wanted some users to access the website, and with rules it can be done, even the first answer said it `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.` – Peter Haddad May 16 '18 at 17:36

Authentication for firebase hosting

3 Answers3

Linked