amplify-flutter icon indicating copy to clipboard operation
amplify-flutter copied to clipboard

Having multiple AuthenticatedView causing "Multiple widgets used the same GlobalKey" error on sign out

Open stephenjen opened this issue 2 years ago • 9 comments

Description

To make a route an Unauthenticated route, I switched from using Authenticator.builder() as the builder to my MaterialApp to using individual AuthenticatedView instead.

So from:

@override
Widget build(BuildContext context) {
  return Authenticator(
    child: MaterialApp(
      builder: Authenticator.builder(),
      initialRoute: '/routeA',
      routes: {
        '/routeA': (context) => const WidgetA(),
        '/routeB': (context) => const WidgetB(),
        '/routeC': (context) => const WidgetC(),
      },
    ),
  );
}

To:

@override
Widget build(BuildContext context) {
  return Authenticator(
    child: MaterialApp(
      initialRoute: '/routeA',
      routes: {
        '/routeA': (context) => const WidgetA(),
        '/routeB': (context) => const AuthenticatedView(child: BottomNavContainer()),
        '/routeC': (context) => const AuthenticatedView(child: WidgetC()),
      },
    ),
  );
}

The initial route is /routeA and now when going from /routeA to /routeB the user is shown the to signin/signup page. Upon signing in, user is shown /routeB and /routeC (/routeB is the Bottom Navigation container that contains /routeC). After signing in, when user signs out I get the following error:

The following assertion was thrown while finalizing the widget tree: Multiple widgets used the same GlobalKey.

The key [LabeledGlobalKey<ScaffoldMessengerState>#5f203] was used by multiple widgets. The parents of those widgets were different widgets that both had the following description: Directionality(textDirection: ltr)

Categories

  • [ ] Analytics
  • [ ] API (REST)
  • [ ] API (GraphQL)
  • [ ] Auth
  • [X] Authenticator
  • [ ] DataStore
  • [ ] Storage

Steps to Reproduce

No response

Screenshots

No response

Platforms

  • [ ] iOS
  • [ ] Android
  • [ ] Web
  • [ ] macOS
  • [ ] Windows
  • [ ] Linux

Android Device/Emulator API Level

No response

Environment

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.3.4, on macOS 13.0 22A380 darwin-arm, locale en-US)
[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 14.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.2)
[✓] VS Code (version 1.70.2)
[✓] Connected device (4 available)
[✓] HTTP Host Availability

• No issues found!

Dependencies

Dart SDK 2.18.2
Flutter SDK 3.3.4
rectangles 0.0.1+1

dependencies:
- amplify_api 0.6.9 [amplify_api_android amplify_api_ios amplify_core amplify_flutter aws_common collection flutter meta plugin_platform_interface]
- amplify_auth_cognito 0.6.9 [amplify_auth_cognito_android amplify_auth_cognito_ios amplify_core aws_common collection flutter meta plugin_platform_interface]
- amplify_authenticator 0.2.3 [amplify_auth_cognito amplify_core amplify_flutter async aws_common collection flutter flutter_localizations intl stream_transform]
- amplify_datastore 0.6.9 [flutter amplify_datastore_plugin_interface amplify_core plugin_platform_interface meta collection async]
- amplify_flutter 0.6.9 [amplify_core amplify_datastore_plugin_interface amplify_flutter_android amplify_flutter_ios aws_common collection flutter meta plugin_platform_interface]
- amplify_storage_s3 0.6.9 [amplify_storage_s3_android amplify_storage_s3_ios amplify_core aws_common flutter meta plugin_platform_interface path_provider path]
- cupertino_icons 1.0.5
- device_calendar 4.2.0 [flutter collection sprintf timezone flutter_native_timezone]
- dropdown_button2 1.8.5 [flutter]
- flutter 0.0.0 [characters collection material_color_utilities meta vector_math sky_engine]
- flutter_native_timezone 2.0.0 [flutter_web_plugins flutter js]
- googleapis 9.2.0 [_discoveryapis_commons http]
- googleapis_auth 1.3.1 [crypto http http_parser]
- image_picker 0.8.6 [flutter image_picker_android image_picker_for_web image_picker_ios image_picker_platform_interface]
- intl 0.17.0 [clock path]
- introduction_screen 3.0.2 [flutter dots_indicator collection]
- modal_bottom_sheet 2.1.2 [flutter]
- package_info_plus 2.0.0 [flutter package_info_plus_platform_interface package_info_plus_linux package_info_plus_macos package_info_plus_windows package_info_plus_web]
- path_provider 2.0.11 [flutter path_provider_android path_provider_ios path_provider_linux path_provider_macos path_provider_platform_interface path_provider_windows]
- percent_indicator 4.2.2 [flutter]
- permission_handler 10.1.0 [flutter meta permission_handler_android permission_handler_apple permission_handler_windows permission_handler_platform_interface]
- rect_getter 1.1.0 [flutter]
- search_page 2.2.0 [flutter]
- settings_ui 2.0.2 [flutter]
- sliding_up_panel 2.0.0+1 [flutter]
- toggle_switch 2.0.1 [flutter]
- url_launcher 6.1.6 [flutter url_launcher_android url_launcher_ios url_launcher_linux url_launcher_macos url_launcher_platform_interface url_launcher_web url_launcher_windows]
- uuid 3.0.6 [crypto]
- video_player 2.4.7 [flutter html video_player_android video_player_avfoundation video_player_platform_interface video_player_web]
- visibility_detector 0.3.3 [flutter]

