Automate TOTP 2-Factor Authentication (2FA) with Playwright

A short tutorial to help you understand what goes into automating a TOTP-based 2FA flow using Playwright and the OTPAuth library.
Goal:
Automate a 2FA login using Playwright and OTPAuth.
Note:
There are multiple libraries out there for TOTP generation. Pick the one you like.
Timestamps:
00:00 Introduction
00:33 TOTP for 2FA
01:22 Approaching 2FA automation
02:23 Extracting the TOTP secret
03:48 Recording the script
05:32 Generating the TOTP token
08:19 2FA automation challenges
10:11 Resources
Environment:
- MacBook Pro (13-inch, M1, 2020)
- macOS Monterey (12.2.1)
- Node v14.15.4
- Playwright 1.24.2
Resources:
- QR decoder: zxing.org/w/decode.jspx
- OTPAuth library: hectorm.github.io/otpauth
- The excellent official Playwright docs: playwright.dev
- IETF RFC6238: www.rfc-editor.org/rfc/rfc623...
- ragog.link for more articles and notes
Contact:
- @rag0g on Twitter
- linkedin.com/in/ragog
-@Giovanni Rago on the official Playwright Slack channel
Disclaimer
These videos are meant to teach interested people, professionals and amateurs, how to use browser automation tools such as Playwright to write scripts for testing, synthetic monitoring, scraping and similar use cases. They center around popular websites to demonstrate real world scenarios for automation. Their aim is never to disrupt a website’s availability or violate its terms of service.
Before you attempt automation on a publicly available website, make sure you read the terms and conditions around automation (and specifically scraping) and abide by them.

[@BoazRymland-mx9qf]

Very useful indeed, clear and concise!

[@JustOneMoreTourist]

Thanks, man! Very educational! I was always wondering how others overcome it!

[@MichaelStrother]

Thank you for creating this... very helpful!

[@pistolprasadyt8748]

Awesomr bro.. From India

[@jaysont5311]

This is very cool. Thanks for sharing

[@HighRollersLounge]

That was useful, thank you!

[@flaviokonti5522]

Thanks man, this is useful

[@MrSpinozadp]

awesome! thx

[@wangarewakungu9753]

That was helpful. Kindly do the same with Python.

[@soumyabhat5308]

How to automate when you receive OTP via text msg in phone?.

[@Vineetkumar-hu2cs]

I am too interested to know same asked by @soumyabhat5308

[@davidev9107]

Java alternative ?

[@pedritoap1]

Amazing, I did it and did work. Do you know if it is possible to do it with python with some library?

[@wangarewakungu9753]

I would like to know as well. Did you get a solution?

[@diddi62]

me too @@wangarewakungu9753

[@amritesh94]

Does this work with Microsoft Auth Azure as well?
In the QR i am only getting the client secret and not the period and digits

[@danielkovacs3664]

good questin it is interesting for me as well

[@marijanarukavina9499]

How can I make it work with Upwork, they have Authenticator app for OTP but I don’t know how to get secret since there is no QR code

[@williamflores7323]

How can I do this in python?

[@mohitomish]

Java alternative?

[@davidev9107]

I search it me too