Francessco121 / msal-js-dart

A Dart wrapper for the "Microsoft Authentication Library for JavaScript (MSAL.js)".
https://pub.dev/packages/msal_js
MIT License
14 stars 9 forks source link

Flutter Web #7

Closed Jeremywhiteley closed 4 years ago

Jeremywhiteley commented 4 years ago

Have you gotten this to work with flutter web yet?

Francessco121 commented 4 years ago

I don't believe anyone has tested Flutter support yet, but this package doesn't use any special APIs or have any additional dependencies. Personally, I don't have any experience with Flutter for web yet, but if Flutter works fine with packages that use dart:js and dart:js_util it should be fine.

That said, since Flutter's web support is almost stable, I'll definitely be looking into verifying that it's compatible and create an example for it.

Francessco121 commented 4 years ago

I've had a chance to test this recently, and I can confirm that this library works just fine with Flutter without any modifications. I used this package to add web support to an existing Flutter mobile app also using MSAL.

The only concern I have is getting msal.js itself into the build as, at least with the version of Flutter I'm using, only index.html in the web directory is copied into the build. Supposedly, this was fixed in https://github.com/flutter/flutter/pull/48316 but I'm not sure when that's going to be on the beta or stable branch. Regardless, those files could be copied manually post-build anyway.

If you have any issues with this yourself, feel free to open an issue. :)

Jeremywhiteley commented 4 years ago

I've had a chance to test this recently, and I can confirm that this library works just fine with Flutter without any modifications. I used this package to add web support to an existing Flutter mobile app also using MSAL.

The only concern I have is getting msal.js itself into the build as, at least with the version of Flutter I'm using, only index.html in the web directory is copied into the build. Supposedly, this was fixed in flutter/flutter#48316 but I'm not sure when that's going to be on the beta or stable branch. Regardless, those files could be copied manually post-build anyway.

If you have any issues with this yourself, feel free to open an issue. :)

Do you have any sample code you can share of it working with Flutter Web and Mobile? I would greatly appreciate it. I do have some budget to pay for a sample as well.

Francessco121 commented 4 years ago

@Jeremywhiteley I don't have any sample code that I can share currently, but I plan on adding an example with the next release. Please keep in mind however, this library will not work with Flutter on a mobile platform. You would need to swap it out with a Android/iOS Flutter MSAL library such as package:msal_flutter using conditional import/exports (assuming you wanted to support web and mobile in the same app, the conditional import/exports will let one of the MSAL packages and your code using them get tree-shaken at build-time and effectively remove it from the final build).

Francessco121 commented 4 years ago

@Jeremywhiteley If you're still interested, I've created an official example here: https://github.com/milestonetg/msal-js-dart/blob/master/example/flutter_web_example.md

Jeremywhiteley commented 4 years ago

@Francessco121 Thank you! I will check it out this week! I am very excited!

SuperKMan commented 3 years ago

Hi, @Francessco121 I got an error "Cannot read property 'Logger' of undefined" when I ran code from https://github.com/milestonetg/msal-js-dart/blob/master/example/flutter_web_example.md. What was I missed? Could you please suggest me?

TypeError: Cannot read property 'Logger' of undefined at Function.new (http://localhost:57114/packages/msal_js/msal_js.dart.lib.js:776:70) at main$ (http://localhost:57114/packages/student_loan/main.dart.lib.js:616:36) at main (http://localhost:57114/web_entrypoint.dart.lib.js:43:29) at main.next () at http://localhost:57114/dart_sdk.js:37209:33 at _RootZone.runUnary (http://localhost:57114/dart_sdk.js:37080:59) at _FutureListener.thenAwait.handleValue (http://localhost:57114/dart_sdk.js:32336:29) at handleValueCallback (http://localhost:57114/dart_sdk.js:32863:49) at Function._propagateToListeners (http://localhost:57114/dart_sdk.js:32901:17) at _Future.new.[_completeWithValue] (http://localhost:57114/dart_sdk.js:32749:23) at http://localhost:57114/dart_sdk.js:32000:46 at _RootZone.runUnary (http://localhost:57114/dart_sdk.js:37080:59) at _FutureListener.then.handleValue (http://localhost:57114/dart_sdk.js:32336:29) at handleValueCallback (http://localhost:57114/dart_sdk.js:32863:49) at Function._propagateToListeners (http://localhost:57114/dart_sdk.js:32901:17) at _Future.new.[_completeWithValue] (http://localhost:57114/dart_sdk.js:32749:23) at async._AsyncCallbackEntry.new.callback (http://localhost:57114/dart_sdk.js:32770:35) at Object._microtaskLoop (http://localhost:57114/dart_sdk.js:37332:13) at _startMicrotaskLoop (http://localhost:57114/dart_sdk.js:37338:13) at http://localhost:57114/dart_sdk.js:33109:9

Francessco121 commented 3 years ago

@SuperKMan You're probably not linking MSAL.js in your HTML page. Also, please open a new issue if you're having trouble, this issue here has been closed for almost a year and is not a good place to discuss your problem.

SuperKMan commented 3 years ago

@Francessco121 Thank you! I will open new issue.