login: Implement browser login

android/app/src/main/AndroidManifest.xml

@@ -25,6 +25,14 @@
                 <action android:name="android.intent.action.MAIN"/>
                 <category android:name="android.intent.category.LAUNCHER"/>
             </intent-filter>
+
+            <meta-data android:name="flutter_deeplinking_enabled" android:value="true" />
+            <intent-filter>
+                <action android:name="android.intent.action.VIEW" />
+                <category android:name="android.intent.category.DEFAULT" />
+                <category android:name="android.intent.category.BROWSABLE" />
+                <data android:scheme="zulip" android:host="login" />
+            </intent-filter>
         </activity>
         <!-- Don't delete the meta-data below.
              This is used by the Flutter tool to generate GeneratedPluginRegistrant.java -->

lib/api/route/realm.dart

@@ -28,10 +28,32 @@ Future<GetServerSettingsResult> getServerSettings({
   }
 }
 
+@JsonSerializable(fieldRename: FieldRename.snake)
+class ExternalAuthenticationMethod {
+  final String name;
+  final String displayName;
+  final String? displayIcon;
+  final String loginUrl;
+  final String signupUrl;
+
+  ExternalAuthenticationMethod({
+    required this.name,
+    required this.displayName,
+    this.displayIcon,
+    required this.loginUrl,
+    required this.signupUrl,
+  });
+
+  factory ExternalAuthenticationMethod.fromJson(Map<String, dynamic> json) =>
+    _$ExternalAuthenticationMethodFromJson(json);
+
+  Map<String, dynamic> toJson() => _$ExternalAuthenticationMethodToJson(this);
+}
+
 @JsonSerializable(fieldRename: FieldRename.snake)
 class GetServerSettingsResult {
   final Map<String, bool> authenticationMethods;
-  // final List<ExternalAuthenticationMethod> external_authentication_methods; // TODO handle
+  final List<ExternalAuthenticationMethod> externalAuthenticationMethods;
 
   final int zulipFeatureLevel;
   final String zulipVersion;
@@ -44,12 +66,13 @@ class GetServerSettingsResult {
   final bool requireEmailFormatUsernames;
   final Uri realmUri;
   final String realmName;
-  final String realmIcon;
+  final Uri? realmIcon;
   final String realmDescription;
   final bool? realmWebPublicAccessEnabled; // TODO(server-5)
 
   GetServerSettingsResult({
     required this.authenticationMethods,
+    required this.externalAuthenticationMethods,
     required this.zulipFeatureLevel,
     required this.zulipVersion,
     this.zulipMergeBase,

lib/widgets/app.dart

@@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
 import '../model/narrow.dart';
 import 'about_zulip.dart';
 import 'login.dart';
+import 'login/browser_login.dart';
 import 'message_list.dart';
 import 'page.dart';
 import 'recent_dm_conversations.dart';
@@ -25,10 +26,29 @@ class ZulipApp extends StatelessWidget {
       //   https://m3.material.io/theme-builder#/custom
       colorScheme: ColorScheme.fromSeed(seedColor: kZulipBrandColor));
     return GlobalStoreWidget(
-      child: MaterialApp(
-        title: 'Zulip',
-        theme: theme,
-        home: const ChooseAccountPage()));
+      child: BrowserLoginWidget(
+        child: Builder(
+          builder: (context) => MaterialApp(
+            title: 'Zulip',
+            theme: theme,
+            home: const ChooseAccountPage(),
+            navigatorKey: BrowserLoginWidget.of(context).navigatorKey,
+            // TODO: Migrate to `MaterialApp.router` & `Router`, so that we can receive
+            //       a full Uri instead of just path+query components and also maybe
+            //       remove the InheritedWidget + navigatorKey hack.
+            // See docs:
+            //   https://api.flutter.dev/flutter/widgets/Router-class.html
+            onGenerateRoute: (settings) {
+              if (settings.name == null) return null;
+              final uri = Uri.parse(settings.name!);
+              if (uri.queryParameters.containsKey('otp_encrypted_api_key')) {
+                BrowserLoginWidget.of(context).loginFromExternalRoute(context, uri);
+                return null;
+              }
+              return null;
+            })),
+      ),
+    );
   }
 }
 

lib/widgets/login.dart

@@ -9,11 +9,12 @@ import '../model/store.dart';
 import 'app.dart';
 import 'dialog.dart';
 import 'input.dart';
+import 'login/browser_login.dart';
 import 'page.dart';
 import 'store.dart';
 
-class _LoginSequenceRoute extends MaterialWidgetRoute<void> {
-  _LoginSequenceRoute({
+class LoginSequenceRoute extends MaterialWidgetRoute<void> {
+  LoginSequenceRoute({
     required super.page,
   });
 }
@@ -102,7 +103,7 @@ class AddAccountPage extends StatefulWidget {
   const AddAccountPage({super.key});
 
   static Route<void> buildRoute() {
-    return _LoginSequenceRoute(page: const AddAccountPage());
+    return LoginSequenceRoute(page: const AddAccountPage());
   }
 
   @override
@@ -167,9 +168,8 @@ class _AddAccountPageState extends State<AddAccountPage> {
         return;
       }
 
-      // TODO(#36): support login methods beyond username/password
       Navigator.push(context,
-        PasswordLoginPage.buildRoute(serverSettings: serverSettings));
+        AuthMethodsPage.buildRoute(serverSettings: serverSettings));
     } finally {
       setState(() {
         _inProgress = false;
@@ -225,13 +225,89 @@ class _AddAccountPageState extends State<AddAccountPage> {
   }
 }
 
+class AuthMethodsPage extends StatefulWidget {
+  const AuthMethodsPage({super.key, required this.serverSettings});
+
+  final GetServerSettingsResult serverSettings;
+
+  static Route<void> buildRoute({required GetServerSettingsResult serverSettings}) {
+    return LoginSequenceRoute(
+      page: AuthMethodsPage(serverSettings: serverSettings));
+  }
+
+  @override
+  State<AuthMethodsPage> createState() => _AuthMethodsPageState();
+}
+
+class _AuthMethodsPageState extends State<AuthMethodsPage> {
+  // TODO: Remove this list when all the methods are tested,
+  //       or update to add a new method.
+  static const Set<String> _testedAuthMethods = {
+    'github',
+    'gitlab',
+    'google',
+  };
+
+  Future<void> _openBrowserLogin(ExternalAuthenticationMethod method) =>
+    BrowserLoginWidget.of(context).openLoginUrl(widget.serverSettings, method.loginUrl);
+
+  @override
+  Widget build(BuildContext context) {
+    // 'realmIcon' for chat.zulip.org, only contains the path component.
+    // So, resolve it to the 'realmUri' to get the full Uri with host.
+    final Uri? iconUrl = widget.serverSettings.realmIcon != null
+      ? widget.serverSettings.realmUri.resolveUri(widget.serverSettings.realmIcon!)
+      : null;
+
+    return Scaffold(
+      appBar: AppBar(title: const Text('Log in')),
+      body: SafeArea(
+        child: ListView(
+          padding: const EdgeInsets.all(8),
+          children: [
+          Padding(
+            padding: const EdgeInsets.only(bottom: 8),
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+              if (iconUrl != null) ...[
+                Image.network(
+                  iconUrl.toString(),
+                  key: const Key('realm_icon'),
+                  width: 48,
+                  height: 48),
+                const SizedBox(width: 8),
+              ],
+              Text(widget.serverSettings.realmName, style: const TextStyle(fontSize: 20)),
+            ]),
+          ),
+          if (widget.serverSettings.emailAuthEnabled)
+            OutlinedButton(
+              onPressed: () => Navigator.push(context, PasswordLoginPage.buildRoute(serverSettings: widget.serverSettings)),
+              child: const Text('Sign in with password')),
+          ...widget.serverSettings.externalAuthenticationMethods.map(
+            (authMethod) => switch (authMethod.displayIcon) {
+              null || '' => OutlinedButton(
+                onPressed: _testedAuthMethods.contains(authMethod.name) ? () => _openBrowserLogin(authMethod) : null,
+                child: Text('Sign in with ${authMethod.displayName}'),
+              ),
+              final displayIcon => OutlinedButton.icon(
+                onPressed: _testedAuthMethods.contains(authMethod.name) ? () => _openBrowserLogin(authMethod) : null,
+                icon: Image.network(displayIcon, width: 24, height: 24),
+                label: Text('Sign in with ${authMethod.displayName}'),
+              ),
+            }).toList(),
+        ])));
+  }
+}
+
 class PasswordLoginPage extends StatefulWidget {
   const PasswordLoginPage({super.key, required this.serverSettings});
 
   final GetServerSettingsResult serverSettings;
 
   static Route<void> buildRoute({required GetServerSettingsResult serverSettings}) {
-    return _LoginSequenceRoute(
+    return LoginSequenceRoute(
       page: PasswordLoginPage(serverSettings: serverSettings));
   }
 
@@ -323,7 +399,7 @@ class _PasswordLoginPageState extends State<PasswordLoginPage> {
 
       Navigator.of(context).pushAndRemoveUntil(
         HomePage.buildRoute(accountId: accountId),
-        (route) => (route is! _LoginSequenceRoute),
+        (route) => (route is! LoginSequenceRoute),
       );
     } finally {
       setState(() {