Set up 2FA on a Wordpress page with TypingDNA Verify

What is 2FA for WordPress?

Two-factor authentication (2FA) for Wordpress is the authentication process that provides an extra layer of security beyond passwords, for your users, that helps defend against account takeover.

Goal

The aim of this tutorial is to lay out the steps for integrating TypingDNA Verify 2FA on a wordpress page. These steps can be used to create a custom plugin. This tutorial is designed for the users of the Wordpress website and not for the administrator of the website.

Intro

In this tutorial we will build a sample page on wordpress that will run TypingDNA Verify 2FA. We will cover all technologies that are needed to run a simple demo on a local machine.

Prerequisites

In order to create a working example of TypingDNA Verify 2FA, the following actions need to be taken:

Create an account on typingdna.com. The Verify 2FA dashboard will provide you with the clientId, secret and applicationId.

Have an account on Wordpress with a business subscription that will allow you to run plugins.
Install the “Insert PHP Code Snippet” plugin on our wordpress platform. https://wordpress.org/plugins/insert-php-code-snippet/

Configuration of your WordPress 2FA

We will first start by adding the PHP code into a code snippet.

Select the PHPCode Snippet option from the XYZ PHP Code available on the left hand side menu.

We are going to create the first PHP Code Snippet by selecting the “Add New PHP Code Snippet”.

Select Tracking Name as verify-button.

In the PHP code section first we will add the content from github: https://github.com/TypingDNA/TypingDNA-Verify-Client/blob/main/php/TypingDNAVerifyClient.php (do not add the first line <?php and the last line ?>).

Now that we have integrated the TypingDNAVerifyClient, next we will initialize TypingDNA Verify 2FA where we will pass as parameters the clientId, secret and applicationId.

            
$typingDNAVerifyClient = new TypingDNAVerifyClient($client_id, $application_id, $secret);

You will need to initialize the variable with the actual values from the Verify 2FA Dashboard.

Once the variable is initialized we will generate the data attributes required to start TypingDNA Verify 2FA.

            
$typingDNADataAttributes = $typingDNAVerifyClient->getDataAttributes([
    'email'=> "demo@typingdna.com",
    'language' => "en",
    'mode' => "standard"
]);

For this demo we are going to use the email address as the root of trust.

Next we will add the button that will start the TypingDNA Verify 2FA window.

            
echo "
    <button
        class = 'typingDNA-verify'
        id = 'buttonTyping'
        data-typingdna-client-id=".$typingDNADataAttributes['clientId']."
        data-typingdna-application-id=".$typingDNADataAttributes['applicationId']."
        data-typingdna-payload=".$typingDNADataAttributes['payload']."
        data-typingdna-callback-fn= 'callbackFn'> Verify with TypingDNA
    </button>";

Select the Create button.

This code will generate a button that will open the TypingDNA Verify 2FA pop-up window.

Next, navigate to the header section:

Add the following code at the top of the header:

            
<script src ="https://cdn.typingdna.com/verify/typingdna-verify.js"></script>

This will help us generate the TypingDNA Verify 2FA pop-up window.

The javascript callbackFn will be called once the TypingDNA Verify 2FA process is completed. So we will add the following code to redirect us to another page with the OTP (one time password) that was generated from the Verify window.

Replace new_page with the link of the new page that we will create later.

            
<script>
    function callbackFn(payload) {
        window.location.href = "new_page?otp=".concat(payload['otp']);
    }
</script>

Next we will create a sample page where we will add the code snippet that we created.

[xyz-ips snippet="verify-button"]

Next we will navigate to the PHP Code Snippet plugin to create another snippet.

The “Tracking Name” will be verify-check.

In the PHP code section first we will add the content from github again: https://github.com/TypingDNA/TypingDNA-Verify-Client/blob/main/php/TypingDNAVerifyClient.php (do not add the first line <?php and the last line ?>).

At the end we will add

            
$typingDNAVerifyClient = new TypingDNAVerifyClient($client_id, $application_id, $secret);

$response = $typingDNAVerifyClient->validateOTP([
    'email' => "demo@typingdna.com",
    'phoneNumber' => "",
], $_GET['otp']);

print_r($response);

Next we will create another page that will match the new_page link that we mentioned in the code in the header. We will add the following code to print out the result of the authentication.

[xyz-ips snippet="verify-check"]

The success value indicates if it was a valid authentication 1 or if it was invalid 0.

For the production environment, in order to send OTPs via emails you will need to integrate your Verify 2FA account with SendGrid from the dashboard.