[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)
• Auth
• 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
• 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.