Implemented deep link and local server options instead web_auth

[TheOnlyBeardedBeast]

Summary

This PR replaces web_auth library with url_launcher and app_links and local server options, this setup gives the user more control, also this provides a cross-platform solution (all this started because I needed desktop support).

Edit: the url_launcher could handle an issue I saw in the issues regarding forcing a page to open in an external browser, with this PR this would be now possible.
Also before I did everything you see here, I tried to implement flutter_web_auth_2 I had ugly java kotlin compatibility issues which I wasnt able to handle, but I am not good with android configuration. The dart part was almost a drop in replacement tho.

There are 2 callback strategies:

• scheme strategy: to listen for a custom scheme, like the scheme predefined in the logto config io.logto//callback
• localserver strategy: instead of listening to a given custom scheme callback it launches a webserver on a user defined port, the local server closes after it gets the callback.

I am using GetIt for dependency injection and here is my extension method to register differen strategies (note: app id is also conditional in the config because one app is a flutter app listening to the logto scheme callback, the second is a react app listening to http callback). If this PR with modifications would go through it would be nice to allow more options for custom schemes?

extension AuthenticationExtension on GetIt {
  void registerAuthentication(){
    if(Platform.isAndroid || Platform.isIOS)
    {
      registerSingleton<LogtoClient>(LogtoClient(
      config: config,
      httpClient: http.Client(),
      callbackStrategy: SchemeStrategy()
    ));
    } else {
      registerSingleton<LogtoClient>(LogtoClient(
      config: config,
      httpClient: http.Client(),
      callbackStrategy: LocalServerStrategy(3011)
    ));
    }
  }
}

Additional changes for better usability, a stream was added to the client to notify user about athentication changes, so there will be no additional state widget needed. This needs initialization for that an init() method was also added to the client. Example usage in the standard template for flutter app:

void main() {
  // initialization of the GetIt dependency injection library where the logto client is registered as a singleton
  configureDependecies();

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final LogtoClient logto = GetIt.I<LogtoClient>();

  MyApp({super.key});

  // This widget is the root of your application.

  @override
  Widget build(BuildContext context) {
    logto.init();
     
    return MaterialApp(
    ...

Using the stream and listen to authentication changes in an example AuthGuard widget:

class AuthGuard extends StatelessWidget {
  final Widget authenticatedWidget;
  final Widget? unauthenticatedWidget;
  final Widget loadingWidget;

  const AuthGuard({
    super.key,
    required this.authenticatedWidget,
    this.unauthenticatedWidget,
    this.loadingWidget = const CircularProgressIndicator(),
  });

  @override
  Widget build(BuildContext context) {
    final logto = GetIt.I<LogtoClient>();

    return StreamBuilder<bool>(
      stream: logto.isAuthenticatedStream,
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return Center(child: loadingWidget);
        }

        final isAuthenticated = snapshot.data ?? false;

        if (isAuthenticated) {
          return authenticatedWidget;
        } else {
          return unauthenticatedWidget ?? const SizedBox.shrink();
        }
      },
    );
  }
}

AuthGuard(authenticatedWidget: Column(children: [
              const Text("You are authenticated"),
              TextButton(
              onPressed: () async {
                await logto.signOut();
              },
              child: const Text('Sign Out'),
            )
            ],), unauthenticatedWidget: Column(children: [
              const Text("You are not authenticated"),
              TextButton(
              onPressed: () async {
                await logto.signIn(Platform.isAndroid || Platform.isIOS ? "io.logto://my.app.callback" : "http://localhost:3011");
              },
              child: const Text('Sign In'),
            )
            ],),)

Testing

I tested this by directly replacing the logto_dart_sdk with the forked and changed version locally. I run the application which I am building in an android emulator and on ubuntu as a dektop app. I tested the local server options on both devices and the scheme option on andoid only, on android the URL launcher also used a webview directly from the app.

Checklist

Nothing from these at this point, I would like to use this PR for further discussion, future options and feedback.

• [-] .changeset
• [-] unit tests
• [-] integration tests
• [-] necessary TSDoc comments

[TheOnlyBeardedBeast]

Added an option for the callback strategy to force external application (browser) opening if possible.

[simeng-li]

Thank you for your support. Will take a look soon.

[simeng-li]

Hi @TheOnlyBeardedBeast , I apologize for the delayed response and appreciate your contribution. I've initiated a new PR to upgrade our Dart SDK to utilize the most recent flutter_web_auth_2 package. This change will resolve the majority of our platform compatibility issues, including support web applications. Also because, it is more straightforward and easy to integrate for most of the use cases Please check PR #76 .

Your concept is truly innovative, and we would love to offer developers greater flexibility in managing authentication redirections. I recommend developing a new client package, distinct from the existing logto_client.dart, that leverages a custom authentication widget to orchestrate the authentication process. So developers can pick and choose the desired client package based on their needs. This will also allow us to maintain the current client package as a lightweight alternative for users who prefer a simpler setup.

Looking forward to hearing back from you. Thanks.

[TheOnlyBeardedBeast]

@simeng-li Hi, thanks for the review, and also sorry for the waiting for my reply, Sure, I can host a version on my own, do you have any requirements for me to publish a version with my changes, like a specific package name or some additional information in the readme or anything? Let me know, also feel free to close this PR then, thank you!

[simeng-li]

Feel free to host your own package, or you can simply create a separate module within this repo. For example, similar to logto_client.dart, you can create a logto_custom_client.dart file and export it in the SDK. This approach should save you a lot of effort.
Additionally, we’d love to have your contribution recorded! 🚀

[TheOnlyBeardedBeast]

Ah that sounds good, I will try to rebase the files this weekend, and update things, also I will implement the suggested file changes and let you know! Thanks.

[drewid]

What is the timeframe on this PR being finalized and incorporated? Not harassing just checking. Thanks

[TheOnlyBeardedBeast]

@simeng-li I updated my pr from this repo, created the LogtoClientCustom class.

@drewid you can use my repo directly until this is not closed by referencing it in the dependencies in pubspec.yaml , I do it in my project like this

logto_dart_sdk:
    git:
      url: https://github.com/TheOnlyBeardedBeast/logto_dart.git
      ref: master

And use the LogtoClientCustom class instead of the default LogtoClient