Earlybyte / aad_oauth

Flutter Azure Active Directory OAuth Package
https://pub.dev/packages/aad_oauth
MIT License
93 stars 183 forks source link

Usage with new web app initialization #335

Open michasng opened 3 weeks ago

michasng commented 3 weeks ago

Flutter 3.22 deprecated and replaced the old web app initialization. Web initialization of this package is no longer compatible.

Instead of this:

<html>
  <head>
    <!-- ... -->
    <script src="flutter.js" defer></script>
  </head>
  <body>
    <script>
      window.addEventListener('load', function (ev) {
        // Download main.dart.js
        _flutter.loader.loadEntrypoint({
          serviceWorker: {
            serviceWorkerVersion: serviceWorkerVersion,
          },
          onEntrypointLoaded: async function(engineInitializer) {
            // Initialize the Flutter engine
            let appRunner = await engineInitializer.initializeEngine();
            // Run the app
            await appRunner.runApp();
          }
        });
      });
    </script>
  </body>
</html>

from https://docs.flutter.dev/platform-integration/web/initialization-legacy.

One should now use:

<html>
  <body>
    <script src="flutter_bootstrap.js" async></script>
  </body>
</html>

from https://docs.flutter.dev/platform-integration/web/initialization.

However, the new initialization method fails when I add the steps to initialize this package:

<head>
  <script type="text/javascript" src="https://alcdn.msauth.net/browser/2.13.1/js/msal-browser.min.js"
    integrity="sha384-2Vr9MyareT7qv+wLp1zBt78ZWB4aljfCTMUrml3/cxm0W81ahmDOC6uyNmmn0Vrc"
    crossorigin="anonymous"></script>
  <script src="assets/packages/aad_oauth/assets/msalv2.js"></script>
</head>

Including the snipped causes an exception in the browser, like:

Uncaught TypeError: Cannot read properties of undefined (reading 'SharedPreferencesAsyncPlatform')
    at load__packages__shared_preferences_web__shared_preferences_web_dart (shared_preferences_web.dart:26:37)
    at Object.execCb (require.js:1696:33)
    at Module.check (require.js:883:51)
    at Module.<anonymous> (require.js:1139:34)
    at require.js:134:23
    at require.js:1189:21
    at each (require.js:59:31)
    at Module.emit (require.js:1188:17)
    at Module.check (require.js:938:30)
    at Module.<anonymous> (require.js:1139:34)
    at require.js:134:23
    at require.js:1189:21
    at each (require.js:59:31)
    at Module.emit (require.js:1188:17)
    at Module.check (require.js:938:30)
    at Module.<anonymous> (require.js:1139:34)
    at require.js:134:23
    at require.js:1189:21
    at each (require.js:59:31)
    at Module.emit (require.js:1188:17)
    at Module.check (require.js:938:30)
    at Module.<anonymous> (require.js:1139:34)
    at require.js:134:23
    at require.js:1189:21
    at each (require.js:59:31)
    at Module.emit (require.js:1188:17)
    at Module.check (require.js:938:30)
    at Module.<anonymous> (require.js:1139:34)
    at require.js:134:23
    at require.js:1189:21
    at each (require.js:59:31)
    at Module.emit (require.js:1188:17)
    at Module.check (require.js:938:30)
    at Module.<anonymous> (require.js:1139:34)
    at require.js:134:23
    at require.js:1189:21
    at each (require.js:59:31)
    at Module.emit (require.js:1188:17)
    at Module.check (require.js:938:30)
    at Module.enable (require.js:1176:22)
    at Module.init (require.js:788:26)
    at callGetModule (require.js:1203:63)
    at Object.completeLoad (require.js:1590:21)
    at HTMLScriptElement.onScriptLoad (require.js:1717:29)

I believe this is a critical issue, because once the deprecated loadEntrypoint is removed, this package will no longer be compatible with the web.

michasng commented 3 weeks ago

Though this might also be an issue inside flutter 3.24.0: https://github.com/flutter/flutter/issues/153222. I will verify once flutter >= 3.24.1 has been released.