Summary
This article explains how to retrieve a One-Time Password (OTP) from an API and use it dynamically in a Dynatrace Browser Monitor. This approach enables synthetic monitoring of applications protected by multi-factor authentication (MFA) by automatically requesting, storing, and inserting an OTP during the login process.
By integrating an API call into your Browser Monitor script, you can automate OTP-based authentication and ensure end-to-end monitoring of secure user journeys.
Problem
Many modern applications protect user logins with One-Time Password (OTP) or Multi-Factor Authentication (MFA) mechanisms. When creating a Dynatrace Browser Monitor, these additional authentication steps can prevent the monitor from successfully completing the login workflow.
Common scenarios include:
- Applications that require MFA during sign-in
- OTP values generated by internal services and exposed through APIs
- Authentication workflows that require a fresh OTP for every login attempt
Without dynamically retrieving and inserting the OTP, the Browser Monitor may fail at the authentication step because the required verification code is missing, expired, or invalid.
Pre-requisites
Before implementing the solution, make sure:
- You have the API endpoint that returns a valid OTP.
- Your API credentials or access token are available and working.
- The OTP is valid only for the duration required by the login step (usually a few seconds).
Check if the issue matches this article by confirming:
- The Browser Monitor fails at the OTP input step.
- Application logs or monitor details show missing or invalid OTP value.
Resolution
Follow these steps to configure your Browser Monitor with dynamic OTP handling:
1. Create the Browser monitor events up to the point where the one-time password (OTP) is needed.
- Navigate to the URL.
- login with credentials
- The OTP page appears.
- Open a page on the same domain as the API URL in a new tab if the original navigation and API domains are different. This step is only necessary if you see a CORS error when making the fetch in the next event.
2. Add a JavaScript event, using Add synthetic event, to fetch the OTP value and save the value. Something like the below, which stores the value in a variable called token.
api.startAsyncSyntheticEvent();
fetch('<yoururl>', {
method: 'POST',
headers: {
'content-type': 'application/json',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'X-Requested-With'
}
}).then(function(response) {
if (!response.ok) {
throw Error(response.status + ":" + response.statusText);
}
return response;
}).then(response => response.text()).then(text => {
try {
api.info('Resp length: ' + text.length);
if (text.indexOf('code') >= 0) {
<your code to retrieve token>
api.setValue("token", token);
api.finish();
} else {
api.fail("Invalid Response");
}
} catch (err) {
api.fail("Failed to Execute");
}
}).catch(function(error) {
api.fail(error);
});
3. Add a second JavaScript event to pass the value to the OTP generation page
var pin = api.getValue("token");
document.querySelector("#PIN").value = pin;
4. Complete any other steps needed.
What's Next
If these steps don't help, then open a chat and provide the following:
- a link to affected monitor
- the troubleshooting steps you have already completed
- a link to this article
What to read next:
📖 Synthetic Troubleshooting Map📖 Synthetic Browser Monitor Error Codes
📖 Configure Browser Monitors📖 JavaScript events
