How to automate two-factor authentication with Google Authenticator using Playwright

Hello Everyone, in this post will learn about how to automate two-factor authentication with Google authenticator using playwright.

What is two-factor authentication?

In security domain, there are generally three recognized types of authentication factors.

• Type 1 : Something you know (such as passwords, PIN)
• Type 2 : Something you have (such as tokens, keys, smart phones)
• Type 3 : Something you are (such as fingerprints, face ID)

In simple terms, Two-factor authentication, also commonly referred to as 2FA, means using any two of the above mentioned options together in the authentication process of an application.

Most commonly used 2FA methods are Type 1 and Type 2. For instance, using passwords and verification codes.

Two-factor authentication (2FA) is used to add an extra security layer to the system so that they are less prone to vulnerabilities.

What is Google Authenticator?

Google authenticator is a security application by Google used to generate Time-based One-time passwords (TOTP) to authenticate users to access the application.

Google Authenticator generates 2-Step verification codes on your phone.

What is two-step verification in Gmail?

2-Step verification (also known as two-factor authentication) provides stronger security for your Google Account.

After you set it up, you’ll sign in to your account in two steps using,

• Something you know
• Something you have

In our case, two-factor authentication (2FA) will be based on password and Google authenticator’s TOTP verification codes on your phone to authenticate your Google Account.

Pre-requisite : 

• Valid Google Account (If you don’t have, please create one to proceed further)

This article is divided into three sections.

• Enable two-step verification in Gmail
• Google Authenticator App Setup
• Automate two-factor authentication (2FA) using Playwright

Enable two-step verification in Gmail Account

Step 1: Navigate to your google security settings https://myaccount.google.com/security

Step 2 : Click Security Tab

Step 3 : Click on 2-step Verification

Step 4 : Click Get Started

Step 5 : Enter your password and click Next

Step 6 : In the next screen, enter the following

1. Select Country
2. Enter Phone Number
3. Select Radio button of your choice to get code
4. Click Next

Step 7 : Enter the security code sent to your phone number and click Next

Step 8 : Device has been verified. Click Turn On to complete the 2-step verification setup process.

Two- Step verification method has been turned on and the phone number has been verified!!

Google Authenticator App Setup

Step 9 : Scroll down and Click Google Authenticator – Set Up

Step 10 : Choose your platform and click Next

Step 11 : Click Can’t scan it option to grab your security Key and Click Next

Step 12 : Copy the Security Key (Save this key we need it in later steps)

Note: Before clicking Next, Install Google Authenticator App on your device and enter the copied security key to connect with your gmail account.

Step 13 : Click Next

Step 14 : Enter the TOTP verification code generated in Authenticator App and Click Verify

So going forward, Gmail sign in will prompt for password and verification code.

Google Authenticator App has been setup successfully!!

Automate Two-factor authentication (2FA) using Playwright

If your test application is enabled with google’s two-factor authentication, you should get the time-based verification code (TOTP) from authenticator mobile app and sign in to your account every single time.

But, in an end-to-end testing, how can the test script grab the verification code without accessing the mobile application?

Answer is simple!!

You can implement the program that computes the Authenticator code inside your test script easily.

Step 1 : In terminal, enter the below command to install OTPAuth package

npm install otpauth

Step 2 : Create totpGenerator.ts class and paste the below code

import * as OTPAuth from "otpauth";

export const getOTP = async () => {
let totp = new OTPAuth.TOTP({
    issuer: "ACME",
    label: "AzureDiamond",
    algorithm: "SHA1",
    digits: 6,
    period: 30,
//Replace with your security key copied from step 12
    secret: "nlyyriaxspwdomi7buvo32cuas6tz7aa", //2FA Secret Key
  });
  
  let token = totp.generate();
  return token;
  };

Sample Playwright Typescript Code that uses the generated 2FA code in test script,

import {test, expect} from '@playwright/test';
import { getOTP } from '../../common/utilities/totpGenerator';

test("should allow user to login through google social login", async ({page}) => {
     page.goto("your application url which embeds gmail sign-in");
     await page.getByRole("button", { name: "Google logo Sign in with"}).click();
     // Handle Google Authentication Popup
     const popup = await page.waitForEvent("popup");
     await popup.waitForSelector("#identifierId");
     await popup.getByLabel("Email or Phone").fill("letzdotesting@gmail.com");
     await popup.getByRole("button", { name: "Next" }).click();
     await popup.getByLabel("Enter your password").fill("Password123");
     await popup.getByLabel("Enter your password").press("Enter");
     // OTP value is returned from getOTP method in totpGenerator.ts file
     const otp = await getOTP(); 
     await popup.getByLabel("Enter code").fill(otp);
     await popup.getByLabel("Enter code").press("Enter");
     await popup.getByRole("button", { name: "Continue" }).click();
     // Validate profile page
     await expect(page).toHaveURL(/\/profile/);
   });

Two-factor authentication with Google Authenticator using Playwright is done successfully!!

Please comment below if you have any questions or concerns.

Suggested Readings : 

Top 40 Playwright Interview Questions & Answers

2FA Authentication using Selenium

Know anyone who is learning Playwright?  Help your friends by sharing this article on Facebook, Twitter, or Google Plus.