How to automate Microsoft MFA using Playwright

We are going to learn how to automate Microsoft MFA using Playwright in this post. When someone says there are some things that you can’t do, that’s when you know that you are up for a challenge. This was one of those bizarre scenarios. While many made fun of me asserting that it can’t be done because that was the whole point of adding MFA on an account, didn’t realize that there is always a way.

You can’t, of course, grab mobile OTPs into your system using automation unless you are doing product testing, but you can definitely turn that around into an authenticator app logic, which would help you achieve the same thing.

So you must be wondering how to automate Microsoft MFA using Playwright. The way to do that is to use the authenticator app instead of your normal mobile OTP login.

We will see the same thing in simple baby steps in the following post.

Steps on How to Automate Microsoft MFA using Playwright

Step 1: Navigate to the following URL:

https://mysignins.microsoft.com/security-info

It will take you to the Security Info page. Listed in it will be all the methods you have been using to log in to your Microsoft account.

Step 2: Simply click on + Add sign-in method.

Step 3: A small dialog box will open asking you what method you wish to choose. Click on the dropdown and select Authenticator app from there.

Step 4: Click on Add button once you have selected Authenticator app from the dropdown.

Step 5: In the next dialog box that opens click on ‘I want to use a different authenticator app’.

As you can see from the image below that the next screen is asking you to set up an account. You have to leave things for now, and flick out your mobile phone.

Mobile Step 1: At this point, you need to install any authenticator app available on Play Store.

I used an app called Authenticator by Pixplicity. You can, of course, use any of your choices.

Mobile Step 2: Open the downloaded app on your mobile device, and click on Add button to add a new account.

Here, in this example, Click on the + button in the app.

Mobile Step 3: The next screen will ask you to scan. You don’t have to scan instead choose the key option because that would be something that we will be using in our code. So, click on Enter key… option.

When you click on Enter key… the next screen will be where you will be creating an authentication account.

Step 6: Go back to your system where you had left things half way. Then click on Next button.

Step 7: In the next screen, click on the ‘Can’t Scan image?’ option:

Doing so will allow you to grab the secret key in text format. As you can see in the image below, both your email account and secret key will get listed.

Step 8 / Mobile Step 4: Go back to your mobile and enter the secret key from your system into the dialog box that was open there. Provide a label in the label section and then click on Add button.

Once you do that you will notice an account has gotten created in your app, and a 6-digit code will begin to show. This code keeps on refreshing based on the SHA1 algorithm logic every few seconds. Of course, this can be configured too.

Step 9: Go back to your system, and click on the Next button.

Step 10: You will be asked to enter the same 6-digit code that your authenticator app is showing. Go ahead and type the code here, then click on Next.

Now you just have to make the authenticator app method your default sign-in method.

Step 11: To do that, click on Change next to the Default sign-in method option.

Step 12: In the dropdown make sure you select ‘Authenticator app or hardware token – code’ option and then click confirm.

Updating your Automation Code to reflect logic

Step 1: Now is the time to move to your code. Firstly you have to install a package called ‘otpauth’.

You can simply do that by typing:

npm install otpauth

and pressing Enter in your terminal.

You will notice the package of ‘otpauth’ will get added to your package.json.

Step 2: We have to use a method called TOTP from this otpauth package to be able to move forward. Hence, we will import this package in our code like this:

Step 3: Now we have to use this TOTP to generate a token. To do that simply use the following code:

  let totp = new TOTP({

            algorithm: ‘SHA1’,

            digits: 6,

            period: 30,

            secret: process.env.TOTP,

        });        

        // Generate a token.

        return totp.generate();

You can put the above in a function call like this one and then grab the token from there. The token would be nothing but the 6-digit code that will help you get through.

Since I am using .env to input my secret key, I am using ‘process.env.TOTP’ to grab it from there. It is the same secret key that we generated before Step 8 / Mobile Step 4. You can, of course, hardcode it for testing purposes, but you gotta be wary of security issues.

My .env has the secret key placed in the TOTP constant like this:

That’s it. Use the code generated as a token now at the place where they will ask you to enter the code through automation.

Follow up by clicking on verify button and then the yes button and you are good to go.

If you liked this tutorial on How to automate Microsoft MFA using Playwright, please check out other cool tutorials on Dumb It Dude as well.