Cypress VS microsoft-authentication-library-for-js

In this blog post, we'll explore a Cypress test that replicates this scenario, utilizing the powerful intercept command to manipulate network requests and responses.

Recently I came across this issue while triaging some issues at Cypress. (Shout out to MattiaMalandrone for creating an issue with clear instructions for how to reproduce). After quickly replicating the issue I sought after a solution which ultimately inspired me to write this article.

While similar to Puppeteer, Cypress, and Selenium, there are some differences. Let’s find out what they are.

This questions was asked a while ago and pretty much went unanswered: https://github.com/cypress-io/cypress/issues/23677. If it doesn't work with libraries yet I will stop battling with it for now. If it doesn't work, what are you using to test libraries?

Cypress Release Notes

You can use the sample provided at https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-node-samples and integrate it in hooks.server.ts.

I'm utilizing the Authorization Code sample provided in the MSAL Node.js library (https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-node-samples/auth-code), with the only modification being the addition of the aforementioned scope to my configuration. Below, I've shared the relevant segment of my customConfig.json and the primary code snippet where the error surfaces.

As the backend handles the token acquisition, no other code or library, such as MSAL.js, is required in the single-page application itself. This also means that no tokens are required to be stored in the browser session or local storage. By encrypting and storing the access token in an HttpOnly cookie protects it from XSS attacks, and scoping it to the API domain and setting SameSite=strict ensures that the cookie is automatically sent with all proxied API first-party requests. More on SameSite cookies can be read here.

The easiest way to secure Angular apps with the Microsoft Identity Platform is by using the MSAL (Microsoft Authentication Library) Angular package. This package contains Angular-specific building blocks for implementing MSAL in your app.

For example: https://github.com/AzureAD/microsoft-authentication-library-for-js

I was imagining something like this, and since you’ve got it on the frontend already just throwing the token to the backend and letting it validate the token https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/node-token-validation-samples/basic-sample

I did an azure ad implementation recently(laravel / SPA). I used the offical msal.js library (https://github.com/AzureAD/microsoft-authentication-library-for-js) to present the azure ad login screen. After successful login, I take the received azure ad access token and send it to my laravel based api. there, I verify the token and if valid and the user exists in the app, I create an access token for my apis and return it to the spa. The spa then uses this token for further requests, until the lifetime of the token expires. Hope that helps a bit, feel free to ask for details :)