issue with cy.origin() and otplib Integration in Cypress Tests

[Padmini-bulnda]

Hello Cypress Community,

I’m facing an issue while trying to use cy.origin() in combination with otplib for 2-factor authentication in my Cypress tests. Despite enabling the experimentalOriginDependencies flag, I'm encountering errors related to process is not defined and challenges with passing dependencies correctly.

Here's the relevant part of my code:

import data from "../../fixtures/user.json";

class LoginPage {
webLocators = {
username: '#awsui-input-0',
password: '#awsui-input-1',
nextbtn: '.awsui-button',
submitbtn: 'button[type="submit"]',
Authenticatorbtn: "input[value='TOTP']",
Pointer: "a[class='pointer']",
secretkeylink: "span[class='secret-key awsui-util-mr-s']",
Inputsecter: 'input[type="text"]'
}

loginWithUI() {
    cy.wait(7000);
    try {
        cy.origin('https://ap-south-1.signin.aws', { 
            args: { webLocators: this.webLocators, data: { username: data.username, password: data.password } },
        }, (args) => {
            const otplib = Cypress.require('otplib');
            const _ = Cypress.require('lodash');

            cy.visit('https://propeli-qa.sfxapps.com/dashboard');
            cy.get(args.webLocators.username, { timeout: 12000 }).should('be.visible');
            cy.get(args.webLocators.username).type(args.data.username);
            cy.get(args.webLocators.nextbtn).click();
            cy.get(args.webLocators.password).type(args.data.password);
            cy.get(args.webLocators.submitbtn).click();
            cy.wait(20000);
            cy.get(args.webLocators.Authenticatorbtn).click();
            cy.get(args.webLocators.submitbtn).click();
            cy.get(args.webLocators.Pointer).click();
            cy.get(args.webLocators.secretkeylink).invoke('text').then((secretKey) => {
                console.log("this is " + secretKey);
                const secret = otplib.authenticator.generate(secretKey);
                cy.get(args.webLocators.Inputsecter).type(secret);
                cy.get(args.webLocators.submitbtn).click();
                cy.get(args.webLocators.submitbtn).click();
                cy.log("success");
            });
        });

        cy.wait(20000);  // Adjust wait time and additional operations here as needed

    } catch (error) {
        console.error('Login failed:', error); // Log the error for debugging
        throw error;
    }
}

}

export default new LoginPage();

for above problem create a question for cypress discussion channel
Sure! Here's a draft of a question you can post on the Cypress discussion channel:

Title: Issue with cy.origin() and otplib Integration in Cypress Tests

Body:

Hello Cypress Community,

I’m facing an issue while trying to use cy.origin() in combination with otplib for 2-factor authentication in my Cypress tests. Despite enabling the experimentalOriginDependencies flag, I'm encountering errors related to process is not defined and challenges with passing dependencies correctly.

Here's the relevant part of my code:

javascript
import data from "../../fixtures/user.json";

class LoginPage {
webLocators = {
username: '#awsui-input-0',
password: '#awsui-input-1',
nextbtn: '.awsui-button',
submitbtn: 'button[type="submit"]',
Authenticatorbtn: "input[value='TOTP']",
Pointer: "a[class='pointer']",
secretkeylink: "span[class='secret-key awsui-util-mr-s']",
Inputsecter: 'input[type="text"]'
}

loginWithUI() {
    cy.wait(7000);
    try {
        cy.origin('https://ap-south-1.signin.aws', { 
            args: { webLocators: this.webLocators, data: { username: data.username, password: data.password } },
        }, (args) => {
            const otplib = Cypress.require('otplib');
            const _ = Cypress.require('lodash');

            cy.visit('https://propeli-qa.sfxapps.com/dashboard');
            cy.get(args.webLocators.username, { timeout: 12000 }).should('be.visible');
            cy.get(args.webLocators.username).type(args.data.username);
            cy.get(args.webLocators.nextbtn).click();
            cy.get(args.webLocators.password).type(args.data.password);
            cy.get(args.webLocators.submitbtn).click();
            cy.wait(20000);
            cy.get(args.webLocators.Authenticatorbtn).click();
            cy.get(args.webLocators.submitbtn).click();
            cy.get(args.webLocators.Pointer).click();
            cy.get(args.webLocators.secretkeylink).invoke('text').then((secretKey) => {
                console.log("this is " + secretKey);
                const secret = otplib.authenticator.generate(secretKey);
                cy.get(args.webLocators.Inputsecter).type(secret);
                cy.get(args.webLocators.submitbtn).click();
                cy.get(args.webLocators.submitbtn).click();
                cy.log("success");
            });
        });

        cy.wait(20000);  // Adjust wait time and additional operations here as needed

    } catch (error) {
        console.error('Login failed:', error); // Log the error for debugging
        throw error;
    }
}

}

export default new LoginPage();

I've made sure that:
The experimentalOriginDependencies flag is enabled in cypress.json.
Cypress.require() is used inside the cy.origin() callback.
Despite these efforts, the process is not defined error persists. Any insights or suggestions on properly passing dependencies and handling this issue within the cy.origin() block would be greatly appreciated.

Thanks in advance for your help!