Google Sign In render button issue in latest version for flutter web #149236

Activity

1. darshankawar

   added

   in triagePresently being triaged by the triage teamPresently being triaged by the triage team

   on May 29, 2024
2. darshankawar commented on May 29, 2024

   

   darshankawar

   on May 29, 2024

   Member

   More actions

   child: googleSignInPlugin
                                                     .renderButton(
                                                   configuration: html
                                                       .getGoogleSignInButtonConfiguration(
                                                           constraints.maxWidth),
                                                 ),

   @jaydeepkaria-mi Is this coming from https://pub.dev/packages/google_sign_in ? I tried with it, but couldn't get the implementation correct ?
   Can you elaborate on that usage and provide us complete code sample ?
3. darshankawar

   added

   waiting for responseThe Flutter team cannot make further progress on this issue until the original reporter respondsThe Flutter team cannot make further progress on this issue until the original reporter responds

   on May 29, 2024
4. jaydeepkaria-mi commented on May 30, 2024

   

   jaydeepkaria-mi

   on May 30, 2024

   Last edited by jaydeepkaria-mi

   Author

   More actions

   Code of pubspec

   name: google_sign_in_demo
   description: "A new Flutter project."
   # The following line prevents the package from being accidentally published to
   # pub.dev using `flutter pub publish`. This is preferred for private packages.
   publish_to: 'none' # Remove this line if you wish to publish to pub.dev
   
   # The following defines the version and build number for your application.
   # A version number is three numbers separated by dots, like 1.2.43
   # followed by an optional build number separated by a +.
   # Both the version and the builder number may be overridden in flutter
   # build by specifying --build-name and --build-number, respectively.
   # In Android, build-name is used as versionName while build-number used as versionCode.
   # Read more about Android versioning at https://developer.android.com/studio/publish/versioning
   # In iOS, build-name is used as CFBundleShortVersionString while build-number is used as CFBundleVersion.
   # Read more about iOS versioning at
   # https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
   # In Windows, build-name is used as the major, minor, and patch parts
   # of the product and file versions while build-number is used as the build suffix.
   version: 1.0.0+1
   
   environment:
     sdk: '>=3.4.0 <4.0.0'
   
   # Dependencies specify other packages that your package needs in order to work.
   # To automatically upgrade your package dependencies to the latest versions
   # consider running `flutter pub upgrade --major-versions`. Alternatively,
   # dependencies can be manually updated by changing the version numbers below to
   # the latest version available on pub.dev. To see which dependencies have newer
   # versions available, run `flutter pub outdated`.
   dependencies:
     flutter:
       sdk: flutter
   
   
     # The following adds the Cupertino Icons font to your application.
     # Use with the CupertinoIcons class for iOS style icons.
     cupertino_icons: ^1.0.6
     google_sign_in: ^6.2.1
     google_sign_in_web: ^0.12.4
     google_sign_in_platform_interface: ^2.4.5
   
   dev_dependencies:
     flutter_test:
       sdk: flutter
   
     # The "flutter_lints" package below contains a set of recommended lints to
     # encourage good coding practices. The lint set provided by the package is
     # activated in the `analysis_options.yaml` file located at the root of your
     # package. See that file for information about deactivating specific lint
     # rules and activating additional ones.
     flutter_lints: ^3.0.0
   
   # For information on the generic Dart part of this file, see the
   # following page: https://dart.dev/tools/pub/pubspec
   
   # The following section is specific to Flutter packages.
   flutter:
   
     # The following line ensures that the Material Icons font is
     # included with your application, so that you can use the icons in
     # the material Icons class.
     uses-material-design: true
   
     # To add assets to your application, add an assets section, like this:
     # assets:
     #   - images/a_dot_burr.jpeg
     #   - images/a_dot_ham.jpeg
   
     # An image asset can refer to one or more resolution-specific "variants", see
     # https://flutter.dev/assets-and-images/#resolution-aware
   
     # For details regarding adding assets from package dependencies, see
     # https://flutter.dev/assets-and-images/#from-packages
   
     # To add custom fonts to your application, add a fonts section here,
     # in this "flutter" section. Each entry in this list should have a
     # "family" key with the font family name, and a "fonts" key with a
     # list giving the asset and other descriptors for the font. For
     # example:
     # fonts:
     #   - family: Schyler
     #     fonts:
     #       - asset: fonts/Schyler-Regular.ttf
     #       - asset: fonts/Schyler-Italic.ttf
     #         style: italic
     #   - family: Trajan Pro
     #     fonts:
     #       - asset: fonts/TrajanPro.ttf
     #       - asset: fonts/TrajanPro_Bold.ttf
     #         weight: 700
     #
     # For details regarding fonts from package dependencies,
     # see https://flutter.dev/custom-fonts/#from-packages

   Code of main.dart

   import 'package:flutter/material.dart';
   import 'package:google_sign_in_demo/html_lib.dart' as html;
   
   import 'html_lib.dart';
   
   void main() async {
     await commonMain();
   }
   
   Future<void> commonMain() async {
     await html.googleSignInPlugin.init();
   
     runApp(const MyApp());
   }
   
   class MyApp extends StatelessWidget {
     const MyApp({super.key});
   
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Flutter Demo',
         theme: ThemeData(
           colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
           useMaterial3: true,
         ),
         home: const MyHomePage(title: 'Flutter Demo Home Page'),
       );
     }
   }
   
   class MyHomePage extends StatefulWidget {
     const MyHomePage({super.key, required this.title});
   
     final String title;
   
     @override
     State<MyHomePage> createState() => _MyHomePageState();
   }
   
   class _MyHomePageState extends State<MyHomePage> {
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           backgroundColor: Theme.of(context).colorScheme.inversePrimary,
           title: Text(widget.title),
         ),
         body: Center(
           child: Column(
             children: [
               const Text('Google Sign In', style: TextStyle(color: Colors.black),),
               SizedBox(
                 width: 175,
                 height: 48,
                 child: googleSignInPlugin.renderButton(
                   configuration: html.getGoogleSignInButtonConfigurationDesktop(),
                 ),
               ),
             ],
           ),
         ),
       );
     }
   }

   Code of html_lib

   // ignore: avoid_web_libraries_in_flutter
   /// For web uncomment this
   
    //start_web
   import 'dart:html' as html;
   import 'package:google_sign_in_web/google_sign_in_web.dart';
   import 'package:google_sign_in_platform_interface/google_sign_in_platform_interface.dart';
   
   final html.Window window = html.window;
   final html.HtmlDocument document = html.document;
   final googleSignInPlugin = GoogleSignInPlatform.instance as GoogleSignInPlugin;
   
   class MySanitizer implements html.NodeTreeSanitizer {
     @override
     void sanitizeTree(html.Node node) {}
   }
   
   getGoogleSignInButtonConfiguration(double width) => GSIButtonConfiguration(
         size: GSIButtonSize.medium,
         minimumWidth: width,
       );
   
   getGoogleSignInButtonConfigurationDesktop() => GSIButtonConfiguration(
         size: GSIButtonSize.medium,
         minimumWidth: 164,
         text: GSIButtonText.signinWith,
       );
   
    //end_web
   
   /// For Non-web uncomment this
   
    /*//start_non_web
   dynamic window;
   dynamic document;
   dynamic googleSignInPlugin;
   class Node {}
   class MySanitizer {}
   
   class GoogleSignInPlugin{
   
   }
   
   getGoogleSignInButtonConfiguration(double width) => null;
   
   getGoogleSignInButtonConfigurationDesktop() => null;
   
    *///end_non_web

   Try this code. It will give the error
