How to listen for the callback in Flutter web?

[EightRice]

Neither uni_links nor webview_flutter support web. So how can you implement the listen method?
https://stackoverflow.com/questions/63946743/oauth2-in-flutter-web

[thosakwe]

I'm fairly certain this package works on the Web, as it doesn't require dart:io or dart:mirrors.

You also don't need uni_links or webview_flutter on the Web, because the API's already exist in the browser.

If you call window.open(...), the child window can raise a CustomEvent in the parent window. I'm not sure how your server is set up, but whatever page begins the three-legged OAuth2 flow should be opened in a new window. The third-party will then redirect the user to the given redirect_url. From this redirect, you grab the code URL parameter, and use that to get a token. This token should then be passed to the parent window via an event.

The secure way to do this involves you writing the actual OAuth-related code on your server, having the client only worry about handling an event from a child window. If you don't have a server, you can do everything client-side, but if you're not doing an implicit grant, then you risk leaking your secret key.

[EightRice]

@thosakwe . Using the html.window, you'd need separate routes to post and listen to the message, which is not happening because of flutter/flutter#33245 . You can't use # in the redirect uri.

[thosakwe]

I don't think you would need separate routes, because the page that you open in a new window can just be a separate page that closes itself after firing an event in the parent, and won't need Flutter, or really much in the way of presentation, as it's an intermediate step.

I haven't used Flutter Web, but I'm imagining you can listen for events while using it.

[abahnj]

@EightRice Did you ever figure out a solution for this?

[helloURVA]

Yes, this is in high demand! We'd love to know a way out too.

[RasmusSlothJensen]

My solution was to forked the repo and changed AuthorizationCodeGrant class so it is possible to store it while the browser is doing the round-trip to the idp.
I pass the authorization URL to window.location.attach() and on the callback I deserialize the AuthorizationCodeGrant i stored and then I removed the hash from Uri.base and passed the queryParameters to handleAuthorizationResponse

[robinjanke]

Hey @RasmusSlothJensen can you please make your fork public? So anyone can use this package with flutter for web. Thanks!

[RasmusSlothJensen]

Hi @robinjanke
Here is the link:
https://github.com/Triple-Arm-Technique-ApS/oauth2
I have not maintained it, but the change is fairly small so I hope you can use still it :)

[robinjanke]

Hi @RasmusSlothJensen , big thanks for sharing this! :)
Can you provide me an example how you have implemented this on your app?
Im stuck at doing something like window.location.assign(authorizationUrl.toString()); but cant listen for changes in the url..

[RasmusSlothJensen]

Hi @robinjanke

I have a lot of abstraction in my app to support both mobile and web.
But I can show how I catch the callback.
I don't know it is the correct way of doing it but I use the MaterialApp widget and in the onGenerateRoute callback I catch the callback from the idp:

onGenerateRoute: (RouteSettings settings) {
  if (settings.name.startsWith('/callback')) {
    return MaterialPageRoute(
      builder: (context) => CallbackHandlerPage(
        callback: Uri.base,
      ),
    );
   ...
  }

In the CallbackHandlerPage I retrieve the AuthorizationCodeGrant from local storage and call

final client = await grant.handleAuthorizationResponse(
            callback.queryParameters,
          );

@RasmusSlothJensen Wow, thanks for sharing this with us. Love it! 👏

[robinjanke]

@RasmusSlothJensen Thanks for your fast answer, i already got an step further.
Can you also tell me how you managed to save the AuthorizationCodeGrant in the local storage? I tried it with getIt like the following way: getIt.registerSingleton<oauth2.AuthorizationCodeGrant>(grant); but got the following error when accessing it insied the onGenerateRoute function using getIt.get<oauth2.AuthorizationCodeGrant>(): "Object/factory with type AuthorizationCodeGrant is not registered inside GetIt. I also used your fork

[RasmusSlothJensen]

@robinjanke I use https://pub.dev/packages/shared_preferences for web.
When I create the Authorization URL I store the AuthorizationCodeGrant

  final grant = AuthorizationCodeGrant(
        clientID,
        authorizationEndpoint,
        tokenEndpoint,
      );
   final authorizationUrl =
        grant.getAuthorizationUrl(redirectUri, scopes: scopes);
   final String json = jsonEncode(
      grant.toJson(),
   );
   await _sharedPreferences.setString('grant', json);

Then when I need to handle the callback I get the grant from storage.

final json = _sharedPreferences.getString('grant');
final grant = AuthorizationCodeGrant.fromJson(
        jsonDecode(json),
      );

[giiyms]

Any chance someone can post a full solution test project?
I must be missing something.

[robinjanke]

@giiyms I am gonna write an medium article for that and post an link here when it is finished :)