Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Flutter Web is not supported #16

Closed
crimsonsuv opened this issue Feb 24, 2020 · 10 comments
Closed

Flutter Web is not supported #16

crimsonsuv opened this issue Feb 24, 2020 · 10 comments
Labels
good first issue Good for newcomers help wanted Extra attention is needed

Comments

@crimsonsuv
Copy link

Hello, As you have mentioned in your plugin that web is supported but when I tried using the login in the web it is not working at all, kindly let me know is there any special steps which I need to follow to make it work on the web ?
@LinusU
Copy link
Owner

LinusU commented Apr 13, 2020

The Web Platform is not currently supported, and I don't currently know of any way to register & capture a callback scheme that would work. Do you know how that could be implemented?

@LinusU LinusU added the help wanted Extra attention is needed label Apr 13, 2020
@eldadfux
Copy link

I am just starting out with Flutter, and haven't even tried working with it for web at all yet. But usually on the web, an authentication flow would just simply redirect your browser window to the authentication URL on the 3rd-part website with some parameters.

The 3rd-party link will be responsible to redirect back to your website with some additional parameters (for ex: an access token) or some cookies.

Wouldn't a simple window.location = 'https://...'; do the job?

@LinusU
Copy link
Owner

LinusU commented Apr 14, 2020

@eldadfux since the current API of this module is await FlutterWebAuth.authenticate(...), if we redirect away from the page whatever is listening to the Future will be canceled. In fact, most likely the entire state of your app will reset since you will basically be starting it again.

In another product that I'm working on we have solved this by presenting an iframe on the Web Platform, which does the authentication flow and then redirects to a page that calls parent.postMessage. This works great, but requires you to host a small html-file somewhere.

@fvisticot
Copy link

@eldadfux since the current API of this module is await FlutterWebAuth.authenticate(...), if we redirect away from the page whatever is listening to the Future will be canceled. In fact, most likely the entire state of your app will reset since you will basically be starting it again.

In another product that I'm working on we have solved this by presenting an iframe on the Web Platform, which does the authentication flow and then redirects to a page that calls parent.postMessage. This works great, but requires you to host a small html-file somewhere.

Can you please share a sample code, would be very useful !

@LinusU
Copy link
Owner

LinusU commented May 2, 2020

Host a small html file containing something like this:

<html>
<script>
window.parent.postMessage('redirect-completed', '*')
</script>

Say that this is hosted on e.g. https://example.com/post-message.html.

Then in your app:

  1. setup a listener on the window message event (haven't used Flutter Web, here is how to do it in JavaScript/React, should be similar in Dart)
  useEffect(() => {
    const listener = (ev: MessageEvent): void => {
      if (ev.data !== 'redirect-completed') return
      // The redirect is completed!
    }

    window.addEventListener('message', listener)

    return () => window.removeEventListener('message', listener)
  }, [])
  1. show an iframe pointing to the remote url, and set https://example.com/post-message.html as the redirect url.

If you need any data from the server just send it in the message that you are posting.

@eldadfux eldadfux mentioned this issue May 22, 2020
Closed
@creativecreatorormaybenot
Copy link

You can just use a popup 🙃

@LinusU LinusU added the good first issue Good for newcomers label Sep 28, 2020
@Ionys320
Copy link

Would also be great if we were able to use it on Windows ^^

@creativecreatorormaybenot
Copy link

@Ionys320 I suggest creating a new issue for that since tracking web progress is not related to tracking Windows progress.

czepiec added a commit to czepiec/flutter_web_auth that referenced this issue May 25, 2021
@czepiec
💥 Add Web support (LinusU#16)
d358adf
czepiec added a commit to czepiec/flutter_web_auth that referenced this issue May 25, 2021
@czepiec
💥 Add Web support (LinusU#16)
1988697
czepiec added a commit to czepiec/flutter_web_auth that referenced this issue May 25, 2021
@czepiec
💥 Add Web support (LinusU#16)
925616e
czepiec added a commit to czepiec/flutter_web_auth that referenced this issue May 25, 2021
@czepiec
💥 Add Web support (LinusU#16)
14d1ba0
@czepiec czepiec mentioned this issue May 25, 2021
Merged
czepiec added a commit to czepiec/flutter_web_auth that referenced this issue May 25, 2021
@czepiec
💥 Add Web support (LinusU#16)
c8641dc
@czepiec
Copy link
Contributor

czepiec commented May 25, 2021

I needed this functionality for the Web platform, so these are my findings. I have discussed several alternatives to open authentication URL in an embedded browser (ASWebAuthenticationSession / Custom Tabs):

  • Open in IFrameElement() - very flexible but useless. Big identity providers like Google don't support iframes (by header X-Frame-Options: none).
  • Open in the same tab (and go back to the application by redirect URL) - application lost state. It's possible to use on application start (e.g. login) but unreasonable on e.g. account linking in settings.
  • Open in new tab - due to the problems mentioned above, it looks the most sensible.

When an authentication URL is opened in a new window it's necessary to capture and delivery the callback URL to the running application. I don't know if there is another option than insert into the project's web folder some script to do that. There are several options to transfer data between tabs, localStorage, BroadcastChannel and probably the easiest postMessage mentioned above. So simple HTML file:

<!DOCTYPE html>
<title>Authentication complete</title>
<p>Authentication is complete. If this does not happen automatically, please
close the window.
<script>
  window.opener.postMessage({
    'flutter-web-auth': window.location.href
  }, window.location.origin);
  window.close();
</script>

Can send URL and with Dart code:

await for (MessageEvent messageEvent in window.onMessage) {
  final message = messageEvent.data['flutter-web-auth'];
  if (messageEvent.origin == Uri.base.origin && message is String) {
    return message;
  }
}

It can be safely received.

I processed it all as a Flutter Web Plugin and sent it as a #77, so I will be happy for the feedback and merge.

czepiec added a commit to czepiec/flutter_web_auth that referenced this issue Aug 9, 2021
@czepiec
💥 Add Web support (LinusU#16)
d233d81
czepiec added a commit to czepiec/flutter_web_auth that referenced this issue Oct 14, 2021
@czepiec
💥 Add Web support (LinusU#16)
609298d
czepiec added a commit to czepiec/flutter_web_auth that referenced this issue Oct 14, 2021
@czepiec
💥 Add Web support (LinusU#16)
b652e69
czepiec added a commit to czepiec/flutter_web_auth that referenced this issue Oct 16, 2021
@czepiec
💥 Add Web support (LinusU#16)
7449441
@LinusU LinusU closed this as completed in 1de8864 Dec 11, 2021
@emporioreale
Copy link

it doesn't work the function will never end.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
good first issue Good for newcomers help wanted Extra attention is needed
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
8 participants
@fvisticot @LinusU @eldadfux @Ionys320 @crimsonsuv @czepiec @creativecreatorormaybenot @emporioreale