CODEWITHSUNDEEP
javascriptfirebasefirebase-realtime-databasefirebase-authentication
CMYJ
CMYJ

Reputation: 172

Password protect a page with Firebase

I'm building a CMS with Firebase, but struggling to assess whether what I require is possible, or if I'm missing something.

What I require is the ability to password-protect a page only, and remember that browser as having access. A full user account (using the in built auth) is required to edit the content of the page, but only a password is required to view it.

I know I can use the auth flow with email, but am looking for the editor to be able to create a password for viewing only.

Is this possible, or should I look elsewhere?

Upvotes: 5

Views: 4180

Answers (4)

somejhereandthere
somejhereandthere

Reputation: 351

I definitely suggest Frank's answer because it's simple and it works. Btw the moral of the story is that you use the firebase Database to store you view-only password but, if you want to complicate your life because you need a strong view-only password system, the Authentication product provides the custom authentication method that you can integrate with your existing auth system (for example fb login). It obviously needs a server-side implementation that is a code that takes the password, check if it's valid and sends the token back to the Auth system.
Here more details: https://firebase.google.com/docs/auth/web/custom-auth

Upvotes: 0

Frank van Puffelen
Frank van Puffelen

Reputation: 598740

The way I commonly do this is a bit like Jeremy's answer, but simpler.

You ask the user for a password when they enter the page, and store that password locally (for reloads).

Then you store data in your database under a path that includes the password. So say that your password is geheim, you could store the data under:

data: {
  geheim: {
    value: "This is the secret value"
  }
}

Now you secure your database with rules like these: 

{
  "rules": {
    ".read": false,
    "data": {
      "geheim": {
        ".read": true
      }
    }
  }
}

Now somebody can only read the data at /data/geheim if they know the entire path. So you'll enter the data part in your code, but require them to enter geheim as the password. Then you attach a listener with:

firebase.database().ref("data").child(password).once("value", function(snapshot) {
  console.log(snapshot.val());
});

And if the user entered the correct value for password, this will read the value.

Upvotes: 7

JeremyW
JeremyW

Reputation: 5272

It's definitely possible, but as Doug's answer indicated, you'll have to do it outside normal means. Off the top of my head, the way I would accomplish this is...

  • When a user enters a password, it stores the password in their local storage.
  • On page load, or on password entry... pull the password from local storage
  • Make a request to a Firebase cloud function, makes sure to include the password it just retrieved from local storage, and which page it is requesting content for
  • Firebase cloud function validates password
  • Firebase cloud function retrieves data for specific page
  • Firebase cloud function returns said data
  • Load data on front-end like normal

As you already identified, you should stick with the built-in Firebase auth for content editing.

Upvotes: 1

Doug Stevenson
Doug Stevenson

Reputation: 317392

Firebase Authentication only deals with authenticated user accounts. It doesn't deal with simple password protection of content.

Upvotes: 1

Related Questions