5. github-actions

   removed

   waiting for responseThe Flutter team cannot make further progress on this issue until the original reporter respondsThe Flutter team cannot make further progress on this issue until the original reporter responds

   on May 30, 2024
6. darshankawar commented on May 31, 2024

   

   darshankawar

   on May 31, 2024

   Member

   More actions

   @jaydeepkaria-mi
   I tried above code but it is not rendering anything, as below:

   

   Can you switch to latest master and re-run your scenario to check if the reported error persists in it or not ?
7. darshankawar

   added

   waiting for responseThe Flutter team cannot make further progress on this issue until the original reporter respondsThe Flutter team cannot make further progress on this issue until the original reporter responds

   on May 31, 2024
8. jaydeepkaria-mi commented on May 31, 2024

   

   jaydeepkaria-mi

   on May 31, 2024

   Author

   More actions

   Yup, @darshankawar that is what the issue is. Due to the Google sign-in button render issue other text is not showing. The same code works for me in version 3.16.0 and the Google sign-in button is visible. I am getting the error you can check the
   screenshot
   
9. github-actions

   removed

   waiting for responseThe Flutter team cannot make further progress on this issue until the original reporter respondsThe Flutter team cannot make further progress on this issue until the original reporter responds

   on May 31, 2024
10. darshankawar commented on May 31, 2024

    

    darshankawar

    on May 31, 2024

    Member

    More actions

    Thanks for the update. Although I am seeing a blank screen in web, but I don't see the exception log in the console. I tried this on stable 3.16.0, 3.16.9 and 3.22.1.
    However, I do see the reported exception log running the same code in latest master version:

    A Dart VM Service on Chrome is available at: http://127.0.0.1:56605/zHgwPU-L3mY=
    Error
    dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 296:3  throw_
    dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 29:3   assertFailed
    packages/google_sign_in_web/google_sign_in_web.dart 144:20                   initWithParams
    dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 84:54           runBody
    dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 127:5           _async
    packages/google_sign_in_web/google_sign_in_web.dart 141:30                   initWithParams
    packages/google_sign_in_web/google_sign_in_web.dart 132:12                   init
    packages/ip_issue/main.dart 11:33                                            commonMain
    dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 84:54           runBody
    dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 127:5           _async
    packages/ip_issue/main.dart 10:24                                            commonMain
    packages/ip_issue/main.dart 7:9                                              main$
    dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 84:54           runBody
    dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 127:5           _async
    packages/ip_issue/main.dart 6:10                                             main$
    web_entrypoint.dart 24:31                                                    <fn>
    lib/ui_web/ui_web/initialization.dart 41:9                                   <fn>
    dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 45:50           <fn>
    dart-sdk/lib/async/zone.dart 1661:54                                         runUnary
    dart-sdk/lib/async/future_impl.dart 163:18                                   handleValue
    dart-sdk/lib/async/future_impl.dart 861:44                                   handleValueCallback
    dart-sdk/lib/async/future_impl.dart 890:13                                   _propagateToListeners
    dart-sdk/lib/async/future_impl.dart 666:5                                    [_completeWithValue]
    dart-sdk/lib/async/future_impl.dart 736:7                                    callback
    dart-sdk/lib/async/schedule_microtask.dart 40:11                             _microtaskLoop
    dart-sdk/lib/async/schedule_microtask.dart 49:5                              _startMicrotaskLoop
    dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 181:7           <fn>
    A message on the flutter/lifecycle channel was discarded before it could be handled.
    This happens when a plugin sends messages to the framework side before the framework has had an opportunity to register a listener. See the ChannelBuffers API documentation
    for details on how to configure the channel to expect more messages, or to expect messages to get discarded:
      https://api.flutter.dev/flutter/dart-ui/ChannelBuffers-class.html
    

    Maybe related to #131452 ?

    master flutter doctor -v

    
    [!] Flutter (Channel master, 3.23.0-13.0.pre.21, on macOS 12.2.1 21D62
        darwin-x64, locale en-GB)
        • Flutter version 3.23.0-13.0.pre.21 on channel master at
          /Users/dhs/documents/fluttersdk/flutter
        ! Warning: `flutter` on your path resolves to
          /Users/dhs/Documents/Fluttersdk/flutter/bin/flutter, which is not inside
          your current Flutter SDK checkout at
          /Users/dhs/documents/fluttersdk/flutter. Consider adding
          /Users/dhs/documents/fluttersdk/flutter/bin to the front of your path.
        ! Warning: `dart` on your path resolves to
          /Users/dhs/Documents/Fluttersdk/flutter/bin/dart, which is not inside your
          current Flutter SDK checkout at /Users/dhs/documents/fluttersdk/flutter.
          Consider adding /Users/dhs/documents/fluttersdk/flutter/bin to the front
          of your path.
        • Upstream repository https://github.com/flutter/flutter.git
        • Framework revision b295c86b2e (32 minutes ago), 2024-05-30 00:29:41 -0400
        • Engine revision 19707e811b
        • Dart version 3.5.0 (build 3.5.0-203.0.dev)
        • DevTools version 2.36.0-dev.10
        • If those were intentional, you can disregard the above warnings; however
          it is recommended to use "git" directly to perform update checks and
          upgrades.
    
    [!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
        • Android SDK at /Users/dhs/Library/Android/sdk
        ✗ cmdline-tools component is missing
          Run `path/to/sdkmanager --install "cmdline-tools;latest"`
          See https://developer.android.com/studio/command-line for more details.
        ✗ Android license status unknown.
          Run `flutter doctor --android-licenses` to accept the SDK licenses.
          See https://flutter.dev/docs/get-started/install/macos#android-setup for
          more details.
    
    [✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
        • Xcode at /Applications/Xcode.app/Contents/Developer
        • Build 13C100
        • CocoaPods version 1.11.2
    
    [✓] Chrome - develop for the web
        • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
    
    [✓] IntelliJ IDEA Ultimate Edition (version 2021.3.2)
        • IntelliJ at /Applications/IntelliJ IDEA.app
        • Flutter plugin version 65.1.4
        • Dart plugin version 213.7228
    
    [✓] VS Code (version 1.62.0)
        • VS Code at /Applications/Visual Studio Code.app/Contents
        • Flutter extension version 3.29.0
    
    [✓] Connected device (3 available)
        • Darshan's iphone (mobile) • 21150b119064aecc249dfcfe05e259197461ce23 • ios
          • iOS 15.3.1 19D52
        • macOS (desktop)           • macos                                    •
          darwin-x64     • macOS 12.2.1 21D62 darwin-x64
        • Chrome (web)              • chrome                                   •
          web-javascript • Google Chrome 109.0.5414.119
    
    [✓] Network resources
        • All expected network resources are available.
    
    ! Doctor found issues in 1 category.
          
    [!] Xcode - develop for iOS and macOS (Xcode 12.3)
        • Xcode at /Applications/Xcode.app/Contents/Developer
        ! Flutter recommends a minimum Xcode version of 13.
          Download the latest version or update via the Mac App Store.
        • CocoaPods version 1.11.2
    
    [✓] Chrome - develop for the web
        • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
    
    [✓] VS Code (version 1.62.0)
        • VS Code at /Applications/Visual Studio Code.app/Contents
        • Flutter extension version 3.21.0
    
    [✓] Connected device (5 available)
        • SM G975F (mobile)       • RZ8M802WY0X • android-arm64   • Android 11 (API 30)
        • Darshan's iphone (mobile)  • 21150b119064aecc249dfcfe05e259197461ce23 •
          ios            • iOS 14.4.1 18D61
        • iPhone 12 Pro Max (mobile) • A5473606-0213-4FD8-BA16-553433949729     •
          ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator)
        • macOS (desktop)            • macos                                    •
          darwin-x64     • Mac OS X 10.15.4 19E2269 darwin-x64
        • Chrome (web)               • chrome                                   •
          web-javascript • Google Chrome 98.0.4758.80
    
    [✓] HTTP Host Availability
        • All required HTTP hosts are available
    
    ! Doctor found issues in 1 category.
    
    
    
    

    runnable code sample

    
    import 'package:flutter/material.dart';
    import 'package:ip_issue/html_lib.dart' as html;
    
    import 'html_lib.dart';
    
    void main() async {
      await commonMain();
    }
    
    Future<void> commonMain() async {
      await html.googleSignInPlugin.init();
    
      runApp(const MyApp());
    }
    
    class MyApp extends StatelessWidget {
      const MyApp({super.key});
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
            useMaterial3: true,
          ),
          home: const MyHomePage(title: 'Flutter Demo Home Page'),
        );
      }
    }
    
    class MyHomePage extends StatefulWidget {
      const MyHomePage({super.key, required this.title});
    
      final String title;
    
      @override
      State<MyHomePage> createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            backgroundColor: Theme.of(context).colorScheme.inversePrimary,
            title: Text(widget.title),
          ),
          body: Center(
            child: Column(
              children: [
                const Text('Google Sign In', style: TextStyle(color: Colors.black),),
                SizedBox(
                  width: 175,
                  height: 48,
                  child: googleSignInPlugin.renderButton(
                    configuration: html.getGoogleSignInButtonConfigurationDesktop(),
                  ),
                ),
              ],
            ),
          ),
        );
      }
    }
    
    
    
    html_lib.dart:
    
    // ignore: avoid_web_libraries_in_flutter
    /// For web uncomment this
    
    //start_web
    import 'dart:html' as html;
    import 'package:google_sign_in_web/google_sign_in_web.dart';
    import 'package:google_sign_in_platform_interface/google_sign_in_platform_interface.dart';
    
    final html.Window window = html.window;
    final html.HtmlDocument document = html.document;
    final googleSignInPlugin = GoogleSignInPlatform.instance as GoogleSignInPlugin;
    
    class MySanitizer implements html.NodeTreeSanitizer {
      @override
      void sanitizeTree(html.Node node) {}
    }
    
    getGoogleSignInButtonConfiguration(double width) => GSIButtonConfiguration(
      size: GSIButtonSize.medium,
      minimumWidth: width,
    );
    
    getGoogleSignInButtonConfigurationDesktop() => GSIButtonConfiguration(
      size: GSIButtonSize.medium,
      minimumWidth: 164,
      text: GSIButtonText.signinWith,
    );
    
    //end_web
    
    /// For Non-web uncomment this
    
    /*//start_non_web
    dynamic window;
    dynamic document;
    dynamic googleSignInPlugin;
    class Node {}
    class MySanitizer {}
    
    class GoogleSignInPlugin{
    
    }
    
    getGoogleSignInButtonConfiguration(double width) => null;
    
    getGoogleSignInButtonConfigurationDesktop() => null;
    
     *///end_non_web
    
    
    