transitive dependencies:
- _discoveryapis_commons 1.0.3 [http http_parser meta]
- amplify_api_android 0.6.9 [flutter]
- amplify_api_ios 0.6.9 [amplify_core flutter]
- amplify_auth_cognito_android 0.6.9 [flutter]
- amplify_auth_cognito_ios 0.6.9 [amplify_core flutter]
- amplify_core 0.6.9 [aws_common collection flutter intl json_annotation meta plugin_platform_interface uuid]
- amplify_datastore_plugin_interface 0.6.9 [amplify_core collection flutter meta]
- amplify_flutter_android 0.6.9 [flutter]
- amplify_flutter_ios 0.6.9 [amplify_core flutter]
- amplify_storage_s3_android 0.6.9 [flutter]
- amplify_storage_s3_ios 0.6.9 [flutter]
- async 2.9.0 [collection meta]
- aws_common 0.1.1 [async collection http meta stream_transform uuid]
- characters 1.2.1
- clock 1.1.1
- collection 1.16.0
- cross_file 0.3.3+2 [js meta]
- crypto 3.0.2 [typed_data]
- csslib 0.17.2 [source_span]
- dots_indicator 2.1.0 [flutter]
- ffi 2.0.1
- file 6.1.4 [meta path]
- flutter_localizations 0.0.0 [flutter intl characters clock collection material_color_utilities meta path vector_math]
- flutter_plugin_android_lifecycle 2.0.7 [flutter]
- flutter_web_plugins 0.0.0 [flutter js characters collection material_color_utilities meta vector_math]
- html 0.15.0 [csslib source_span]
- http 0.13.5 [async http_parser meta path]
- http_parser 4.0.2 [collection source_span string_scanner typed_data]
- image_picker_android 0.8.5+3 [flutter flutter_plugin_android_lifecycle image_picker_platform_interface]
- image_picker_for_web 2.1.10 [flutter flutter_web_plugins image_picker_platform_interface]
- image_picker_ios 0.8.6+1 [flutter image_picker_platform_interface]
- image_picker_platform_interface 2.6.2 [cross_file flutter http plugin_platform_interface]
- js 0.6.4
- json_annotation 4.7.0 [meta]
- material_color_utilities 0.1.5
- meta 1.8.0
- package_info_plus_linux 2.0.0 [package_info_plus_platform_interface flutter path]
- package_info_plus_macos 2.0.0 [flutter]
- package_info_plus_platform_interface 2.0.0 [flutter meta plugin_platform_interface]
- package_info_plus_web 2.0.0 [flutter flutter_web_plugins http meta package_info_plus_platform_interface]
- package_info_plus_windows 3.0.0 [package_info_plus_platform_interface ffi flutter win32]
- path 1.8.2
- path_provider_android 2.0.20 [flutter path_provider_platform_interface]
- path_provider_ios 2.0.11 [flutter path_provider_platform_interface]
- path_provider_linux 2.1.7 [ffi flutter path path_provider_platform_interface xdg_directories]
- path_provider_macos 2.0.6 [flutter path_provider_platform_interface]
- path_provider_platform_interface 2.0.5 [flutter platform plugin_platform_interface]
- path_provider_windows 2.1.3 [ffi flutter path path_provider_platform_interface win32]
- permission_handler_android 10.2.0 [flutter permission_handler_platform_interface]
- permission_handler_apple 9.0.7 [flutter permission_handler_platform_interface]
- permission_handler_platform_interface 3.9.0 [flutter meta plugin_platform_interface]
- permission_handler_windows 0.1.2 [flutter permission_handler_platform_interface]
- platform 3.1.0
- plugin_platform_interface 2.1.3 [meta]
- process 4.2.4 [file path platform]
- sky_engine 0.0.99
- source_span 1.9.0 [collection path term_glyph]
- sprintf 6.0.2
- stream_transform 2.0.1
- string_scanner 1.1.1 [source_span]
- term_glyph 1.2.1
- timezone 0.8.0 [path]
- typed_data 1.3.1 [collection]
- url_launcher_android 6.0.19 [flutter url_launcher_platform_interface]
- url_launcher_ios 6.0.17 [flutter url_launcher_platform_interface]
- url_launcher_linux 3.0.1 [flutter url_launcher_platform_interface]
- url_launcher_macos 3.0.1 [flutter url_launcher_platform_interface]
- url_launcher_platform_interface 2.1.1 [flutter plugin_platform_interface]
- url_launcher_web 2.0.13 [flutter flutter_web_plugins url_launcher_platform_interface]
- url_launcher_windows 3.0.1 [flutter url_launcher_platform_interface]
- vector_math 2.1.2
- video_player_android 2.3.9 [flutter video_player_platform_interface]
- video_player_avfoundation 2.3.7 [flutter video_player_platform_interface]
- video_player_platform_interface 5.1.4 [flutter plugin_platform_interface]
- video_player_web 2.0.12 [flutter flutter_web_plugins video_player_platform_interface]
- win32 3.0.1 [ffi]
- xdg_directories 0.2.0+2 [meta path process]

