I want to customize the password protection login screen; I cannot do anything about it for now. Neither can I change the wording from ‘Guest login’ to something more relevant to my site, nor can I change theme colors and add graphics to expose my business branding. I have read a bunch of suggestions related to the similar issue I have here. I don’t think those suggestions are particularly suitable. My need is very simple: the page function works fine. All I need is to redesign its look. I don’t want to change it into a registration window, or create a collection and include a query to retrieve the collection page. It just doesn’t fit in my particular case. I really appreciate that if anyone out there can share your solution when having the same problem need but was able to find a solution for it.
Hi RZ,
Check this example I made for you: https://arthurvalatin.wixsite.com/tech
You can’t really customize the wix password protection page. What you can do is, you can create your own password protection page! You will need to hide your page content on load. Then you need to add a user input element & a button. Then you need to add the on_Click event to the button (in properties panel). Then, after button is clicked, if user input element’s value is the password, hide the user input element & the button & show the page content.
export function button_click(event){
if ($w("#input4").value === "hi"){
$w("#successMessage").show();
$w("#passwordInput").hide();
$w("#button").hide();
} else {
$w("#errorMessage").show();
}
}
I made this example for you: https://arthurvalatin.wixsite.com/tech
When you type “hi” into the input element and click the button, you will get the success message. If you type something else, you will get the error message. You can show your page content when the user correctly types the password.
Hi Arthur! Thank you for responding to me.
How do I hide the page load in this case?
Shall I update the value of #input4 in my case, which is providing password before entering the site?
Thank you again for you help!
Also, what import value shall I put in there?
Hi RZ!
Ok, sorry. #passwordInput should be #input4. Sorry. Yes, you should update #input4 to your own input id.
The current password is: “hi”. You will need to change it to your own password:
if ($w("#input4").value === "hi"){
needs to be changed to your own password:
if ($w("#input4").value === "myPassword"){
Have you seen my example site? —> https://arthurvalatin.wixsite.com/tech
I did, but I think I need to first add the ‘import’ value to allow the page recognize the code, something like what is shown below. In your example , the button is called to show error or successful messages, for my case would be enter a page, is there anything I need to tweak to make it apply to my case?
import wixUsers from ‘wix-users’;
2
3 let email = // email address of user to log in
4 let password = // password of user to log in
5
6wixUsers . login ( email , password )
7 . then ( () => {
8 console . log (“User is logged in”);
9 } )
10 . catch ( ( err ) => {
11 console . log ( err );
12 } );
Well, it is kind of the same thing. You hide page content on load. When user types “hi” in password input & click button, show page content.
Hi Arthur. Hoping you can help me as well. I’m looking to do much the same thing. Have a portal which certain people only can access. I need it basically to welcome them to the Portal and prompt for a password entry with instructions what to do if they don’t have a password. If they enter the correct password then they see the page. What I seem to be able to do with the above is get them to enter a password and it redirects to the homepage?
Hello Lindsey.
My code above hides the page content until the right password is entered. What you could do is send an invite email to people you want to have access to your portal (which includes the password too).
My code is only suitable for password-protecting specific pages. The disadvantage is that you need to enter the password on every password-protected page you enter.
What you can do is use the Wix-storage API . Use the session property to store a message like “Has entered the password correctly” once the password is entered correctly. Then take the message out from Wix data whenever you load a page so you can then allow them to view any password-protected page without having to re-enter the password every time (The session property will expire when the user closes the browser tab or window).
Thanks Arthur. All I’m trying to do is password protect a particular page. Essentially a referral portal for physicians. The code I’ve entered is as follows:
// API Reference: Introduction - Velo API Reference - Wix.com
// “Hello, World!” Example: Velo Learning Center
$w . onReady ( function () {
// Write your JavaScript here
// To select an element by ID use: $w(“#elementID”)
// Click “Preview” to run your code
});
export function button_click ( event ){
if ( $w ( “#input1” ). value === “ROKband” ){
$w ( “#successMessage” ). show ();
$w ( “#passwordInput” ). hide ();
$w ( “#button” ). hide ();
} else {
$w ( “#errorMessage” ). show ();
}
}
What I get when I enter the correct password is a redirect to the home page versus showing the remainder of the portal page? HELP!
I should also note that it isn’t hiding the content below on the page.
Hello again,
I am no quite getting what you need help with.
Have you done:
- Hide the portal page on load
2.show the portal content on correct password input? $w(“#portal”).show();
3.Have you used the events on properties panel
I also want to ask if you either want to show the page content or redirect to a different page after the correct password is entered. Also it would be easier for me to help you if you post the link to the page.
Check this example page:https://arthurvalatin.wixsite.com/tech
Have a nice day!
Hi Arthur.
The code above is the entirety of what I have on the page.
https://boldinkstrategy.wixsite.com/rokband/referral-portal
What I want is the first block to show upon arrival on the page. Once the correct password is entered I then want the rest of the page to be visible.
I know nothing about code so am flying a bit blind. Using what I have above, the entire page shows and if you enter the password it redirects you back to the home page (which is not what I want).
Help!
Hi if anyone is looking for COMPLETELY copy and pastable code for a password protected page (NO personal login, just a simple page password) that redirects user to another page on your website this is what worked for me (as of December 2021):
NOTE: This method requires a text input, a button and a text box. You need to click on the element and set the button to both ‘hidden’ and/or ‘disabled’ in the right hand side of dev mode under ‘default values’ (depending on what you want). The text box must be set to ‘collapsed’.
ALSO NOTE: This method requires for the user to press enter in order for the password to be accepted.
Elements are referenced as follows (change the element ID to the words next to the hash tag by clicking on the element and looking on the right hand side of the screen):
#button = button
#textinput = text input
#errorMessage = text box
//COPY FROM HERE>>
$w . onReady ( function ()
{
$w ( “#button” ). link = “” ; //use %20 instead of space if //necessary
$w ( "#textinput" ). onKeyPress (( event ) =>
{
**let** value = event . target . value ;
**if** (( $w ( "#textinput" ). value === "PASSWORD" ) && ( event . key === "Enter" ))
{
$w ( "#button" ). show ();
$w ( "#button" ). enable ();
}
**else**
{
**if** (( $w ( "#textinput" ). value !== "PASSWORD" ) && ( event . key === "Enter" ))
{
$w ( "#errorMessage" ). expand ();
}
}
});
});
Hi @kraaprojects , Thanks a ton for sharing this precious code. Is it possible to use this code to exand/collapse certain section in a page, instead of navigating to another page? Thanks again. : )
@kraaprojects I really wanna thank you. But I tried this code in my way and having difficulty. Kindly help me out of this situation. The code is as follows :
$w.onReady(function () {
$w("#boxMultiState1").collapse();
$w("#textWrongPassword1").collapse();
$w("#button42").collapse();
$w("#button42").onClick((event) => {
if ($w("#boxMultiState1").collapsed) {
$w("#boxMultiState1").expand();
} else {
$w("#boxMultiState1").collapse();
}
});
$w("#inputPasswordCheck1").onKeyPress((event) => {
let value = event.target.value;
if (($w("#inputPasswordCheck1").value === "PASSWORD") && (event.key === "Enter")) {
$w("#button42").show();
$w("#button42").enable();
} else {
if (($w("#inputPasswordCheck1").value !== "PASSWORD") && (event.key === "Enter")) {
$w("#textWrongPassword1").expand();
}
}
});
});
Everything is correct. No error in console. But PASSWORD is not working. I have logged in as a user inputting right password (actual login one). Whats wrong? Kindly help.
This is incredibly easy to hack by an attacker this type of example from beginner programmers shouldn’t be allowed to be distributed. You must verify a password on a backend and a component should at least be removed from the DOM. And not just hide it. A hidden component is still part of the DOM. Any one could read its content easily.
Hi there,
I ran into an issue at work where we had a wix site and we wanted to have it hidden behind a password page right up until we launched it. So we wanted to use the password page to be sort of a “closed” page too. It turns out I couldn’t alter any of the text on the password page.
I searched and searched for solutions that would do what I wanted–either using the wix UI or someone else’s code and I came up empty handed. So I rolled my own using plain vanilla javascript. This does a specific thing, but hopefully it will be helpful to anyone else who is in my situation and it will confirm to the other devs out there that, at least as far as this thread is concerned, you cannot do this in the UI as of April 7, 2025.
NOTE: this code is visual only, it doesn’t alter any security features
While this code may hide the password entry box, that box can still be found and used. This is a visual fix only, which may be plenty for you.
How to install
You can install this in Settings > Custom Code > Body - End as a custom code snippet
How does it work?
derefPageElements- identify the elements of the password page by their text (i.e. if wix changes the text, this breaks) using XPath
- return a tuple of the found elements, as well as an indication of whether we think we’re on the password page based on the text
customizePasswordPage- use a url get parameter to determine if you are in “dev mode” (i.e. if you are hiding the login box in this implementation)
- adjust the style and contents of the elements on the password page, by using the elements found in
derefPageElements
const observer- wix loads elements onto the page in an unpredictable order
- subscribe to all page changes until we find that we are on the password page, according to
derefPageElements - if we are on the password page, customize it and unsubscribe the mutation observer
How would I customize this?
Go look at the customizePasswordPage function inside the if (isPWPage) { block. You will see the page elements getting altered there. You should also be able to put chunks of this code into the console in your browser to experiment “live.” Good luck!~
The Code
Note that this code is in a script tag as that is what is required to install it in the custom code block on your wix site.
<script type="text/javascript">
/* As a human codeslinger, I am saddened to report that it was Claude who told me
about mutation observers to detect the kind of dynamic page loading that wix
does. The rest was written the old fashioned way, by googling for answers and
then finding the stackoverflow javascript answer that seems like they were left
by the most tired, reasonable person trying to briefly restore sanity and order.
*/
// https://stackoverflow.com/a/29289196
const findfirst = (xpath) => document.evaluate(xpath, document, null,
XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue
function derefPageElements() {
const header = findfirst("//div[text()='Password Protected']")
const expl = findfirst("//div[text()='You need a password to view this site.']")
const input = findfirst("//input[@placeholder='Enter password']")
const btn = findfirst("//button[text()='Continue to Site']")
return [header && expl && input && btn, header, expl, input, btn]
}
function customizePasswordPage() {
console.log('... customizing the password page to look like a closed page... now!');
const urlParams = new URLSearchParams(window.location.search);
const isDev = urlParams.get('dev') == 'iamthedev';
const [isPWPage, header, expl, input, btn] = derefPageElements()
if (isPWPage) {
header.innerText = null
header.style.lineHeight = 1.1
header.innerHTML = `
The online deposit flow is closed`
expl.innerText = null
expl.innerHTML = `
<p>This page is now closed. If you have questions,
<a href="mailto:email@example.com">email us!</a></p>
`
expl.style.lineHeight = '1.25'
if (!isDev) {
btn.innerText = `So long, and thanks for all the fish`
expl.style.paddingBottom = '0'
input.style.display = 'none'
}
}
}
const observer = new MutationObserver((mutations) => {
const [isPWPage] = derefPageElements()
if (isPWPage) {
customizePasswordPage();
observer.disconnect(); // Stop observing once the page is found
}
});
// Start observing the entire document
observer.observe(document.body, {
childList: true,
subtree: true
});
</script>