How can I implement a simple "only password" login?

[marcoadi94]

Good evening,
I built the website https://diamantesas.netlify.app with GatsbyJS and deployed it with Netlify. It is a site for a small company that produces shoes.
I want a page to be reached only after having insert the correct password in a form.
I want to insert a password in this simple form (with the “action” attribute pointing to the other page):

to reach this page (that contains just some catalogs):

I don’t need it to comply with the highest security standards or even register users and let them log in / out (but not even that the password can be read in clear text or is excessively insecure).
The page does not contain sensitive or personalized data, only catalogs for the various dealers and area representatives.
So the page just needs to be “hidden” and the password will be preconfigured for everyone.
Is there a quick and easy way to implement this thing? Maybe some features or plugins from Gatsby or through Netlify Identity or Netlify Form?
Thank you

[hrishikesh]

If you are on the Netlify Pro Plan, or if you can get on it, it’s very easy by following this: Password protection | Netlify Docs.

However, if you plan to stay on the free plan itself, the idea that hits in the first thought is using JavaScript.

Before I share the so called plan, let me warn you that this method can be bypassed by disabling JavaScript or adding custom config to localstorage, etc. Basically, it’s not even remotely close to hack-proof, but, since you say that’s fine, I’m assuming it might work.

Firstly, I’d say, don’t load the page if JavaScript is disabled, i.e., add a display: none; style to the page’s body once the page loads, use JavaScript to set the style to display: block. This will ensure that the page is ‘invisible’ (however, one can just go to the Developer Tools and change the style).

Moving on, you can set a value in localstorage to see if the user was previously authenticated or not.

You can do it like:

if (!localStorage.getItem('authenticated') == true)
  {
    window.location.replace('https://diamantesas.netlify.app/');
  };

Finally, you can check your form input like this:

var myPassword = 'the correct password';

