Cypress custom Commando with cy.origin inside - cypress

Question

I'm tryin to do this command:
Cypress.Commands.add('login', (userId, password) => {
cy.origin('https://some-sso.page', () => {
cy.get('input[placeholder="UserID"]').type(userId);
cy.get('input[placeholder="Password"]').type(password0);
cy.contains('SIGN IN').click();
});
});
And call it with:
cy.login('someUser', '12345');
But I get the error:
userId is not defined
Variables must either be defined within the cy.origin() command or passed in using the args option.
I tried to add some const inside the cy.origin because without the custom command was working, like this:
cy.origin('https://some-sso.page', () => {
const userId = 'someUser';
const pass = '12345';
cy.get('input[placeholder="User ID"]').type(userId);
cy.get('input[placeholder="Password"]').type(pass);
cy.contains('SIGN IN').click();
});
cy.get('#div > section').contains('It works');
How could I do that custom Command?

Answer 1

The cy.origin() command creates a sandbox, which prevents closures from working - you have attempted to use the custom command parameter as a closure variable inside the cy.origin().
Any variables need to be explicitly passed in as a single parameter object, like this
Cypress.Commands.add("login", (userId, password) => {
cy.origin("https://some-sso.page",
{ args: { userId, password } }, // variables passed in
({ userId, password }) => { // inside, unwrapped (destructured)
cy.wrap(userId).should("eq", "someUser"); // passes
cy.get('input[placeholder="UserID"]').type(userId);
cy.get('input[placeholder="Password"]').type(password);
cy.contains("SIGN IN").click();
}
);
});