[Synthetics]: fix MFA totp method for browser monitors (#4581)

(cherry picked from commit 083cf27)

# Conflicts:
#	docs/en/serverless/synthetics/synthetics-mfa.asciidoc

Author: vigneshshanmugam

docs/en/observability/synthetics-mfa.asciidoc

@@ -41,7 +41,7 @@ import { journey, step, mfa} from '@elastic/synthetics';
 journey('MFA Test', ({ page, params }) => {
   step('Login using TOTP token', async () => {
     // login using username and pass and go to 2FA in next page
-    const token = mfa.token(params.MFA_GH_SECRET);
+    const token = mfa.totp(params.MFA_SECRET);
     await page.getByPlaceholder("token-input").fill(token)
   });
 });
@@ -51,12 +51,12 @@ For monitors created in the Synthetics UI using the Script editor, the `mfa` obj
 
 ```ts
 step('Login using 2FA', async () => {
-  const token = mfa.token(params.MFA_GH_SECRET);
+  const token = mfa.totp(params.MFA_SECRET);
   await page.getByPlaceholder("token-input").fill(token)
 });
 ```
 
 [NOTE]
 ====
-`params.MFA_GH_SECRET` would be the encoded secret that was used for registering the Synthetics Authentication in your web application.
+`params.MFA_SECRET` would be the encoded secret that was used for registering the Synthetics Authentication in your web application.
 ====

docs/en/serverless/synthetics/synthetics-mfa.asciidoc

@@ -0,0 +1,66 @@
+[[observability-synthetics-mfa]]
+= Multi-factor Authentication (MFA) for browser monitors
+
+++++
+<titleabbrev>Multifactor Authentication for browser monitors</titleabbrev>
+++++
+
+Multi-factor Authentication (MFA) adds an essential layer of security to
+applications login processes, protecting against unauthorized access. A very
+common use case in Synthetics is testing user journeys involving websites
+protected by MFA.
+
+Synthetics supports testing websites secured by Time-based One-Time Password
+(TOTP), a common MFA method that provides short-lived one-time tokens to
+enhance security.
+
+[discrete]
+[[observability-synthetics-mfa-configuring-totp-for-mfa]]
+== Configuring TOTP for MFA
+
+To test a browser journey that uses TOTP for MFA, first configure the
+Synthetics authenticator token in the target application. To do this, generate a One-Time
+Password (OTP) using the Synthetics CLI; refer to <<observability-synthetics-command-reference,`@elastic/synthetics totp <secret>`>>.
+
+[source,sh]
+----
+npx @elastic/synthetics totp <secret>
+
+// prints
+OTP Token: 123456
+----
+
+[discrete]
+[[observability-synthetics-mfa-applying-the-totp-token-in-browser-journeys]]
+== Applying the TOTP Token in Browser Journeys
+
+Once the Synthetics TOTP Authentication is configured in your application, you can now use the OTP token in the synthetics browser
+journeys using the `mfa` object imported from `@elastic/synthetics`.
+
+[source,ts]
+----
+import { journey, step, mfa } from "@elastic/synthetics";
+
+journey("MFA Test", ({ page, params }) => {
+  step("Login using TOTP token", async () => {
+    // login using username and pass and go to 2FA in next page
+    const token = mfa.totp(params.MFA_SECRET);
+    await page.getByPlaceholder("token-input").fill(token);
+  });
+});
+----
+
+For monitors created in the Synthetics UI using the Script editor, the `mfa` object can be accessed as shown below:
+
+[source,ts]
+----
+step("Login using 2FA", async () => {
+  const token = mfa.totp(params.MFA_SECRET);
+  await page.getByPlaceholder("token-input").fill(token);
+});
+----
+
+[NOTE]
+====
+`params.MFA_SECRET` would be the encoded secret that was used for registering the Synthetics Authentication in your web application.
+====