document.querySelector('#form').addEventListener('submit', function(e)
  {
    e.preventDefault();

    if (document.querySelector('#password-field').value == myPassword)
      {
        localStorage.setItem('authenticated', 'true');
        window.location.replace('destination page url');
      }
    else
      {
        // show error
      }
  }

Note: This might be a very rough implementation of my idea and it might need some fixing here and there. But, it might be able to get you going. As I have already mentioned, this is a very very primitive way to ‘protect’ your webpage and it should not be used to hide anything severely sensitive. Also, there might be better alternatives to this method using some other ways, however, I am not aware of any of those.

[marcoadi94]

Thank you so much for this answer. No, I don’t have the Netlify pro Plan.
As I said there’s nothing too important in that page but we want to “protect” it just to separate the customer side of the website from the resellers one. I’ll see if there are also other solution but in case this would be the best one, I’ll try to implement it in some way. I hope i can do it without any problem, can I ask for help again in the case I won’t be able to implement it?
Thank you again

[marcoadi94]

Ah first question: where do I store the password in a way that can’t be read by other people?

[fool]

If you use the feature we’ve built that @hrishikesh mentions on the Pro plan , we don’t expose the password. That’s the Netlify team’s best advice for password requirements

[hrishikesh]

The correct password goes in the last JavaScript, first line. var myPassword ....

It can still be read by other people by checking your website’s JavaScript files. However, since you’re using Gatsby, all those JavaScript files would be converted to JSONs and it’d be difficult for someone to locate the correct JSON file. However, if someone manages to locate it, your password is going to be easily seen. But, that’s the problem of client-side solutions. Everything is visible to the clients.

EDIT: The best you can do is, not name the variable as obviously. Naming it myPassword makes it obvious. Name it something else. That’s just another line of ‘security’. But, if you’re sure that no one’s going to dig into your website’s files and all, you’d do just fine with this method.

[hrishikesh]

I just thought of another method which is more secure than this one. It includes using Firebase. However, the last time I tried setting up Firebase in a Gatsby project, I was unsuccessful. I’ll still mention the method in case you try it and get successful.

Please note, I’ve not really used this feature of Firebase, so, what I’m mentioning below it just straight from its documentation without trying it first. You might need more reading and trial and error.

So, the most part of the above method (that is using display: none and then storing authenticated people in localstorage) is same. However, instead of storing password in JavaScript, you can create a Firebase database like this:

{
  "data":
    {
      "customString":
        {
          "value": "password"
        }
    }
}

and set-up the access rules like this:

{
  "rules":
    {
      ".read": false,
      ".write": false,
      "data":
        {
          "customString":
            {
              ".read": true
            }
        }
    }
  }

Then check using:

firebase.database().ref('data').child(password).once('value', function(snapshot)
  {
    document.querySelector('#form').addEventListener('submit', function(e)
      {
        e.preventDefault();

        if (document.querySelector('#password-field').value == snapshot.val())
          {
            localStorage.setItem('authenticated', 'true');
            window.location.replace('destination page url');
          }
        else
          {
            // show error
          }
      }
  });

So, Firebase would only be responsible for ‘storing’ your password. This would be much more secure than storing it as a variable in JavaScript. However, the above code might not work as it is and you might need some debugging.

[marcoadi94]

I understand, but I built the website for a customer and I can’t decide to subscribe a plan for them. That’s why I’m looking for a free solution

[fool]

OK. May be obvious but just wanted to close the loop that our staff will not be able to advise you on working around our paid features, so any help you get from here on out on this query will be from other community members

PS: If you are charging your client to use our service, you DO need to have a pro plan with us, otherwise you are in violation of our terms of service, so perhaps that’s the path forward.

[marcoadi94]

OK. May be obvious but just wanted to close the loop that our staff will not be able to advise you on working around our paid features, so any help you get from here on out on this query will be from other community members

Yes I can understand, no problem. Thank you for trying to help me

PS: If you are charging your client to use our service, you DO need to have a pro plan with us, otherwise you are in violation of our terms of service, so perhaps that’s the path forward.

I don’t understand what you mean, can you explain me please?

[perry]

hi marco,

basically, if your client is giving you money to pay for hosting, and you have a free account with us, and you are keeping the money, then that goes against our terms of service.

[marcoadi94]

Ah ok I understand what you mean, thanks for the explanation.
In any case I am not receiving any money, he is not paying me for hosting and I would not “fool” him by saying that I have to pay for hosting when it is not true

[marcoadi94]

Thank you very much for your availability and the suggestion you have given me.
I worked on it a bit and managed to adapt it to the site and what I wanted to do, I also added some small functions to it to adapt it even better to what I wanted to achieve and therefore I learned new things.
Thanks so much for the help

[haldrik]

@fool

PS: If you are charging your client to use our service, you DO need to have a pro plan with us, otherwise you are in violation of our terms of service, so perhaps that’s the path forward.

Could you expand this please? is the use of free Netlify services forbidden for commercial sites?

[hrishikesh]

I simpler terms, it means, if you’re earning by making websites that are hosted on Netlify for your clients, you need to use at least Netlify Pro. Free version is meant for non-commercial use only.

[haldrik]

I have a personal blog, and I aimed to earn some money via donations and souvenirs sale. ¿Is that a commercial use?

[haldrik]

Here the Terms of Service.

[hrishikesh]

I was just reading that and actually, I’m surprised. It doesn’t mention the point that @fool mentioned (or did I miss it)? I can’t find anything that says that we need to use paid plans for commercial websites. Is there a separate document for that?

[perry]

hi @hrishikesh, we don’t require a pro plan for commercial websites, although we do find that more comprehensive sites will usually benefit from upgrading specific things like forms to the paid version, or go Pro to take advantage of faster support through the helpdesk. But it’s not required! so yes, you can run a commercial site that makes you $$ on Netlify for free if you like.

We do require a Pro account & chat with the sales team for anyone who is charging clients for hosting. For example, if you build websites for a living and are charging clients as part of a contract or one time payment for hosting or similar, but you are not paying anything for the hosting yourself with us as you are on a free tier and just pocketing the money, then that definitely goes against our terms of service.