Member Email Verification

ATTENTION: THIS IS OUR OLD SITE. TO SEE OUR NEW WEBSITE, CLICK HERE.

It is often useful or necessary to verify that an email address provided by members of your website both exists and is owned by them. Emailing verified members also helps to protect your reputation as a sender. You can use this verification status to limit access to parts of your website. This code shows you how to verify the email address of your members by sending the member a verification code, which they need to enter into a verification input field on your website.

This code assumes you have read and implemented the section on Member Profile Pages. The first step is to add a 'Verify Email' button to your members profile page (called btnVerify in this example). We also add a text based warning for members indicating if their email address has not been verified yet (called txtWarning). The Site code for handling sign-ups and login is amended to include a random 4-digit number and a verified status which initialises with 'No'. Both 'verified' and 'randomVar' are fields which need to be added to your members collection. The randomVar field stores a random number which will later be sent to the member to confirm their email address.

let randVar = Math.floor(Math.random() * 8999) + 1000;
const toInsert = {
	"_id": userId,
	"emailAddress": userEmail,
	"verified": "No",
	"randomVar": randVar.toString()
};

The onReady function of the page code for the members profile page is amended to check if a member has a verified email address or not. If the member email address is verified, then the button to verify and the warning message are hidden from view.

import wixUsers from 'wix-users';
import wixData from 'wix-data';

$w.onReady(function () {

	$w("#dbCustomers").onReady( () => {

		const currentItem = $w("#dbCustomers").getCurrentItem();

		if(currentItem.verified === "Yes") {
			$w("#txtWarning").hide();
			$w("#btnVerify").hide();
		}

	});

});

The following code is added to the verify button on the profile page code. It sends a predefined email (called a triggered email - explained later) to the currently logged-in user. The email contains the verification code, which is a 4-digit random number stored in the randomVar field. After the email is sent, the verification button is hidden and the user is redirected to another dynamic member page called 'Customer Verify', where the verification code can be entered to complete the verification. The page redirect action is set under 'connect to data' section of the button. The emailUser code 'R99qYVX' is generated when when the triggered email is setup, and will be a different code for you. You can also give this code a more meaningful name if you want.

export function btnVerify_click(event) {

    if(wixUsers.currentUser.loggedIn) {    

      const userId = wixUsers.currentUser.id;

      const currentItem = $w("#dbCustomers").getCurrentItem();
      wixUsers.emailUser("R99qYVX", userId, {
          variables: {
            VerificationCode: currentItem.randomVar.toString()
          }
        } )
        .then( () => {
          $w("#btnVerify").hide();
        } )
        .catch( (err) => {
           console.log(err);
        } );
    }

}

Next we set up the dynamic 'Customer Verify' page to look something like the screenshot below. The member dataset is called dbCustomers and is set to read and write. The 'Code' text box is where the 4-digit verification code from the email is entered (called iptCode). The 'Verify Email' button is pressed after the verification code is entered (called btnVerify). There is also an error message (called txtError) which is hidden on page load, but will be shown if the verification code entered by the member is incorrect. Add a click event to btnVerify. The code in the btnVerify_click checks if the verification code entered matches the code sent in the email which is held in the members table called dbCustomers. If the verification code matches, then the verified field on dbCustomers is updated to 'Yes' and the user is redirected back to their customer profile page. If it does not match, the txtError message is shown.

import wixLocation from 'wix-location';
import wixUsers from 'wix-users';

$w.onReady(function () {

	$w("#txtError").hide();

});

export function btnVerify_click(event) {

    const currentItem = $w("#dbCustomers").getCurrentItem();

    if($w("#iptCode").value === currentItem.randomVar.toString()){

        $w("#dbCustomers").setFieldValue("verified", "Yes" );

        $w("#dbCustomers").save()  
          .then( (item) => {
          wixLocation.to(`/Customers/Profile/${wixUsers.currentUser.id}`);
        } ); 
         
  }

  if($w("#iptCode").value !== currentItem.randomVar.toString()){
        $w("#txtError").show();
  }
}

The last step in the process is to setup the triggered emails. This is done outside the Wix Editor. On your website dashboard page, click Marketing Tools on the left hand menu, then click Triggered Emails. From here, create a new triggered email with the words, format, images, logo etc. that you'd like. In the text box of the email, you are able to add variables - the names of which should match the code above: VerificationCode in this example. Once the triggered email is saved, you will be given the the Email Id code for your page code: R99qYVX in this example.

Unlock

Please login or sign-up (it's free!) to view our code. Refresh the page if already logged in.

Disclaimer: To the best of our knowledge, this code works for its stipulated purpose. If you find an error in our code, or know of a better way to achieve the same result - please contact us! We will help where we can, however please be aware that the code is provided 'as is' and without a promise of support in using or implementing it.

Browse More Code

VeloCodeBank

take your Wix website to the next level

<Welcome>

Member Email Verification

ATTENTION: THIS IS OUR OLD SITE. TO SEE OUR NEW WEBSITE, CLICK HERE.

The onReady function of the page code for the members profile page is amended to check if a member has a verified email address or not. If the member email address is verified, then the button to verify and the warning message are hidden from view.

Please login or sign-up (it's free!) to view our code. Refresh the page if already logged in.

Contact Us

© VeloCodeBank