Successfully implemented the code to login using a username and password combination with Cypress for a webapp integrated with MSAL.

In the end-to-end Testfile:

describe('Login with MSAL as xxUsername', () => {
beforeEach(() => {
    cy.LoginWithMsal()
})

Command.js:

    import { login } from "./auth";
    let cachedTokenExpiryTime = new Date().getTime();
    let cachedTokenResponse = null;
    
    Cypress.Commands.add("LoginWithMsal", () => {
    if (cachedTokenExpiryTime <= new Date().getTime()) {
        cachedTokenResponse = null;
    }
    return login(cachedTokenResponse).then((tokenResponse) => {
        cachedTokenResponse = tokenResponse;
        cachedTokenExpiryTime = new Date().getTime() + 50 * 60 * 1000;
    });
});

Imported auth.js

/// <reference types="cypress" />

import { decode } from "jsonwebtoken";
import authSettings from "./authsettings.json";

const {
    authority,
    clientId,
    clientSecret,
    apiScopes,
    username,
    password,
} = authSettings;
const environment = "login.windows.net";

const buildAccountEntity = (
    homeAccountId,
    realm,
    localAccountId,
    username,
    name
) => {
    return {
        authorityType: "MSSTS",
        // Custom base64 encoding omitted for simplicity
        clientInfo: "",
        homeAccountId,
        environment,
        realm,
        localAccountId,
        username,
        name,
    };
};

const buildIdTokenEntity = (homeAccountId, idToken, realm) => {
    return {
        credentialType: "IdToken",
        homeAccountId,
        environment,
        clientId,
        secret: idToken,
        realm,
    };
};

const buildAccessTokenEntity = (
    homeAccountId,
    accessToken,
    expiresIn,
    extExpiresIn,
    realm,
    scopes
) => {
    const now = Math.floor(Date.now() / 1000);
    return {
        homeAccountId,
        credentialType: "AccessToken",
        secret: accessToken,
        cachedAt: now.toString(),
        expiresOn: (now + expiresIn).toString(),
        extendedExpiresOn: (now + extExpiresIn).toString(),
        environment,
        clientId,
        realm,
        target: scopes.map((s) => s.toLowerCase()).join(" "),
    };
};

const injectTokens = (tokenResponse) => {
    const idToken = decode(tokenResponse.id_token);
    const localAccountId = idToken.oid || idToken.sid;
    const realm = idToken.tid;
    const homeAccountId = `${localAccountId}.${realm}`;
    const username = idToken.preferred_username;
    const name = idToken.name;

    const accountKey = `${homeAccountId}-${environment}-${realm}`;
    const accountEntity = buildAccountEntity(
        homeAccountId,
        realm,
        localAccountId,
        username,
        name
    );

    const idTokenKey = `${homeAccountId}-${environment}-idtoken-${clientId}-${realm}-`;
    const idTokenEntity = buildIdTokenEntity(
        homeAccountId,
        tokenResponse.id_token,
        realm
    );

    const accessTokenKey = `${homeAccountId}-${environment}-accesstoken-${clientId}-${realm}-${apiScopes.join(
        " "
    )}`;
    const accessTokenEntity = buildAccessTokenEntity(
        homeAccountId,
        tokenResponse.access_token,
        tokenResponse.expires_in,
        tokenResponse.ext_expires_in,
        realm,
        apiScopes
    );

    localStorage.setItem(accountKey, JSON.stringify(accountEntity));
    localStorage.setItem(idTokenKey, JSON.stringify(idTokenEntity));
    localStorage.setItem(accessTokenKey, JSON.stringify(accessTokenEntity));
};

export const login = (cachedTokenResponse) => {
    let tokenResponse = null;
    let chainable = cy.visit("https://xxxxxxxxxxxxx.nl/");

    if (!cachedTokenResponse) {
        chainable = chainable.request({
            url: authority + "/oauth2/v2.0/token",
            method: "POST",
            body: {
                grant_type: "password",
                client_id: clientId,
                client_secret: clientSecret,
                scope: ["openid profile"].concat(apiScopes).join(" "),
                username: username,
                password: password,
            },
            form: true,
        });
    } else {
        chainable = chainable.then(() => {
            return {
                body: cachedTokenResponse,
            };
        });
    }

    chainable
        .then((response) => {
            injectTokens(response.body);
            tokenResponse = response.body;
        })
        .reload()
        .then(() => {
            return tokenResponse;
        });

    return chainable;
};

Fetched credentials from authSettings.json

{
  "authority": "https://login.microsoftonline.com/x",
  "clientId": "x",
  "clientSecret": "x",
  "apiScopes": [ "x" ],
  "username": "xxUsername",
  "password": "xxPassword"
}

While successfully logging in with the stored user credentials as variables in the authSettings.json file, this limits the ability to authenticate using only one user in tests. How can I implement flexibility to log in with any other user's credentials?