Password protect page

Hi - I saw you have updated that password protected pages will be available by 2023.

Could you kindly let us know how to enable it.

Basically I want to display a page only if the password is correct.

If it’s not yet available yet, any idea how I can handle myself using the visibility property or something else.


1 Like

I also have the same question regarding password-protected pages.

This feature is important for my use case as well.

If you find out how to enable it or come up with an alternative solution, I would greatly appreciate it if you could share the information.

Thank you!

You can “kindof” do it with JS but anyone with just basic knowledge of HTML and CSS could bypass it so it’s not very safe… It needs to be done on the server level to be valid.

Hi MixxMaster

Could you provide an example of how to do it using JS, HTML and CSS?

I’m planning to do it for my password-protected portfolio case study.
It’s fine if it can be bypassed in my case.

Thank you

There’s another thread on this here (but no alternative solutions): Password protect published sites?


Do you need a password protected page like while it’s under development, so people can’t see it, or you need for something else?

Pretty easy, just ask Chat GPT and you’ll get the basics of it :slight_smile:
I haven’t tested it so you might have to adapt it a bit…

    <div id="passwordSection">
        <input type="password" id="passwordInput" placeholder="Enter Password">
        <button onclick="checkPassword()">Submit</button>

    <div id="protectedContent" style="display:none;">
        <h1>Protected Content</h1>
        <p>This is the content protected by a password.</p>

    <p id="errorMessage" style="color:red;"></p>
function checkPassword() {
    var password = document.getElementById("passwordInput").value;
    var protectedContent = document.getElementById("protectedContent");
    var errorMessage = document.getElementById("errorMessage");

    if(password == "yourpassword") { // Replace 'yourpassword' with your actual password = "block";
        errorMessage.innerHTML = "";
    } else {
        errorMessage.innerHTML = "Incorrect password!"; = "none";

1 Like

Yea, that can work with most of the clients, but if developer tries to access your website, and that’s the only protection you have, its not good :smiley:

This needs to be done in backend on our side… But we need to be a bit more patient for this feature


Thank you @MixxMaster for the example.
Thanks Bryan for the reference thread.

dejan I do need a password-protected page to allow only some clients to access my portfolio case studies.

@Pakic I understand it’s not perfect for security reasons, but at least I can use it now.
Can’t wait for the password-protect feature that needs to be implemented in the backend.

Thanks all :raised_hands:

1 Like

Thanks all for the response