Flutter Web Login

[nomanmurtaza786]

Hi there, I am trying to integrate Supabase with the flutter App. I am using plugin url_strategy to remove # from the flutter URL. https://pub.dev/packages/url_strategy/

But when I get Supabase call back it starts with # so the flutter web router also removes that URL. Is there any we can get call back URL without #?

[phamhieu]

Hi @nomanmurtaza786, using fragment # is a gotrue design choice. You can read more details here

[nomanmurtaza786]

Hi @nomanmurtaza786, using fragment # is a gotrue design choice. You can read more details here

Actually, I am using flutter web, any guide to get a callback URL in flutter web?

[nomanmurtaza786]

Hi @nomanmurtaza786, using fragment # is a gotrue design choice. You can read more details here

I am getting this link https://sfasfsafas.supabase.co/auth/v1/verify?token=sfasfsafas&type=magiclink&redirect_to=http://localhost:5555/#/callback?

But this link get opened it doesn't go given callback URL

http://localhost:5555/#access_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.safsafsafsa.safsafasfasfas-ZhaRkptXQF9hi4paapSBQ4iJvg&expires_in=3600&refresh_token=afsafsafsacxascas&token_type=bearer&type=magiclink if there is any error it goes to right path

[phamhieu]

Hi @nomanmurtaza786, if you want to use a custom redirect_to for flutter web. Please replace # with the encoded value %23

http://localhost:55510/%23/webAuth

I suggest you to use default Site URL for flutter web. Check out the update example here

https://user-images.githubusercontent.com/689843/125559067-4f9fa36c-d8fc-41b1-bc6a-44a2aa4b7136.mp4

[nomanmurtaza786]

Hi @nomanmurtaza786, if you want to use a custom redirect_to for flutter web. Please replace # with the encoded value %23

http://localhost:55510/%23/webAuth

I suggest you to use default Site URL for flutter web. Check out the update example here

web-demo.mp4

Thanks, @phamhieu I will try this. but do you know how can we do the auth with popup and return back to the same screen with flutter web.

[himeshp]

+1 for flutter mobile Apps. pop up + return back,

[phamhieu]

Right now supabase-flutter doesn't support popup

[nomanmurtaza786]

Right now supabase-flutter doesn't support popup

@phamhieu i think it's more like flutter web guide rather than supabase. Open popup and go back when uri.base contain access token.

[phamhieu]

~because of security, i don't think we can do that on flutter web or event original web app.~

sorry, i misunderstand your question. Can you share more why you want to do it in a popup instead of a full page redirect?

[himeshp]

It's a better user experience at least on the flutter mobile app, it takes out all the deep linking hassle + user is already logged in e.g. Twitter, Google, FB, etc.

[nomanmurtaza786]

~because of security, i don't think we can do that on flutter web or event original web app.~

sorry, i misunderstand your question. Can you share more why you want to do it in a popup instead of a full-page redirect?

yes exactly instead, full screen can we do it in the popup and go back to the same page.

[dshukertjr]

Supporting pop up kind of like how Firebase Auth does it involves some additional development on the server side, so at the moment it cannot be supported, but it is definitely something we would want at some point.

@phamhieu Could we talk to the back end team about supporting this on gotrue? Not a must have, but would be great to have it somewhere along the line!

[himeshp]

flutter web is still evolving, the adoption is slow, but on the other hand, it would be great to see pop-up support for flutter android & iOS apps.

[nomanmurtaza786]

Supporting pop up kind of like how Firebase Auth does it involves some additional development on the server side, so at the moment it cannot be supported, but it is definitely something we would want at some point.

@phamhieu Could we talk to the back end team about supporting this on gotrue? Not a must have, but would be great to have it somewhere along the line!

@dshukertjr I think it's nothing to do with supabase it's more like a flutter web feature like I am using web view in the phone. When my url contains access token I do navigator pop and pass url back to retrieve the session. When to do same on the Web may be with dialog box it's possible.

[nomanmurtaza786]