Device

iPhone 14 Pro Max simulator

OS

iOS 16.1

Deployment Method

Amplify CLI

CLI Version

10.2.3

Additional Context

No response

Amplify Config

const amplifyconfig = ''' {
    "UserAgent": "aws-amplify-cli/2.0",
    "Version": "1.0",
    "api": {
        "plugins": {
            "awsAPIPlugin": {
                "amplifyDatasourceDev": {
                    "endpointType": "GraphQL",
                    "endpoint": "https://abcdef.appsync-api.ap-northeast-2.amazonaws.com/graphql",
                    "region": "ap-northeast-2",
                    "authorizationType": "AMAZON_COGNITO_USER_POOLS"
                }
            }
        }
    },
    "auth": {
        "plugins": {
            "awsCognitoAuthPlugin": {
                "UserAgent": "aws-amplify-cli/0.1.0",
                "Version": "0.1.0",
                "IdentityManager": {
                    "Default": {}
                },
                "AppSync": {
                    "Default": {
                        "ApiUrl": "https://abcdef.appsync-api.ap-northeast-2.amazonaws.com/graphql",
                        "Region": "ap-northeast-2",
                        "AuthMode": "AMAZON_COGNITO_USER_POOLS",
                        "ClientDatabasePrefix": "amplifyDatasourceDev_AMAZON_COGNITO_USER_POOLS"
                    }
                },
                "CredentialsProvider": {
                    "CognitoIdentity": {
                        "Default": {
                            "PoolId": "ap-northeast-2:efghij",
                            "Region": "ap-northeast-2"
                        }
                    }
                },
                "CognitoUserPool": {
                    "Default": {
                        "PoolId": "ap-northeast-2_abcdef",
                        "AppClientId": "abcdefghijklmn",
                        "Region": "ap-northeast-2"
                    }
                },
                "Auth": {
                    "Default": {
                        "authenticationFlowType": "USER_SRP_AUTH",
                        "socialProviders": [],
                        "usernameAttributes": [
                            "EMAIL",
                            "PHONE_NUMBER"
                        ],
                        "signupAttributes": [
                            "EMAIL"
                        ],
                        "passwordProtectionSettings": {
                            "passwordPolicyMinLength": 8,
                            "passwordPolicyCharacters": []
                        },
                        "mfaConfiguration": "OFF",
                        "mfaTypes": [
                            "SMS"
                        ],
                        "verificationMechanisms": [
                            "EMAIL"
                        ]
                    }
                },
                "S3TransferUtility": {
                    "Default": {
                        "Bucket": "lkjhgfdsa-dev",
                        "Region": "ap-northeast-2"
                    }
                }
            }
        }
    },
    "storage": {
        "plugins": {
            "awsS3StoragePlugin": {
                "bucket": "lkjhgfdsa-dev",
                "region": "ap-northeast-2",
                "defaultAccessLevel": "guest"
            }
        }
    }
}''';

