Web app example won't run via flutter build / standalone

tech-tmpt-me commented 1 year ago

Checklist

[X] The issue can be reproduced in the auth0_flutter sample app (or N/A).
[X] I have looked into the README and have not found a suitable solution or answer.
[X] I have looked into the API documentation and have not found a suitable solution or answer.
[X] I have searched the issues and have not found a suitable solution or answer.
[X] I have searched the Auth0 Community forums and have not found a suitable solution or answer.
[X] I agree to the terms within the Auth0 Code of Conduct.

Description

The example for Auth0 login via a Flutter Web App works when using flutter run but it does not work in a standalone build (flutter build web).

Steps to reproduce below.

Replacing the relative auth0 module refs in pubspec.yaml with 1.2.0-beta.0 yields the same result.

(Filing this on guidance of Konrad, see: https://community.auth0.com/t/web-support-for-flutter-sdk-now-in-beta/105238/4)

Reproduction

Run flutter build web in the auth0_flutter/example directory
cd build/web
python -m http.server 3000 (or any other static web server pointed at this domain)

The app will load, however the Web Auth Login button does not have any effect, and entering a username / password yields the following error in the JS console:

Uncaught MissingPluginException(No implementation found for method auth#login on channel auth0.com/auth0_flutter/auth)

auth0_flutter version

1.2.0-beta.0

Flutter version

3.7.12

Platform

Android, iOS

Platform version(s)

Platform is actually Web, selection not available

mhardorf commented 1 year ago

I have the exact same issue, running the example in release mode is not working. I have tried on two different environments (Mac and Windows) and same result.

Running flutter run -d chrome --web-port 3000 works perfectly fine and I get redirected to the Auth0 Universal Login when clicking the "Web Auth Login" button.

Reproduction But running flutter run --release -d chrome --web-port 3000 the app will load, however the "Web Auth Login" button does not have any effect. And there are no errors in the browser console.

stevehobbsdev commented 1 year ago

Thanks for the feedback both 👍🏻 I've added it to the list of things to investigate before final release.

ChristopherBaldwin commented 1 year ago

Adding on to raise the interest level. I'm seeing the same behavior. Works with debug builds but fails on call to Auth0Web in release builds.

vsomayaji commented 1 year ago

Any update on this one? We're running into the same issue with 1.2.0-beta.0. When running locally in debug mode, both loginWithPopup and loginWithRedirect work fine; however, when running in either profile or release mode, both fail. loginWithPopup results in a JavaScript error (type 'JSNull' is not a subtype of type 'Credentials0') and loginWithRedirect does nothing.

Maybe something to do with tree shaking? 🤷🏾

stevehobbsdev commented 1 year ago

@vsomayaji Definitely looks like something to do with aggressive optimization, any code after a call to AuthParamsExtension.prepare appear to be "optimized" out. I haven't gotten to the exact cause of the issue yet but inlining that extension works for now, fixed in #260

matecode commented 1 year ago

Hello @stevehobbsdev

Im Sorry I cannot confirm the fix is working.

I referenced the beta branch (after the fix/web_build branch was merged while i was testing)

auth0_flutter:
    git:
      url: https://github.com/auth0/auth0-flutter.git
      path: auth0_flutter
      ref: beta

using the loginWithPopup method

  Future<UserInfo> login() async {
    final popup = window.open('', '', 'width=400,height=800');
    try {
      final credentials = await auth0Web.loginWithPopup(
        audience: Config.auth0Audience,
        popupWindow: popup,
      );
      return UserInfo(displayName: credentials.user.name ?? 'unknown');
    } on Exception catch (e) {
      logger.error("-------- catched a ${e.runtimeType} ------", e);
      if (e is WebException) {
        logger.error(e.message);
        logger.error(e.details);
        logger.error(e.code);
      }

      popup.close();
      rethrow;
    }
  }

i can catch a WebException but with no information: e.message is null e.details is empty e.code is also null

stevehobbsdev commented 1 year ago

Thanks @matecode, taking a look now.

stevehobbsdev commented 1 year ago

@matecode can you confirm that it works as intended if you remove the custom popup window?

i.e.:

final credentials = await auth0Web.loginWithPopup(
  audience: Config.auth0Audience
);

matecode commented 1 year ago

@stevehobbsdev I can confirm that the popup is working then. But not the login itself. After successful login i get a WebException again, this time the details have some content:

{__js_helper$_message: _this.get$scope is not a function, _method: get$scope, _receiver: null, $thrownJsError: TypeError: _this.get$scope is not a function}

details and code is null

stevehobbsdev commented 1 year ago

@matecode I've just pushed https://github.com/auth0/auth0-flutter/compare/beta.../fix/popup, could you try this branch and see if it fixes it? (It did for me locally).

Do you have a specific use case for using a custom popup window or will the built-in window that's created by the SDK suffice?

matecode commented 1 year ago

@stevehobbsdev Hooray 🚀 Its working. Thanks for the great support.

I thought it could be a clever idea to have custom popup for two reasons:

close the popup on any error that could happen and give the user proper feedback in the way the app does it for other errors
resize the popup to support the final login layout (which i don't know at moment because this happens centralized for our company with another team for a lot of other products)

if it is not possible now it's fine for our MVP, but it would be great if you could have a marker on this topic in future release. As our company with five million customers is maybe a larger auth0 customer i think i must integrate the sdk on more flutter projects in the future. Therefor i'm very happy and thankful that you are working on the flutter web part.

If I can help and support in any other way let me know 🦄 🎉

stevehobbsdev commented 1 year ago

Thanks for testing it and reporting the issue! I'm not sure what we'll do about custom popup windows yet in light of this. We use Auth0 SPA SDK and it appears the window that is created by the Dart JS interop doesn't have the right expected shape when it's minified; I'll have to do some further testing on it and consult with the team.

mhardorf commented 1 year ago

@stevehobbsdev thanks for looking into this. Will you deploy a new beta version to https://pub.dev/ ?

stevehobbsdev commented 1 year ago

Going through releasing now :)

stevehobbsdev commented 1 year ago

We've released v1.2.0-beta.1 which includes the fixes described here, please try it out and let us have any feedback! 👍🏻

stevehobbsdev commented 1 year ago

This has now come out of beta and released in v1.2.0, where this issue should now be resolved.

Will close for now but if you have any feedback on this, please feel free to raise a new issue 👍🏻

auth0 / auth0-flutter