TypeError: generateLogin is not a function

[t6tv8e]

When following the README, Cypress@13.1.0 throws a TypeError.

Your configFile is invalid: /Users/.../.../cypress.config.ts

My cypress.config.ts:

import generateLogin from "@intility/cypress-msal";

let publicClientConfig = {
  auth: {
    clientId: "***",
    authority: "https://login.microsoftonline.com/***",
  },
};

let requests = [
  {
    scopes: ["User.Read"],
  },
];

let login = generateLogin(publicClientConfig, requests);

export default defineConfig({
  reporter: "junit",

  reporterOptions: {
    mochaFile: "reports/cypress.xml",
    toConsole: true,
  },

  component: {
    devServer: {
      framework: "react",
      bundler: "vite",
    },
  },

  e2e: {
    baseUrl: "https://localhost:3000",
    setupNodeEvents(on, config) {
      // `on` is used to hook into various events Cypress emits
      on("task", {
        // register a task named login which calls the generated login from @intility/cypress-msal
        login,
      });
    },
  },
});

[t6tv8e]

...

[h3rmanj]

Hi! This fell through the cracks, sorry. We did some work back in February to ensure this package worked with cypress v10. I'm surprised seeing it at v13 already, and we haven't kept up internally. I will try to see if I can find some time to debug this, but I can't promise anything.

I'm also not sure if this works with the newest versions of @azure/msal-browser, as it relies on some internal stuff that might have changed.

In the meantime if you want to debug further yourself you could try to copy the two files from src/ into your project and see if you get some more info on why it doesn't work.

[h3rmanj]

I just ran into this myself actually. Some weirdness going on with the modules/commonjs and import/require. I had to import it like this to resolve it:

import generateLoginRaw from '@intility/cypress-msal'
import keyVaultCacheRaw from '@intility/msal-keyvault-cache'

const generateLogin =
  'default' in generateLoginRaw &&
  typeof generateLoginRaw?.default === 'function'
    ? generateLoginRaw.default
    : generateLoginRaw

const keyVaultCache =
  'default' in keyVaultCacheRaw &&
  typeof keyVaultCacheRaw?.default === 'function'
    ? keyVaultCacheRaw.default
    : keyVaultCacheRaw

Next time I update this package, I think I will change it to output es modules instead of commonjs. Although that will be a breaking change and I'm not sure when I'll have time to do that.

[chriseugenerodriguez]

This doesn't work for me.

const login =
> 19 |   'default' in generateLoginRaw &&
     |             ^
  20 |   typeof generateLoginRaw?.default === 'function'
  21 |     ? generateLoginRaw.default
  22 |     : generateLoginRaw;
  23 |   

TypeError: Cannot use 'in' operator to search for 'default' in undefined

[dtvn-dung-nguyen]

This doesn't work for me.

const login =
> 19 |   'default' in generateLoginRaw &&
     |             ^
  20 |   typeof generateLoginRaw?.default === 'function'
  21 |     ? generateLoginRaw.default
  22 |     : generateLoginRaw;
  23 |   

TypeError: Cannot use 'in' operator to search for 'default' in undefined

I got same problem , help me pls . I'm gonna be lay-off

[chriseugenerodriguez]

I decided not to use the library but create a test user in AD, and follow the cypress doc about Azure login.

https://docs.cypress.io/guides/end-to-end-testing/azure-active-directory-authentication

create a test user in AD, and use that as credentials.

[dtvn-dung-nguyen]

I decided not to use library but create test user in AD, and just follow cypress doc about azure login.

Do you have solution yet ?

[dtvn-dung-nguyen]

i did this way but it not solve my problem in project

[h3rmanj]

Since there is an official guide, I'm considering deprecating this package, as we've moved away from cypress. There might be cases with conditional access that wouldn't work though. Those would still would need ROPC flow, or then more preferably, Device Code flow, which this library has been aimed at.

Since I'm not actively in-the-loop of how the newest cypress works, I'd gladly take some help getting this to support the current version(s), if anyone is in need of this. The flow of the package itself is pretty straight forward:

• Login in a node env with @azure/msal-node
• Extract the cache
• Inject the cache in the session or local storage

But how to do each step with cypress seem to change every other week.

They have a sample with ROPC flow and Playwright for reference in the msal repo https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/samples/msal-browser-samples/TestingSample/test/browser-test.spec.ts