stephenjen avatar Nov 15 '22 09:11 stephenjen

Hello @stephenjen - Thanks for taking the time to open an issue.

I was able to reproduce this issue by doing the following:

  • Use Navigator.of(context).pushNamed() to route to routeB/routeC
  • Sign out from routeC

The cause of this is multiple AuthenticatedView widgets are in the tree, which each display a Form with the same global key. When routeC is pushed on top of routeB, two AuthenticatedView widgets are in the tree. This isn't an issue when signed in, because they just display the child when signed in. When you sign out, both forms are in the tree though.

We are working on improvements to routing with the Authenticator. In the mean time, I wonder if there is a work around for your use case. Here are possible work arounds:

  • Pop() routeC before signing out. If you are using the SignOutButton from the authenticator package, you will need to create your own button that first calls pop() and then calls Amplify.Auth.signOut().
  • Use pushReplacementNamed() instead of pushNamed(). If you replace routeB with routeC, there will not be two nested AuthenticatedView widgets in the tree.

Let me know if these workarounds work for your use case.

Jordan-Nelson avatar Nov 15 '22 17:11 Jordan-Nelson

Hi @Jordan-Nelson ,

Thanks for the quick reply and workaround recommendations. Popping routeC didn't do it for me but pushReplacementNamed did.

Awesome, thank you!

Stephen

stephenjen avatar Nov 16 '22 00:11 stephenjen

Popping the route in a loop, while canPop() is sometimes necessary.

mcku avatar Jan 09 '23 14:01 mcku

The workaround for this issue is to not include your "meat" widget inside the AutheticatedView. Here's a pseudo-code of the solution:

// This is a stub for listening to the Amplify event hub Auth events
if(authStateProvider.isSignedIn()) {
  return _buildAutheticatedWidget();
}
return AutehticatedView(child: Center(child: Text('Logging in...')));

vgribok avatar Mar 03 '23 22:03 vgribok

Is there any update or fix for this ?,
as i'm facing the same issue , i have bottom nav bar bar using the auto_route: ^7.8.3 package with multiple views wrapped with a AuthenticatedView when switching tabs and getting the error

error message 'Duplicate GlobalKey detected in widget tree'

umer786555 avatar Oct 01 '23 10:10 umer786555

Alright, here is my edited message, I was able to fix the issue from ppl's comments (ones before and after me:

                  final navigator = Navigator.of(context);
                  while (navigator.canPop()) {
                    navigator.pop();
                  }
                  GoRouter.of(context).pushReplacement('/');
                  await Amplify.Auth.signOut();
                  ref
                    ..invalidate(authSessionProvider)
                    ..invalidate(scaffoldMessengerKeyProvider)

Basically pop all the navigator stack and go to the root route before the signOut action

pixnbit avatar Oct 01 '23 18:10 pixnbit

I originally had the following which got the errors:

signOff(); Navigator.pushNamedAndRemoveUntil(context, 'onboarding', (Route<dynamic> route) => false);

and recently changed it to which seemed to got rid of the errors:

Navigator.pushNamedAndRemoveUntil(context, 'onboarding', (Route<dynamic> route) => false); signOff();

stephenjen avatar Oct 01 '23 23:10 stephenjen

Sorry, just got this error message again today for some reason, after it working during testing done over multiple days

stephenjen avatar Oct 02 '23 05:10 stephenjen

For anyone facing this issue, please let me know if you are not able to apply one of the following workarounds for your use case. If you are not, please share some details on your use case. Thank you.

  • https://github.com/aws-amplify/amplify-flutter/issues/2362#issuecomment-1315644521
  • https://github.com/aws-amplify/amplify-flutter/issues/2362#issuecomment-1454217997

Jordan-Nelson avatar May 01 '24 17:05 Jordan-Nelson