[Flutter] [Auth with 3rd party] Sign-in with Google button not working in prod but works in debug mode

[aalloul]

Description

Hey there,

I have been fighting with this for some time now and I'm really stuck. I would really appreciate some help. Here's what's happening...

I developed a Flutter web app and for the authentication I'm using the hosted WebUI. I defined 2 authentication methods: email + password AND Signin with Google.

When working in local, it all works great... however, if I create the release version the Google Signin button just doesn't do anything. Nothing happens when I click it, no message on the console....nothing. I tried with different browsers and it was the same.

Categories

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

Steps to Reproduce

This is my amplify/auth/resource.ts

import { defineAuth, secret } from '@aws-amplify/backend';

/**
 * Define and configure your auth resource
 * @see https://docs.amplify.aws/gen2/build-a-backend/auth
 */
export const auth = defineAuth({
  loginWith: {
    email: true,
    externalProviders: {
        google: {
            clientId: secret('GOOGLE_CLIENT_ID'),
            clientSecret: secret('GOOGLE_CLIENT_SECRET'),
            scopes: ['email']
        },
        callbackUrls: [
            'http://localhost:59816/main',
            'my_actual_domain/main',
        ],
        logoutUrls: ['http://localhost:3000/', 'my_actual_domain/'],
        }
    }
});

This is how I set up my configureAmplify method

Future<void> configureAmplify() async {
  try {
    final auth = AmplifyAuthCognito();
    final storage = AmplifyStorageS3();
    final analytics = AmplifyAnalyticsPinpoint();

    final api = AmplifyAPI(
        options: APIPluginOptions(modelProvider: ModelProvider.instance));
    await Amplify.addPlugins([auth, storage, api, analytics]);

    await Amplify.configure(amplifyConfig);
    safePrint('Successfully configured');
  } on Exception catch (e) {
    safePrint('Error configuring Amplify: $e');
  }
}

my main.dart has the following

class MyApp extends StatelessWidget {
  final ThemeData theme;

  const MyApp({Key? key, required this.theme}) : super(key: key);

  static final _router = GoRouter(
    routes: [
      GoRoute(
        path: '/',
        builder: (context, state) => IntroductionScreen(),
      ),
      GoRoute(
        path: '/main',
        builder: (context, state) =>
            const AuthenticatedView(child: MainScreen()),
      )
    ],
  );

  @override
  Widget build(BuildContext context) {
    const stringResolver = AuthStringResolver(
        buttons: LocalizedButtonResolver(), inputs: LocalizedInputResolver());
    // TODO check why going to a page straight with its path doesn't work
    return Authenticator(
        stringResolver: stringResolver,
        child: MaterialApp.router(
          localizationsDelegates: AppLocalizations.localizationsDelegates,
          supportedLocales: AppLocalizations.supportedLocales,
          title: "xxx",
          theme: theme,
          routerConfig: _router,
        ));
  }

}

For the production build, I have this amplify.yml file

version: 1
backend:
  phases:
      build:
          commands:
            - 'npm ci --cache .npm --prefer-offline'
            - 'npx ampx pipeline-deploy --branch $AWS_BRANCH --app-id $AWS_APP_ID'
            - 'npx ampx generate outputs --format dart --outputs-version 1 --out-dir lib --branch $AWS_BRANCH --app-id $AWS_APP_ID'
            - 'npx ampx generate graphql-client-code --format modelgen --model-target dart --out lib/models --branch $AWS_BRANCH --app-id $AWS_APP_ID'
  cache:
    paths:
      - .npm/**/*
      - node_modules/**/*
frontend:
  phases:
    preBuild:
      commands:
        - 'git clone https://github.com/flutter/flutter.git -b 3.22.3 --depth 1'
        - 'npx ampx generate outputs --format dart --outputs-version 1 --out-dir lib --branch $AWS_BRANCH --app-id $AWS_APP_ID'
    build:
      commands:
        - ./flutter/bin/flutter pub get
        - ./flutter/bin/flutter build web --release --web-renderer canvaskit --no-tree-shake-icons
  artifacts:
    baseDirectory: build/web/
    files:
      - '**/*'

and I have made sure the secrets for Google are well defined.

The relevant part of pubspec.yaml is

  amplify_flutter: ^2.3.0
  amplify_auth_cognito: ^2.3.0
  amplify_api: ^2.3.0
  amplify_authenticator: ^2.1.0
  amplify_storage_s3: ^2.3.0
  amplify_analytics_pinpoint: ^2.3.0
  amplify_core: ^2.3.0

Update July 31st: I tried to run in debug mode (launch from the Run button of Android Studio) with the amplify_outputs.dart from production. It worked! No bugs, no nothing.... so I must be missing something when deploying to production and I'm not sure what.

Screenshots

No response

Platforms

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

Flutter Version

3.22.3

Amplify Flutter Version

2.3.0

Deployment Method

Amplify CLI

Schema

No response

[Equartey]

Hi @aalloul, sorry to hear you've ran into this issue on production builds. We'll investigate this and give you an update when we can.

[aalloul]

Thanks @Equartey , looking forward to hearing from you! FYI, I have updated the original text with some findings that can be useful.

[NikaHsn]

@aalloul thanks for the update. we will look into this issue and get back to you with any updates.

[wxxedu]

Any updates? I seem to encounter similar problems.

[tyllark]

@wxxedu Unfortunately we do not have any updates at this time, we are looking into reproducing the issue.

[aalloul]

@tyllark any chance with reproducing the issue?

[tyllark]

Hello @aalloul we don't have any updates at this time. I just increased the priority of this issue so we investigate it sooner.

[ekjotmultani]

Hi @aalloul, I have attempted to reproduce this but I have been unable to, google and other external identity providers seem to work fine when I deploy a sample application to a production environment. Have you ensured that the 'Authorized redirect URIs' are configured correctly in the gcp API credential console? I don't see a problem with the build script you provided so I wonder why you are facing this issue.

@wxxedu could you share more about how you are deploying to a production environment in your case as well so that we can get some more data points and hopefully solve this.

[wxxedu]

Oh I think I have found out why. Previously for me, the redirect url was not correct. I set it to localhost or my company's url, but they do not work on mobile. Instead, I set it to "app_bundle_name://", and it worked.

[ekjotmultani]

I see @wxxedu , thanks for that info, its a good call for any future developers looking through this issue! Unfortunately it doesn't seem like this will be the case for the initial issue since the problem seems to be with web deployment

[aalloul]

Hello, sorry for the long time it took me to get back to you. I think I did the configuration correctly but I was just trying to figure that out by redeploying and now I'm facing other errors in the deployment script either due to the long time without activity or something else. In any case, I won't waste more of your time and will close this request.

[github-actions[bot]]

This issue is now closed. Comments on closed issues are hard for our team to see. If you need more assistance, please open a new issue that references this one.