feat(dart): improve sign in experience (#15)

Co-authored-by: simeng-li <simeng@silverhand.io>

Author: julian-hartl

example/android/app/build.gradle

@@ -26,7 +26,7 @@ apply plugin: 'kotlin-android'
 apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"
 
 android {
-    compileSdkVersion flutter.compileSdkVersion
+    compileSdkVersion 33
     ndkVersion flutter.ndkVersion
 
     compileOptions {
@@ -47,7 +47,7 @@ android {
         applicationId "com.example.example"
         // You can update the following values to match your application needs.
         // For more information, see: https://docs.flutter.dev/deployment/android#reviewing-the-build-configuration.
-        minSdkVersion flutter.minSdkVersion
+        minSdkVersion 19
         targetSdkVersion flutter.targetSdkVersion
         versionCode flutterVersionCode.toInteger()
         versionName flutterVersionName

example/android/app/src/main/AndroidManifest.xml

@@ -1,34 +1,43 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
-    package="com.example.example">
-   <application
-        android:label="example"
-        android:name="${applicationName}"
-        android:icon="@mipmap/ic_launcher">
+          package="com.example.example">
+    <application
+            android:label="example"
+            android:name="${applicationName}"
+            android:icon="@mipmap/ic_launcher">
         <activity
-            android:name=".MainActivity"
-            android:exported="true"
-            android:launchMode="singleTop"
-            android:theme="@style/LaunchTheme"
-            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
-            android:hardwareAccelerated="true"
-            android:windowSoftInputMode="adjustResize">
+                android:name=".MainActivity"
+                android:exported="true"
+                android:launchMode="singleTop"
+                android:theme="@style/LaunchTheme"
+                android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
+                android:hardwareAccelerated="true"
+                android:windowSoftInputMode="adjustResize">
             <!-- Specifies an Android theme to apply to this Activity as soon as
                  the Android process has started. This theme is visible to the user
                  while the Flutter UI initializes. After that, this theme continues
                  to determine the Window background behind the Flutter UI. -->
             <meta-data
-              android:name="io.flutter.embedding.android.NormalTheme"
-              android:resource="@style/NormalTheme"
-              />
+                    android:name="io.flutter.embedding.android.NormalTheme"
+                    android:resource="@style/NormalTheme"
+            />
             <intent-filter>
                 <action android:name="android.intent.action.MAIN"/>
                 <category android:name="android.intent.category.LAUNCHER"/>
             </intent-filter>
         </activity>
+
+        <activity android:name="com.linusu.flutter_web_auth.CallbackActivity" android:exported="false">
+            <intent-filter android:label="flutter_web_auth">
+                <action android:name="android.intent.action.VIEW"/>
+                <category android:name="android.intent.category.DEFAULT"/>
+                <category android:name="android.intent.category.BROWSABLE"/>
+                <data android:scheme="io.logto"/>
+            </intent-filter>
+        </activity>
         <!-- Don't delete the meta-data below.
              This is used by the Flutter tool to generate GeneratedPluginRegistrant.java -->
         <meta-data
-            android:name="flutterEmbedding"
-            android:value="2" />
+                android:name="flutterEmbedding"
+                android:value="2"/>
     </application>
 </manifest>

example/lib/main.dart

@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
-import 'package:http/http.dart' as http;
 import 'package:logto_dart_sdk/logto_dart_sdk.dart';
+import 'package:http/http.dart' as http;
 
 void main() async {
   WidgetsFlutterBinding.ensureInitialized();
@@ -37,10 +37,10 @@ class MyHomePage extends StatefulWidget {
 }
 
 class _MyHomePageState extends State<MyHomePage> {
-  String content = 'Logto SDK Demo Home Page';
-  bool isAuthenticated = false;
+  static String welcome = 'Logto SDK Demo Home Page';
+  String? content;
+  bool? isAuthenticated;
 
-  final client = http.Client();
   final redirectUri = 'io.logto://callback';
   final config = const LogtoConfig(
       appId: 'xgSxW0MDpVqW2GDvCnlNb', endpoint: 'https://logto.dev');
@@ -60,32 +60,51 @@ class _MyHomePageState extends State<MyHomePage> {
         content = claims!.toJson().toString();
         isAuthenticated = true;
       });
+      return;
     }
+    setState(() {
+      content = '';
+      isAuthenticated = false;
+    });
   }
 
   void _init() async {
-    logtoClient = LogtoClient(config, client);
-    render();
-  }
-
-  void signInCallback() {
+    logtoClient = LogtoClient(
+      config: config,
+      httpClient: http.Client(),
+    );
     render();
   }
 
   @override
   Widget build(BuildContext context) {
     Widget signInButton = TextButton(
       style: TextButton.styleFrom(
+        foregroundColor: Colors.white,
         backgroundColor: Colors.deepPurpleAccent,
         padding: const EdgeInsets.all(16.0),
         textStyle: const TextStyle(fontSize: 20),
       ),
-      onPressed: () {
-        logtoClient.signIn(context, redirectUri, signInCallback);
+      onPressed: () async {
+        await logtoClient.signIn(redirectUri);
+        render();
       },
       child: const Text('Sign In'),
     );
 
+    Widget signOutButton = TextButton(
+      style: TextButton.styleFrom(
+        foregroundColor: Colors.black,
+        padding: const EdgeInsets.all(16.0),
+        textStyle: const TextStyle(fontSize: 20),
+      ),
+      onPressed: () async {
+        await logtoClient.signOut(redirectUri: redirectUri);
+        render();
+      },
+      child: const Text('Sign Out'),
+    );
+
     return Scaffold(
       appBar: AppBar(
         title: Text(widget.title),
@@ -94,23 +113,23 @@ class _MyHomePageState extends State<MyHomePage> {
         child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
           children: <Widget>[
+            SelectableText(welcome,
+                style:
+                    const TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
             Container(
               padding: const EdgeInsets.all(64),
               child: SelectableText(
-                content,
+                content ?? '',
               ),
             ),
-            // TODO: show signout button
-            isAuthenticated ? signInButton : signInButton,
+            isAuthenticated != null
+                ? isAuthenticated == true
+                    ? signOutButton
+                    : signInButton
+                : const SizedBox.shrink()
           ],
         ),
       ),
     );
   }
-
-  @override
-  void dispose() {
-    client.close();
-    super.dispose();
-  }
 }

example/pubspec.lock

@@ -172,6 +172,13 @@ packages:
     description: flutter
     source: sdk
     version: "0.0.0"
+  flutter_web_auth:
+    dependency: transitive
+    description:
+      name: flutter_web_auth
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.4.1"
   flutter_web_plugins:
     dependency: transitive
     description: flutter