Outlook SSO NAA in pure JS without node.js

Outlook on Windows only uses the runtime JS file defined in the manifest for event-based add-ins. How do you import and use msal-browser in this file without using node.js?

I am aware that import is not allowed on Outlook on Windows for event based files, so i guess it is all about bundling - but is there is simpler, more straight-forward alternative to npm/node.js? Or maybe even a way without bundling at all?

I tried to use the import function, but that is prohibited for event-based add-ins on Outlook for Windows.

I also failed on using fetch and eval(), but I did not follow up on this as it seems to me that there must be an easier way to use msal-browser for SSO with NAA.

I also failed on using fetch and eval()

Outlook for Desktop Classic (not the new one) requires a special permissions file to allow CORS. https://learn.microsoft.com/en-us/office/dev/add-ins/outlook/use-sso-in-event-based-activation I have a pending documentation PR for this link to make it more clear on where this file goes.

Basically, in your Outlook Add-in project you need a folder called .well-known with a file called microsoft-officeaddins-allowed.json and it needs the required array populated as shown in the link example. Outlook Classic Desktop will look at this file by convention.

I am aware that import is not allowed on Outlook on Windows for event based files, so i guess it is all about bundling

Yes, that's correct. I wouldn't even bother hand coding for this environment as it's too limited and requires too much verbose code writing. Better to write it in TypesScript and let webpack bundle it to IE 11 standards.

In my webpack I have an entry defined like this:

"smart-alerts/autorun-outlook-classic": [
    "core-js/stable",
    "regenerator-runtime/runtime",
    "./src/smart-alerts/autorun-outlook-classic.ts",
  ],

and then a rule defined like so

 {
      test: /\.(ts|js)$/,
      include: [path.resolve(__dirname, "src/smart-alerts")],
      use: {
        loader: "babel-loader",
        options: {
          presets: [
            [
              "@babel/preset-env",
              {
                targets: {
                  ie: "11",
                },
                useBuiltIns: "entry",
                corejs: "3",
              },
            ],
            "@babel/preset-typescript",
          ],
        },
      },
      exclude: /node_modules/,
    },

Using this approach in my smart-alerts src folder I have a ton of TypeScript files with various utility functions and I import them into the autorun-outlook-classic.ts file and webpack takes care of abstracting away async/await keywords among other things. Works beautifully.