Chaining multiple API calls results in async/sync mix error

When chaining API calls in a cypress custom command, I am getting an error that says async/sync code is being mixed:

Desired behavior

This example only shows 2 API calls, but the end solution is going to require 3. I need to make 1 API call to return a token, another to get a user id, and then use both those returned values in a POST:

Steps to reproduce: (app code and test code)

I want to return the authID from the response, and then use it in then(authToken=>)

Cypress.Commands.add("ResetPwd", () => {
    return cy.request({
        method: 'POST',
        url: "https://example//token",
        headers: {
            'Content-Type': 'application/json',
        },
        body: {
            client_id: '1234',
            client_secret: '4321',
            audience: 'https://example.com/api/v2/',
            grant_type: 'credentials'
        }
    }).then(response => {
        const rbody = (response.body);
        var tokenPattern = "(?i)\"access_token\":\\s*\"([^\"]*)\"";
        const authToken = rbody.access_token;
        cy.log(authToken);
        return authToken
    }).then(authToken =>{
        cy.request({
            method: 'PATCH',
            url: "https://example.com/api/v2/users/33",
            headers: {
                'Content-Type': 'application/json',
                'authorization': 'Bearer '+authToken
            },
            body: {
                password: 'Test4321',
                connection: 'UserDB'
            },
        })
    })
});

When running this command, I get an error that says

CypressError: cy.then() failed because you are mixing up async and sync code.

In your callback function you invoked 1 or more cy commands but then returned a synchronous value.

[OACDesigns]

I also encountered a similar issue recently as well. I had to remove the cy.log() call from the chain to resolve it.

Edit: I’ve replaced my cy.log with Cypress.log() instead. This is working well for me.

[valoricDe]

Cypress is using a command queue, so regardless of what you are returning the last command result will be handed over to the next then call. Therefore if you want to return like a token and a userId you need to wrap your synchronous result in a cy.wrap({authToken, userId}). If you also want to make Typescript happy you need to change the return type of the then method to be as unknown as Chainable<{authToken: string, userId: number}>