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
- Select Country
- Enter Phone Number
- Select Radio button of your choice to get code
- 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.