Automate Microsoft MFA login using Playwright

Introduction

During a session at ESPC 25, where I and the awesome Peter Paul Kirschner talked about developing, testing and deploying a SPFx solution, a person asked if Playwright supports MFA: the answer is yes, using a TOTP.

This article wants to be an answer to that person and to everyone who wants to use Playwright but has strict company policies regarding MFA.

Requirements

I think that’s obvious but, in order to use MFA (Multi-Factor Authentication) in Playwright, we need MFA to be set up correctly.

More specifically, we need an MFA-enabled account configured to utilize an authenticator app with a time-based one-time password (TOTP) system in place.

The TOTP itself is a temporary code generated through an algorithm that changes every 30 seconds. This dynamic nature of TOTP codes adds an extra layer of protection, making it significantly harder for unauthorized users to gain access. The codes are only valid for a brief period, ensuring that even if someone were to intercept a code, it would quickly become useless.

The TOTP algorithm works by generating a temporary code using a secret key (which is shared between the server and the authenticator app) and the current time, ensuring that each generated code is unique and time-sensitive.

To implement this in a testing environment with Playwright, we can leverage a powerful library for Node.js called OTPAuth. This library simplifies the process of generating TOTP codes, and it can be seamlessly integrated into our automation scripts. By utilizing OTPAuth, we can efficiently create the required TOTP codes needed for the login process in our automated test cases.

Add TOTP to an account

To add a TOTP to an account, you need to go to the specific account’s security settings.

First, go to the Security info page of the account you want to use.

Click the Add sign-in method button:

Select Microsoft Authenticator and click on Add :

Click on the Set up a different authenticator app link:

In the following dialog, click on the Next button:

Click on the Can’t scan the QR code? link

Copy the Secret key and keep it safe (don’t share it) as you will need it later:

Generate TOTP

To automatically generate a TOTP we will use the otpauth package available using NPM.

To generate a TOTP you will need to import the package:

import * as OTPAuth from "otpauth";

After this, you will need to instantiate the TOTP class with the needed configuration. In the sample I’ve used the following code:

let totp = new OTPAuth.TOTP({
  issuer: "Microsoft",
  label: process.env.MFA_USERNAME,
  algorithm: "SHA1",
  digits: 6,
  period: 30,
  secret: process.env.MFA_TOTP_SECRET,
});
const code = totp.generate();

The above code is used to generate a new TOTP using a specific secret. This secret is the one copied before.

To avoid having the secret hard coded you can set it into the .env file and reuse where needed.

Playwright configuration

Now, that we have set up the TOTP and have understood how to generate a new TOTP automatically, it’s possible to configure the login in Playwright.

In the playwright.config.ts file, in the projects section, you can configure a step for handling authentication which can be performed for each other steps.

For example:

export default defineConfig({
  // omitted for brevity ...
  projects: [
    {
      name: "setup",
      testMatch: /mfa.setup.ts/
    },
    {
      name: "Chromium",
      // omitted for brevity ...
      dependencies: ["setup"], // Will run first
    }
  // omitted for brevity ...

In the mfa.setup.ts file, aside of the rest of the code for handling the login, you can then use the code we’ve seen in the previous section to fill in the code:

const otpInput = await page.waitForSelector("input#idTxtBx_SAOTCC_OTC");

let totp = new OTPAuth.TOTP({
  issuer: "Microsoft",
  label: process.env.MFA_USERNAME,
  algorithm: "SHA1",
  digits: 6,
  period: 30,
  secret: process.env.MFA_TOTP_SECRET,
});

const code = totp.generate();
await otpInput.fill(code);

And you’re ready to execute your tests!

Conclusions

MFA can be challenging, but luckily is quite simple to setup and use it with Playwright! In this way you can be compliant with your company policies and still have a nice and running testing setup!

If you need to have a look at how I’ve set up the project you can find it on GitHub here on the mfa-support branch.

Hope this helps!