Password protect page

General
1

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.

Thanks

1 Like
2

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!

3

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.

4

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

5

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

6

@ratta

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?

7

@ratta
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…

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

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

    <p id="errorMessage" style="color:red;"></p>
</body>

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
        protectedContent.style.display = "block";
        errorMessage.innerHTML = "";
    } else {
        errorMessage.innerHTML = "Incorrect password!";
        protectedContent.style.display = "none";
    }
}
1 Like
8

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

2 Likes
9

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
10

Thanks all for the response