Automating Complex Auth & MFA with Playwright and AI

Authentication is often the most fragile part of any synthetic monitor. Traditional scripts frequently break due to:

• Changing CSS selectors on login forms.
• One-Time Passwords (OTP) and MFA challenges.
• OAuth redirects (Google, GitHub, Microsoft).
• Expiring session cookies.

supaguard solves this by combining standard Playwright storageState with AI-Assisted Navigation.

The "Emerald" Approach to Auth

1. Describe, Don't Code

Instead of manually finding input IDs, give supaguard a hint:

"Log in with user test@example.com and password {{SECRETS.LOGIN_PW}}. If a 'Welcome' popup appears, close it."

Our AI agent handles the navigation, clicking, and waiting, generating a production-ready script that survives minor UI changes.

2. Handling Multi-Factor Authentication (MFA)

supaguard provides a built-in MFA helper for TOTP-based authentication.

import { test, expect } from '@playwright/test';

test('login with MFA', async ({ page }) => {
  await page.goto('/login');
  await page.getByLabel('Email').fill('user@example.com');
  await page.getByLabel('Password').fill(process.env.PASSWORD);
  await page.getByRole('button', { name: 'Sign In' }).click();

  // Handle MFA Challenge via AI instructions
  // The AI identifies the 6-digit input and fills the current TOTP
  await page.getByLabel('Verification Code').fill(process.env.MFA_SECRET);
});

3. Session Persistence (storageState)

To avoid logging in for every single run (which can trigger rate limits), supaguard allows you to reuse authentication states.

• Setup Run: The AI logs in once and captures the cookies and localStorage.
• Monitoring Runs: Every subsequent check starts with the authenticated state injected, making the monitor faster and more reliable.

Best Practices for Secure Auth Monitoring

1. Use Dedicated Test Accounts: Never use a real user account. Create a synthetic-monitor@company.com user with specific permissions.
2. Environment Variables: Store passwords and MFA secrets in your Organization Variables. These are encrypted and never shown in logs.
3. Whitelist Monitoring IPs: If your app uses IP-based security, ensure our Global Network Nodes are whitelisted.

More Playwright Power

• Resilient Locators
• Monitoring iframes
• Managing Secrets