How to restrict access or set a password to the page in WIX?

Hi,


I would like to share a code that lets you set a custom password to restrict page access depending on a group of people or role.

You can use WIX Dataset to set a password to add the password to the code itself. It is recommended to use the Dataset since you will be able to set a dynamic password for respective pages.

You can use the same approach for setting a unique password per user by defining the same in the Dataset with a combination of logic in the code of which column input has to be set for capturing the respective password.

In the below code I have derived the password in the Input form where I am collecting information in which I have asked for a password to the page. This password is generic in nature for the captioned example and will be asked for a password when a user tries to access the page.



Code:

import wixData from 'wix-data' import wixLocation from 'wix-location'


$w.onReady(function () { $w("#errorMsg").hide() });


export function button2_click(event) { let passkey = $w('#password').value; wixData.query("CorporateEvents") .eq('pagePassword', passkey) .find() .then((results)=>{ if (results.items.length > 0) { let title = results.items[0]['link-corporate-events-title']; wixLocation.to(`${title}`); } else { $w("#errorMsg").show() } }) .catch((err) => { console.log("err", err); }); }

**This code is to apply to the Lightbox you want to prompt on page load for accessing the same.


Explanation:


Section 1 of the code:

export function button2_click(event) { let passkey = $w('#password').value; wixData.query("CorporateEvents") .eq('pagePassword', passkey) .find() .then((results)=>{

passkey is the Input bar where the user will input the password. Using the let function we are defining that the password inputted by the user has to match the password submitted at the time of collecting the details.

wixData.query is where you store the name of the dataset i.e. dataset where the details need to be fetched from.

.eq() stands for equals to. Here we are defining that the password has to match the input. The match function means the password has to be exactly the same.

.find() is the function to find the data that matches the logic set in the wixData.query & .eq()

.then((results)=>{ here you will write the true and false condition to let the user access the page if the criteria are met else give an error.


Section 2 of the Code:

if (results.items.length > 0) { let title = results.items[0]['link-corporate-events-title']; wixLocation.to(`${title}`); } else { $w("#errorMsg").show() } }) .catch((err) => { console.log("err", err); }); }

In this section, we have defined if the logic is true then go to a specific location, else show an error message.

wixLocation.to is the path of the location to your website. In the above code, you will see that I have defined the URL with the help of the title.

This is because the dataset is dynamic in nature and each entry will have a dynamic URL. This URL is not generic thus we need to define the URL using the let function. In the let function, we have mapped the field which stores the dynamic URL.

**You have to create the error log by default.

How to fetch dynamic URL from WIX Dataset?



Recent Posts

See All

How to integrate Razorpay Payment Gateway in WIX?

Finally, Razorpay has been fully integrated with WIX. Now you can add not only PayU but also Razorpay to your WIX website. You can now use both most recommended payment gateway providers in India on y

Call Now

9821610806

Maveristic

Be Valuable, Not Available

Menu

Home

About

Projects

Blog

Contact

Tel: 9821610806

Email: canute@maveristic.in

India

Follow Us

  • YouTube
  • Facebook
  • Twitter
  • LinkedIn
  • Instagram