Hi,
I’d like to have a password protected page on my Wix site. However, I don’t like the default “Guest Area” login page (doesn’t fit with the site’s theme).
I understand there might be a way to use a custom lightbox/dev tools to accomplish this?
I don’t currently have/nor do I want a Members Area on the site. Simply 1 password protected page with a custom password “login” page (password field only).
Any help would be appreciated.
Regards
Hi there,
The way to do it is to have a backend module that stores the password, and a backend function that you call from the frontend with the password as an argument, only return true if the password is correct.
// Backend: authentication.jsw;
export function validate(pass) {
const password = 'ThisIsThePagePassword#3';
if (pass === password) {
return Promise.resolve(true);
} else {
return Promise.resolve(false);
}
}
// Frontend: Protected Page
import wixLocation from 'wix-location';
import wixWindow from 'wix-window';
$w.onReady(() => {
wixWindow.openLightbox('Check Password').then((authenticated) => {
if (authenticated) {
// Run the page code
} else {
wixLocation.to('/protected-content');
}
})
})
// Frontend: Lightbox (Check Password)
import wixWindow from'wix-window';
import { validate } from 'backend/authentication.jsw';
$w.onReady(() => {
$w('#validateBtn').onClick(() => {
$w('#validateBtn').disable().the(() => {
validate($w('#passInput').value).then((authenticated) => {
if (authenticated) {
wixWindow.lightbox.close(true);
} else {
// Show an incorrect password message.
$w('#validateBtn').enable();
}
})
})
})
})
You need to protect your passsword validation process from robots by using reCAPTCHA, sessions limitations and more, but you got the basic idea.
Hope this helps~!
Ahmad
Hi Ahmad, thanks for the prompt reply. I will take a look at how I implement those suggestions, thank you.
The coding side of Wix is new to me, so I expect a steep learning curve.
Thanks again.
OK. So we’re making progess, thank you.
I created the backend jsw, and changed the password.
I removed all previous code from the page I wanted to password protect and copied this in to it.
// Frontend: Protected Pageimport wixLocation from'wix-location';import wixWindow from'wix-window'; $w.onReady(()=>{ wixWindow.openLightbox('Check Password').then((authenticated)=>{if(authenticated){// Run the page code}else{ wixLocation.to('/protected-content');}})})
Now, when I click on the page it opens up a lightbox (which I renamed to “Check Password”).
In the Lightbox I added a password field (renamed to passInput) and a button (renamed to validatebtn).
I also created a blank page called protected-content.
However, in my testing. I was unable to get passed the password entry option. Entering the correct password, doesn’t remove the Lightbox and display the page content. Just seems to sit there.
Pressing the X Icon, closes the Lightbox, and forwards me to the “protected content” page.
Any further guidance would be appreciated.
Regards
J
Looks like I was missing;
import wixWindow from ‘wix-window’ ;
from the Check Password Lightbox Code.
I also cannot for the life of me get the error text to show.
$w('#validateBtn').disable().the(()=>{validate($w('#passInput').value).then((authenticated)=>{if(authenticated){ wixWindow.lightbox.close(true);}else{// Show an incorrect password message.}
I’m sure I’m missing a step, but I don’t know what it is.
Yeah, I forgot it too 
Sorry for that.
I did not include an error message, it’s just a note to tell you that you can show an error mesage in this case.
if (authenticated){
wixWindow.lightbox.close(true);
} else {
// Show an incorrect password message.
$w('#errorMsg').text = 'The password is incorrect, please try again later';
}
Something like that 
@ahmadnasriya I managed to add a text field, with prepopulated text, then just use the code below to call it.
if (authenticated) {
wixWindow.lightbox.close(true);
} else {
$w("#errortext").show();
}
@jcarnon That’s another way to do it, great job 
Hi Ahmad,
I have the same issue as j.carnon in that I do not like the default ‘guest area’.
I have tried to copy your code above and have created a backend module with the follwing code:
// Backend: authentication.jsw;
export function validate ( pass ) {
const password = ‘password’ ;
if ( pass === password ) {
return Promise . resolve ( true );
} else {
return Promise . resolve ( false );
}
}
I have created a lightbox with a text input field which I have called ‘passInput’ and a button which I have called ‘validateBtn’ and added the following code to the lightbox:
// Frontend: Lightbox (Check Password)
import wixWindow from ‘wix-window’ ;
import { validate } from ‘backend/authentication.jsw’ ;
$w . onReady (() => {
$w ( ‘#validateBtn’ ). onClick (() => {
$w ( ‘#validateBtn’ ). disable (). the (() => {
validate ( $w ( ‘#passInput’ ). value ). then (( authenticated ) => {
if ( authenticated ) {
wixWindow . lightbox . close ( true );
} else {
// Show an incorrect password message.
$w ( ‘#validateBtn’ ). enable ();
}
})
})
})
})
I have also added this code to the page I want to password protect:
// Frontend: Protected Page
import wixLocation from ‘wix-location’ ;
import wixWindow from ‘wix-window’ ;
$w . onReady (() => {
wixWindow . openLightbox ( ‘Check Password’ ). then (( authenticated ) => {
if ( authenticated ) {
// Run the page code
} else {
wixLocation . to ( ‘/protected-content’ );
}
})
})
Also, I have created a blank page called protected-content.
When I open the password protected page, the lightbox is displayed and no matter what I type in, the wrong password or the right one, it always sends me to the protected-content page.
Can you see anything that I have done wrong?
Many thanks for your help in advance. 
@canterburyarchersweb That’s probably because the lightbox got closed not via the code, but either by clicking outside the lightbox or by clicking on the “X” icon or a close button, you need to disable all the previous ones to prevent the lightbox from closing unintentionally.
@ahmadnasriya That has done the trick. Thank you so much for your help. 
@canterburyarchersweb You’re welcome 
Happy to help
I’m having this is exact same problem (entering the password correctly or incorrectly just disables the button). But I seem to have
import wixWindow from ‘wix-window’;
in the code.
My code looks like this (forgive my lazy labels)
import wixWindow from ‘wix-window’ ;
import { validate } from ‘backend/authentication.jsw’ ;
$w . onReady (() => {
$w ( ‘#button1’ ). onClick (() => {
$w ( ‘#button1’ ). disable (). the (() => {
validate ( $w ( ‘#input1’ ). value ). then (( authenticated ) => {
if ( authenticated ) {
wixWindow . lightbox . close ( true );
} else {
// Show an incorrect password message.
$w ( ‘#button1’ ). enable ();
}
})
})
})
})
Hi Ahmad, I’m having a bit of trouble connecting the recaptcha to this process.
Currently the code looks like this but there’s a lot of guess work going on!
import wixWindow from’wix-window’;
import { validate } from ‘backend/authentication.jsw’;
$w.onReady(() => {
$w(‘#button2’).onClick(() => {
$w(‘#button2’).disable().then(() => {
validate($w(‘#input3’).value).then(authenticated);
validate($w(‘#captcha1’)).then((checked) => {
if (authenticated && checked) {
wixWindow.lightbox.close(true);
} else {
// Show an incorrect password message.
$w(‘#button2’).enable();
}
})
})
})
})
@alex80332 What error(s) do you get?