11. darshankawar

    added

    platform-webWeb applications specificallyWeb applications specifically

    p: google_sign_inThe Google Sign-In pluginThe Google Sign-In plugin

    packageflutter/packages repository. See also p: labels.flutter/packages repository. See also p: labels.

    has reproducible stepsThe issue has been confirmed reproducible and is ready to work onThe issue has been confirmed reproducible and is ready to work on

    found in release: 3.22Found to occur in 3.22Found to occur in 3.22

    on May 31, 2024
12. 13 remaining items

    Load more

13. ditman commented on Jun 4, 2024

    

    ditman

    on Jun 4, 2024

    Member

    More actions

    I suspect the issue is in the users' code, since the button_tester application works just fine. Here's the instructions on how to run it (inside the example of google_sign_in_web):

    • https://github.com/flutter/packages/tree/main/packages/google_sign_in/google_sign_in_web/example#button_testerdart
14. ditman commented on Jun 4, 2024

    

    ditman

    on Jun 4, 2024

    Last edited by ditman

    Member

    More actions

    There's two issues here:

    1. the init method of the plugin needs to have a clientId, either passed to init as a parameter, or in a meta tag (instructions).
    2. The Error that is being printed to the JS Console does not reflect the whole text of the failed assertion, making it harder to come up with a fix. It should say something like:

       ClientID not set. Either set it on a 
       <meta name="google-signin-client_id" content="CLIENT_ID" /> tag,
       or pass clientId when initializing GoogleSignIn
       

       This is the tracking bug in Chrome.

    ---

    A possible fix to the repro case in this test is to do the following:

    - await html.googleSignInPlugin.init();
    + await html.googleSignInPlugin.init(
    +   clientId: 'anything-so-this-is-not-null',
    + );
