[wasm] loginWithPopup is not working

[shovelmn12]

Checklist

• [x] The issue can be reproduced in the auth0_flutter sample app (or N/A).
• [x] I have looked into the Readme, Examples, and FAQ 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

When passing String params to the SDK it fails to login as String is not a JSAny.

https://github.com/auth0/auth0-flutter/blob/1fccddf82aa842942290d6562dc15c9f58193bb4/auth0_flutter/lib/src/web/js_interop_utils.dart#L30

This line should be changed to value.toJS

Also because of your defenition of params the funcationaddCustomParams<T extends JSObject>(final T obj, final Map<String, dynamic> params) should use final Map<String, String> params and not final Map<String, dynamic> params

After fixing this error loginWithPopup still did not work, I am getting error cancelled: Popup closed

I tried removing parameters and I am still getting the same error error cancelled: Popup closed

Reproduction

Pass String params to loginWithPopup and you will get an error Type 'String' is not a subtype of type 'JSValue' in type cast

if this is fixed then the next error you will get is error cancelled: Popup closed

Additional context

No response

auth0_flutter version

1.9.0

Flutter version

3.29.1

Platform

Web

Platform version(s)

wasm

[pmathew92]

Hi @shovelmn12 , Thanks for bringing this to our notice. We will take a look and address this issue

[shovelmn12]

@pmathew92 I checked the popup's console and I am getting the following:

{type: "authorization_response",response: {"error":"invalid_request","error_description":"authorization request parameter organization must be an organization id","state":"MVBMMHlvfmVSbHJBVzF1OW1icC5RZWJUUEpWWXowd0Jack1wbU5iTXJ3RQ=="}};

I am not setting any organizationId from flutter ... we dont use organizations

[shovelmn12]

@pmathew92 ok after further investigation I figured out the pop window thats opened is marked as closed on open.

popup opened 
Window {window: Window, self: Window, document: document, name: 'auth0:authorize:popup', location: Location,
blur: ƒ blur()
close: ƒ close()
closed: true,
...}

I added the following lines to .js SDK:

    if (!config.popup) {
      config.popup = openPopup('');

      console.log('popup opened', config.popup); // print popup

      if (!config.popup) {
        throw new Error(
          'Unable to open a popup for loginWithPopup - window.open returned `null`'
        );
      }
    }

https://github.com/auth0/auth0-spa-js/blob/8b1609d3b91a96dbded37039913e3c5e72a5c78c/src/Auth0Client.ts#L361

therefore I am always getting Popup closed error ...

Edit: Aha!

https://developer.mozilla.org/en-US/docs/Web/API/Window/open#same-origin_policy

https://stackoverflow.com/questions/50143828/window-closed-is-always-true

Take into account, that [window.closed](https://developer.mozilla.org/en-US/docs/Web/API/Window/closed) always returns true, if the newly opened URL isn't from the same origin / domain as it is opened from

Edit 2: Both including null values in the URL and window.closed being true are issues, couldnt figure out how to solve the window.closed when developing. I guess when I run it on the same domin it will work because of cors

[pmathew92]

Hi @shovelmn12 , for the organizationId issue you can skip passing that parameter. On the window.closed error, we did spent sometime to debug this for a proper fix. Will revert here cc @tusharpandey13

[shovelmn12]

@pmathew92 thats the thing, I am NOT passing any org... check the reference js issue (https://github.com/auth0/auth0-spa-js/issues/1349)

[shovelmn12]

@pmathew92 the funny thing is that this works when not runnin flutter in wasm ...

[tomasatisocco]

@shovelmn12 have you been able to workaround it somehow? This is the only blocker I have right now to make my Flutter web page work with was

[tomasatisocco]

Oh I see you are right @shovelmn12 it looks like it fails because of CORS because when deployed it works perfectly fine

[pmathew92]

@tomasatisocco , so lginWithPopup is working after deploying ? @shovelmn12 have you tried this ?

[shovelmn12]

@pmathew92 @tomasatisocco I need to test it before deploying you know... haha people are paying for your services ....

[tomasatisocco]

@shovelmn12 Yeah sure! that's why we have development and testing environments, so you don't have to test locally and then deploy and hope it works hahaha.

Getting back to you question @pmathew92 is yes, it works when deployed, I would need to test running locally but with https instead of localhost, I will try with NGINX and let you know

[pmathew92]

@shovelmn12 What i meant was if you tried testing by deploying on dev or testing environments as tomasatisocco mentioned to understand the behaviour . This will help us narrow down the issue much faster

[pmathew92]

@tomasatisocco , would it be possible for you to share the .har file when running it locally and when deployed ?

[pmathew92]

The 'String' is not a subtype of type 'JSValue' in type cast error has been resolved on the latest auth0-flutter release

[trevordunn]

@pmathew92 Which flutter version is that? I'm pretty sure I'm still seeing that error with the latest stable 3.29.3 release.

[pmathew92]

@trevordunn apologies for the confusion. I meant the latest auth0-flutter sdk version v1.10.0

[trevordunn]

I can confirm the 'String' is not a subtype of type 'JSValue' in type cast error is resolved in v1.10.0.

However now after I log into Google the login popup goes white and the only error I see in its dev console is Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('http://localhost:3000') does not match the recipient window's origin ('https://auth.foobar.com'). Not sure if that's related to this wasm issue or something entirely different.

[pmathew92]

@trevordunn , Don't think this is a wasm issue. Not a web dev , but from what I understand it is due to the mismatch in the target and origin window urls. Do you have the option of hosting your website on a dev environment and test ?

[tomasatisocco]

Great thank you @pmathew92

[pmathew92]

Hi ,hope this issue is fixed . Closing this for now. Feel free to reopen if you have any concerns