Tutorial: Email Approval token

Ask the community
, ,
1

Hi Guys

I couldn’t find much on this and the documentation isn’t as straight forward as one would like, so here’s a quick tutorial on how set up an Email Approval Token for new website members who need to confirm their account via a link sent to the email they have used to registere with.

Steps:

  1. Set up a ‘Triggered Email’ - In your WiX Dashboard, go to ‘Marketing Tools’, then to ‘Triggered Emails’ right at the bottom and create a new triggered email. Give it the ID: ’ verifyRegistration’ - we will use this ID in our code. When creating this triggered email, add a link to the page on your site where users will be sent to confirm their emails (by clicking on the email link), so for my example this is https://devteam46.wixsite.com/email-approval-token/confirm-email - ‘confirm-email’ is the page on my site where users will be sent when clicking on the link. Then, append the following to that link: ‘?token=’ so that it now looks like this: ‘https://devteam46.wixsite.com/email-approval-token/confirm-email?token=’ and last but not least, add a variable to the end of that link called ‘approvalToken’, so now the complete link looks like this:
    https://devteam46.wixsite.com/email-approval-token/confirm-email?token=${approvalToken}

1430×238 18.9 KB

  1. Add the following code to the page/lightbox where users will do the account registration:
import wixUsers from 'wix-users';
import wixData from 'wix-data';
import { doRegistration } from 'backend/register';

export function button2_click_1(event) {
let firstName = $w("#input2").value     //remember to change these inputs out for your
let lastName = $w("#input3").value
let email = $w("#input4").value
let password = $w("#input5").value
    doRegistration(email, password, firstName, lastName)
        .then((result) => {   
                let userId = result.user.id
                
                let userInput = {
                "firstname": firstName,
                "lastname": lastName,
                "email": email,
                "_id": userId
                }
                wixData.insert("SiteMembers", userInput)     //SiteMembers is my database name
                .then(() => {
                    $w("#input2").value = "";   //clear the input values
                    $w("#input3").value = "";
                    $w("#input4").value = "";
                    $w("#input5").value = "";
                })
        });
}
  1. On the page where users will be sent when they clicked on the link (confirm-email in my example), add the following code:
import wixLocation from 'wix-location';
import wixUsers from 'wix-users';
import {doApproval} from 'backend/register';

$w.onReady( () => {
 // get the token from the URL
 let token = wixLocation.query.token;

  doApproval(token)
    .then( (result) => {
 if (result.approved){
 // log the user in
        wixUsers.applySessionToken(result.sessionToken);
          console.log("Approved");
      }
 else {
        console.log("Not approved!");
      }
    } );
} );
  1. Create a backend file called ‘register.jsw’ and add the following code in there:
import wixUsers from 'wix-users-backend';

export function doRegistration(email, password, firstName, lastName) {
 // register the user
 return wixUsers.register(email, password, {
 "contactInfo": {
 "firstName": firstName,
 "lastName": lastName
            }
        })
        .then((results) => {
            wixUsers.emailUser('verifyRegistration', results.user.id, {
                variables: {
                    approvalToken: results.approvalToken
                }
            });
        return results
        });
}

export function doApproval(token) {
 // approve the user
 return wixUsers.approveByToken(token)
 // user is now active, but not logged in
 // return the session token to log in the user client-side
        .then((sessionToken) => {
 return { sessionToken, "approved": true };
        })
        .catch((error) => {
 return { "approved": false, "reason": error };
        });
}

That’s it! Your integration should now work.

This tutorial is largely based on the documentation created by WiX and was only expanded on where necessary. The original example can be found here: https://www.wix.com/corvid/reference/wix-users-backend.html#approveByToken

To view a real-life example, view this site:
https://devteam46.wixsite.com/email-approval-token

Good luck!
Tiaan

8 Likes
2

Thanks for taking out the time to write this Tiaan