Age Verification in Breakdance

We’ve release 3 components which you could user to verify users before showing sensitive content. While it is pretty easy to this in Breakdance and could be done in 20mins, some users may struggle with logic and making small code to check and set cookie.

Setup instructions

Breakdance popup template setup

Please navigate: WP Admin > Breakdance > Popups

In top left corner click add new popup.

Click on newly created popup settings. Now we need to set where it applies. In this demo we’ll apply it Everywhere to lock whole site access before visitor verifies age. Mostly this is what you want, but you may want exclude login pages, or apply to certain page. So this may depend on yours particular case.

After doing this, we need to make our popup design.

Breakdance age verification configuration

To recap, we’ve created popup, added Location rule. Now we need to open created popup, and style it. We need to style it to cover whole screen, and disable closing options because only if user verified age popup should close.

// Configuration
const COOKIE_DURATION_IN_DAYS = 30;
const REQUIRED_AGE = 18;
const INVALID_AGE_MESSAGE = "Please enter a valid age.";
const INSUFFICENT_AGE_MESSAGE = `You must be over ${REQUIRED_AGE}`;

// Configuration
const COOKIE_DURATION_IN_DAYS = 30;
const REQUIRED_AGE = 18;
const INVALID_AGE_MESSAGE = "Please enter a valid age.";
const INSUFFICENT_AGE_MESSAGE = `You must be over ${REQUIRED_AGE}`;

// Configuration
const COOKIE_DURATION_IN_DAYS = 30;
const REQUIRED_AGE = 18;
const INSUFFICENT_AGE_MESSAGE = `You must be over ${REQUIRED_AGE}`;

Testing tips

While you are playing with this you should know how to remove cookie. Because you may want multiple times to test, and because your login also relies on cookie so if you remove all of them you will be logged out each time.

Method 1: Please just use browser dev tools it is easy. You could open them with right click + inspect. When they open find Storage tab and click on it. There you will see Cookie section, click on it and find “age_verification_passed_hsx” cookie. Right click on that cookie and it will delete just that cookie.

After doing this reload browser tab to see changes.

Method 2: Another way is to open browser console and drop this small code:

document.cookie = "age_verification_passed_hsx=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
window.location.reload();

Client vs Server side protection

These examples demonstrates client side popup implementation. As these are not the some big security measures and easiest way to cheat this is entering just wrong age. Because this alone is not some rocket science protection so keep in mind that technical user could just go to inspector tools and remove this lock. But we think it is easier for 99% visitor to enter wrong age and bypass this than going to developer tools.

Slightly stronger protection would be setting up this as templates, but you may need also hide header and footer templates. Also we advise you to turn off caching fully if you are using server side approach as caching will break template logic because verified user could cache page which will bypass PHP conditions completely.

Do it on your own (server side setup)

If you opt for this below we are giving below setup instructions how you could do it like described below (NOTE: we don’t provide support for this as it will be tons of tickets related to cache problems as user would still want to cache, and page caching should be fully off)

Custom PHP condition code (1)

return !isset($_COOKIE['age_verification_passed_hsx']);

Make new custom template, set location to Everywhere. For condition we’re going to check cookie by custom PHP so add that condition and click Open PHP Editor.

In PHP Editor paste code that we’ve provided.

For priority there isn’t some magical number, it should be greater than any other templates so we’ve used 2000. Only important note here it should be higher than any other template. In Template paste just component code which will set cookie.

For Header/Footer we may also want to hide them as they could have some data which should not be shown to user so create just Header, Footer with no content and do the same settings for them. This will just load empty Header/Footer for non-verified users.

Legal disclaimer

This solution let’s you set age and cookie duration. It is pretty simple solution which is seen on many sites. But before implementing keep in mind to obey laws and rules of the countries where sites needs to operate. We provide this solution as it is. If you are not sure is this verification enough, we kindly advise you to check and consult around these compliance things with legal experts.