15. ditman commented on Jun 4, 2024

    

    ditman

    on Jun 4, 2024

    Member

    More actions

    Please @jaydeepkaria-mi, let me know if the explanation above makes sense so we can close this issue!
16. ditman

    added

    waiting for responseThe Flutter team cannot make further progress on this issue until the original reporter respondsThe Flutter team cannot make further progress on this issue until the original reporter responds

    P3Issues that are less important to the Flutter projectIssues that are less important to the Flutter project

    and removed

    P1High-priority issues at the top of the work listHigh-priority issues at the top of the work list

    on Jun 4, 2024
17. jaydeepkaria-mi commented on Jun 5, 2024

    

    jaydeepkaria-mi

    on Jun 5, 2024

    Last edited by jaydeepkaria-mi

    Author

    More actions

    @ditman Thanks, I got your point. You can close the issue :)

    ❤️React with ❤️1Reacted by David Iglesias
18. github-actions

    removed

    waiting for responseThe Flutter team cannot make further progress on this issue until the original reporter respondsThe Flutter team cannot make further progress on this issue until the original reporter responds

    on Jun 5, 2024
19. auto-submit

    added a commit that references this issue on Jun 5, 2024

    [google_sign_in_web] Update button_tester to use web_only library. (#…

    ...

    586faa6
20. ditman commented on Jun 5, 2024

    

    ditman

    on Jun 5, 2024

    Member

    More actions

    Thanks for reporting @jaydeepkaria-mi! Closing!
21. ditman

    closed this as completedon Jun 5, 2024
22. darshankawar

    added

    r: solvedIssue is closed as solvedIssue is closed as solved

    on Jun 7, 2024
23. github-actions commented on Jun 21, 2024

    

    github-actionsbot

    on Jun 21, 2024 – with GitHub Actions

    More actions

    This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.
24. github-actions

    locked as resolved and limited conversation to collaborators on Jun 21, 2024