Password Protected Pages Redirect To Another Page

Design help Custom code
1

Is it possible to redirect password protected pages based on the password?
Eg:
Password = 12345 > Redirect to Page1
Password = 45678 > Redirect to Page2

2

Hi @dataminds,

Yes I think that would be possible. Why not add a click listener on the submit button which would perform a password’s value check and redirect the user on specific pages depending on the password’s value ? Something like this:

Quick Codepen for you here

Javascript bellow:

(() => {
  const password = document.getElementById("password");
  const submit = document.getElementById("submit");
  const condition_A = "123", redirect_A = "webflow.com";
  const condition_B = "abc", redirect_B = "anthonysalamin.ch";
  const protocol = "https://", target = "_blank";

  submit.addEventListener("click", e => {
    e.preventDefault();

    if (password.value.length == 0) {
      alert("please, enter your password đŸ€Ș");
    } else {
      passwordCheck();
    } // end if

    function passwordCheck() {
      if (password.value === condition_A) {
        // 🧠 redirect A
        window.open(`${protocol}${redirect_A}`, target);
      } else if (password.value === condition_B) {
        // 🧠 redirect B
        window.open(`${protocol}${redirect_B}`, target);
      } else {
        alert("password incorrect, try again 😈");
      } // end if
    } // end passwordCheck()
  }); // end event listener
})(); // end IIFE


though I’m not sure why you’d wish to perform a redirect on a password protected page ?

2 Likes
3

Anthony,

Thank you for your feedback!

I currently do something along the same lines as you suggested, your solution might be a little better.
The reason I need this is I would like to use the password protected page as a gatekeeper so the public doesn’t have quick and easy access to certain pages but a client could enter a password and based on that value they would be re-directed to a page that contains information relevant to them.

Thanks again and if you have any other ideas I’m all ears.

4

Sorry to gatecrash! I was after a similar system for a client too - as a bit of a newbie, can you let me know where the x2 bits of code would need to go in WF please? I’ve noticed on the codepen there’s both HTML and Javascript? I’m used to adding code as an Embed or to the page / project settings etc. Many thanks!

5

hi @ConnectCreativeDes,

The HTML part in codepen was just to somehow reproduce the Webflow password structure. In webflow, you only need to make sure the input field has an id of “password” and your submit button an id of “submit”.

The javascript needs to be wrapped in its <script> tag and put at page level in the custom code setting before the end of the </body> tag.

Hope that helps

1 Like
6

Thank you for the explanation, greatly appreciated. All understood!

1 Like
7

Actually, thinking about it, I think using Javascript on the frontend to validate the password is a terrible idea since it exposes the redirect conditions to anyone curious enough to look into the source code of the page. You would need to use a server-side script for that, like PHP, to be safe.