UI testing using Cypress with authentication to Azure AD using ADFS

Question

These are my notes for how to UI test an Azure AD single page app using MSAL.js and ADFS (in our case on-premise) and the schema associated with the process of token creation and local storage.

From the tutorial: "It uses the ROPC authentication flow to acquire tokens for a test user account, and injects them into browser local storage before running the tests. This way MSAL.js does not attempt to acquire tokens as it already has them in cache."

After watching the awesome video here: https://www.youtube.com/watch?v=OZh5RmCztrU

...and going through the repo here: https://github.com/juunas11/AzureAdUiTestAutomation

I was stuck trying to match my use of on-premise ADFS with MSAL.js 2.0 and session store, with that of the above tutorial and code. So if you are using the link to Azure ending with /adfs/oauth2/token ( as opposed to oAuth /oauth2/v2.0/token ) - then follow the below!!

MOST of the changes I made were from auth.js: https://github.com/juunas11/AzureAdUiTestAutomation/blob/main/UiTestAutomation.Cypress/cypress/support/auth.js

Simply follow the tutorial and copy in that content, then change the following:

const environment = ''; (mine was corporate domain NOT login.windows.net)
for the Account entity (const buildAccountEntity) use:
authorityType: 'ADFS', ...and REMOVE the line: clientInfo: "",
for the Access Token entity: (const buildAccessTokenEntity): ...ADD the line: tokenType: 'bearer',
ADD a new function for the Refresh Token (new) entity:

    const buildRefreshTokenEntity = (homeAccountId: string, accessToken: string) => {
        return {
            clientId,
            credentialType: 'RefreshToken',
            environment,
            homeAccountId,
            secret: accessToken,
        };
    };

next I had to MATCH my sessionStorage TOKEN by running it locally using VS Code and logging in then reverse-engineering the required KEY-VALUE pairs for what was stored (results are in next code block!).
Specifically I kept case-sensitivity for 'home account', I blanked-out some values, and had to add in the RefreshToken part, and mine used Session Storage (not local storage), and match the extended expires with the same value (based on my sample run through only):

const injectTokens = (tokenResponse: any) => {
    const scopes = ['profile', 'openid'];
    const idToken: JwtPayload = decode(tokenResponse.id_token) as JwtPayload;
    const localAccountId = idToken.sub; // in /oauth2/v2.0/token this would be: idToken.oid || idToken.sid;  however we are using /adfs/oauth2/token
    const realm = ''; // in /oauth2/v2.0/token this would be: idToken.tid;  however we are using /adfs/oauth2/token
    const homeAccountId = `${localAccountId}`; // .${realm}`;
    const homeAccountIdLowerCase = `${localAccountId}`.toLowerCase(); // .${realm}`;
    const usernameFromToken = idToken.upn; // in /oauth2/v2.0/token this would be: idToken.preferred_username;  however we are using /adfs/oauth2/token
    const name = ''; // in /oauth2/v2.0/token this would be: idToken.name;  however we are using /adfs/oauth2/token
    const idTokenClaims = JSON.stringify(idToken);

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

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

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

    const refreshTokenKey = `${homeAccountIdLowerCase}-${environment}-refreshtoken-${clientId}-${realm}`;
    const refreshTokenEntity = buildRefreshTokenEntity(homeAccountId, tokenResponse.access_token);

    // localStorage was not working, needs to be in sessionStorage
    sessionStorage.setItem(accountKey, JSON.stringify(accountEntity));
    sessionStorage.setItem(idTokenKey, JSON.stringify(idTokenEntity));
    sessionStorage.setItem(accessTokenKey, JSON.stringify(accessTokenEntity));
    sessionStorage.setItem(refreshTokenKey, JSON.stringify(refreshTokenEntity));
};

Lastly, in the login function I used the /adfs link as we use on-premise ADFS and MSAL.js v2.0 and did NOT need that client_secret:

export const login = (cachedTokenResponse: any) => {
    let tokenResponse: any = null;
    let chainable: Cypress.Chainable = cy.visit('/'); // need to visit root to be able to store Storage against this site

    if (!cachedTokenResponse) {
        chainable = chainable.request({
            url: authority + '/adfs/oauth2/token', // was this '/oauth2/v2.0/token',
            method: 'POST',
            body: {
                grant_type: 'password',
                client_id: clientId,
                // client_secret: clientSecret,
                scope: ['profile openid'].concat(apiScopes).join(' '),
                username,
                password,
            },
            form: true,
        });
***... MORE CODE OMITTED***

finally I ran using VSCode terminal 1 (yarn start) then terminal 2 (yarn run cypress open)

TYPESCRIPT use:

rename all files from .js to .ts
update tsconfig to include the cypress type on this line:

"types": ["node", "cypress"],

Now when I run Cypress I can navigate around my site and I am authenticated!! Hope this helped you save an hour or two!!

UI testing using Cypress with authentication to Azure AD using ADFS

0 Answers0