flutter web is still evolving, the adoption is slow, but on the other hand, it would be great to see pop-up support for flutter android & iOS apps.

@himeshp Pop kind of thing is already happening in the phone. With webview here is code. I don't know how flutter web popup work because thing package don't support web.

Expanded(
                  child: InAppWebView(
                    initialUrlRequest: URLRequest(url: Uri.parse("https://12345supaaaaedfdsfds.supabase.co/auth/v1/authorize?provider=google")),
                    initialOptions: InAppWebViewGroupOptions(
                      crossPlatform: InAppWebViewOptions(
                          supportZoom: true,
                          userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:61.0) Gecko/20100101 Firefox/61.0"
                      ),
                    ),
                    onWebViewCreated: (InAppWebViewController controller) {
                      webView = controller;
                    },
                    onLoadStart: (controller, url) {
                      if(isFirstTime){
                        isFirstTime = false;
                        Future.delayed(Duration(milliseconds: 2000))
                            .then((onValue) {
                          setState(() {
                            _isLoading = false;
                          });
                        });
                      }
                     print(url);
                      print(controller.getUrl());
                      print('load start');
                      if(url.toString().contains('access_token')){
                        Navigator.pop(context, url.toString());
                      }
                    },
                    onLoadStop: (controller, url) async {
                      print(url);
                      print(controller.getUrl());
                      print('load stop');
                       //}
                    },

[himeshp]

I don't think so native pop-up is supported yet for mobile apps.

also as shared by @dshukertjr you might have to wait until it's supported by the backend.

[dshukertjr]

So there seems to be two discussions about pop ups going on here:

1. pop up login on the web
2. pop up login on mobile app

In my previous post on this issue, I was talking about 2, because users are already logged into Google, Twitter, or whatever account they are using to sign in, which leads to better user experience as @himeshp described:

It's a better user experience at least on the flutter mobile app, it takes out all the deep linking hassle + user is already logged in e.g. Twitter, Google, FB, etc.

@nomanmurtaza786 you seem to want 1, but what is the reason why you prefer pop up over full page redirect?

Also, this pop idea using webview is cleaver, but the users would still have to sign on to their twitter or whatever provider they are trying to sign in with as it is not a native pop-up sign on. Also, Google does not seem to let you sign in from within a webview.

@himeshp Pop kind of thing is already happening in the phone. With webview here is code. I don't know how flutter web popup work because thing package don't support web.

[nomanmurtaza786]

So there seems to be two discussions about pop ups going on here:

1. pop up login on the web
2. pop up login on mobile app

In my previous post on this issue, I was talking about 2, because users are already logged into Google, Twitter, or whatever account they are using to sign in, which leads to better user experience as @himeshp described:

It's a better user experience at least on the flutter mobile app, it takes out all the deep linking hassle + user is already logged in e.g. Twitter, Google, FB, etc.

@nomanmurtaza786 you seem to want 1, but what is the reason why you prefer pop up over full page redirect?

Also, this pop idea using webview is cleaver, but the users would still have to sign on to their twitter or whatever provider they are trying to sign in with as it is not a native pop-up sign on. Also, Google does not seem to let you sign in from within a webview.

@himeshp Pop kind of thing is already happening in the phone. With webview here is code. I don't know how flutter web popup work because thing package doesn't support web.

I want to send the user back to the same screen, I think I can pass the current page URL as a redirection parameter to do that. @phamhieu If we added one domain in the supabase setting can redirect to any sub-page of that domain?

[dshukertjr]

@nomanmurtaza786 Ah, got it! If there is only one page that you would like to return to, they you can actually configure the redirect URL to go to that page like this:

With this, you can always make sure that the user is sent back to the login page that they originally came from! Would this be sufficient in your case?

[nomanmurtaza786]

@nomanmurtaza786 Ah, got it! If there is only one page that you would like to return to, they you can actually configure the redirect URL to go to that page like this:

With this, you can always make sure that the user is sent back to the login page that they originally came from! Would this be sufficient in your case?

Thanks @dshukertjr yes. Can I do like that mydomain/post?id=12, mydomain/post?id=67 and so on. Or every /post?id should be there in the listing?

[phamhieu]

@nomanmurtaza786 it's better to save the current post id right before calling authentication request. Then when user comes back to the app, you can read the saved post id and show its view.

[spideythewebhead]

Hi, i have a similar question/problem.

I want to use 3rd party auth (google and github) on a desktop app.

So the flow of the auth is this one:

1. Choose to login with provider
2. Login auth moves to provider to select account (on web browser)
3. User selects account and gets redirect back to another url (from provider to redirect url on supabase)
4. App never gets notified that the user is logged in

I am on linux, and i tried to create a desktop entry

[Desktop Entry]
Name=HttpMonger
Exec=/projects/httpmonger/build/linux/x64/debug/bundle/httpmonger %u
Type=Application
Terminal=false
MimeType=x-scheme-handler/monger;

But this one opens a new instance of the application (even if its already opened), but still in the new instance you cant take the access/refresh tokens etc, and even if you could as i saw there is no way to pass this parameter by yourself.

Do you have any idea, for a feasible solution? Should flutter have this ability for deeplink in its core?

Thanks

[dshukertjr]

Hi @spideythewebhead !

I hear your pain. Currently, supabase-flutter package uses uni-links package to handle deep linking, and it seems like uni_links does not support desktop apps at the moment.

There seems to be some discussions about bringing desktop support to uni_links, so once those land, we might be able to support desktop apps as well!

https://github.com/avioli/uni_links/issues/57 https://github.com/avioli/uni_links/issues/6

[spideythewebhead]

Thanks for the update! @dshukertjr

[spideythewebhead]

Hi, i have being trying some stuff and the only thing that works is this: (This is only for linux and i don't really know if there is another way of doing it)

1. create a desktop entry and add it to ~/.local/share/applications/myapp.desktop

[Desktop Entry]
Name=application name
Exec=/bin/sh -c "$HOME/.local/share/applications/myapp.sh %u"
Type=Application
Terminal=false
MimeType=x-scheme-handler/myscheme;

2. create a shell script to handle different cases of scheme, for my case

#!/bin/sh
if [[ "$@" =~ ^myscheme://launch ]];
then
    echo "starts with myscheme://launch"
    path/to/executable "$@"
else
    echo "$@" > /proc/`pidof myprocess`/cwd/auth-fifo
fi

chmod +x myscheme.sh

3. create a fifo, launch auth with provider and give it your scheme, listen for fifo write, parse arguments and provide them to supabase

void loginWithGoogle() async {
        final authFifo = File('./auth-fifo');

        if (await authFifo.exists()) {
          return;
        }

        final proc = await Process.run(
          "mkfifo",
          ["auth-fifo"],
        );

        if (proc.exitCode != 0) {
          print('creation failed');
          return;
        }

        await supabase.client.auth.signInWithProvider(
          gotrue.Provider.google,
          options: AuthOptions(redirectTo: 'myscheme://'),
        );

        /// fifo pipes only get read once for some reason
        /// [https://github.com/dart-lang/sdk/issues/32191]
        authFifo.openRead().transform(utf8.decoder).listen((data) async {
          final uri = Uri.tryParse(data.replaceFirst(RegExp('#'), '?'));

          if (uri != null) {
            await supabase.client.auth.getSessionFromUrl(uri);
          }
        }, onDone: () async {
          await Process.run("unlink", [authFifo.path]);
        });
}

[bdlukaa]

To redirect in a popup, we could use url_launcher's webOnlyWindowName. If we set it to _blank, a new tab would be opened. Altough opening a new tab could be an workaround, we could use this to open an actual popup, or maybe file an issue requesting this feature on url_launcher.

cc @dshukertjr

[dshukertjr]

Closing this issue as the original issue where provider sign in fails when using Flutter web with url_strategy package seems to be fixed. Please feel free to reopen this if you still encounter this issue!