[firebase_auth]: Unable to complete Google OAuth with web WASM about flutterfire

[Rexios80]

The initializeApp call doesn't even work on Flutter stable, and that code has the same issue on Flutter master. Are you sure you ran with WASM using the instructions here: https://docs.flutter.dev/platform-integration/web/wasm#serving-wasm-locally

Or if you are on Flutter master you can run with flutter run -d chrome --wasm

[Lyokone]

Thanks @Rexios80 for your patience, finally reproduced on my end. I was using serve which doesn't seem to serve directly WASM instead of dhttpd.

[Rexios80]

Thanks for looking into it. Flutter WASM definitely has growing pains. I just want to raise awareness of the issues.

[cynthiajoan]

FYI @Rexios80 I marked away your apiKey, please be mindful while posting those in the issues.

[Rexios80]

Meh they're basically public information, I have it heavily restricted, and I have App Check enabled but thanks for looking out for me

[Lyokone]

Hello @Rexios80, I was wondering which commands you are using to get this issue, does it only happen using emulator? I don't see Google Sign In in your dependencies, are you using another way to complete Google OAuth?

[Rexios80]

await FirebaseAuth.instance.signInWithPopup(GoogleAuthProvider());

This happens on a deployed site as well as the emulator. Here is a deployed version of my site with the issue: https://beta.pubstats.dev (make sure to run in chrome or it might not actually be WASM)

The repo for that site is here: https://github.com/Rexios80/pub_stats
Here is the line: https://github.com/Rexios80/pub_stats/blob/bedf51898154e9fe9f63c9dd61db59a049184f72/pub_stats/lib/controller/user_controller.dart#L29

[Lyokone]

Thanks, I'll have another look with what you provided

[Lyokone]

@Rexios80 I've tried with this example

import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';

void main() async {
 WidgetsFlutterBinding.ensureInitialized();
 await Firebase.initializeApp(
     options: const FirebaseOptions(
   apiKey: 'AIzaSyB7wZb2tO1-Fs6GbDADUSTs2Qs3w08Hovw',
   appId: '1:406099696497:web:87e25e51afe982cd3574d0',
   messagingSenderId: '406099696497',
   projectId: 'flutterfire-e2e-tests',
   authDomain: 'flutterfire-e2e-tests.firebaseapp.com',
   databaseURL:
       'https://flutterfire-e2e-tests-default-rtdb.europe-west1.firebasedatabase.app',
   storageBucket: 'flutterfire-e2e-tests.appspot.com',
   measurementId: 'G-JN95N1JV2E',
 ));
 runApp(const MyApp());
}

class MyApp extends StatelessWidget {
 const MyApp({super.key});

 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     title: 'Google Sign In Demo',
     theme: ThemeData(
       primarySwatch: Colors.blue,
     ),
     home: const SignInDemo(),
   );
 }
}

class SignInDemo extends StatefulWidget {
 const SignInDemo({super.key});

 @override
 _SignInDemoState createState() => _SignInDemoState();
}

class _SignInDemoState extends State<SignInDemo> {
 User? _user;

 Future<void> _signInWithGoogle() async {
   final data =
       await FirebaseAuth.instance.signInWithPopup(GoogleAuthProvider());
   print(data);
 }

 Future<void> _signOut() async {
   await FirebaseAuth.instance.signOut();
   setState(() {
     _user = null;
   });
 }

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: const Text('Google Sign In Demo'),
     ),
     body: Center(
       child: _user == null
           ? ElevatedButton(
               onPressed: _signInWithGoogle,
               child: const Text('Sign in with Google'),
             )
           : Column(
               mainAxisAlignment: MainAxisAlignment.center,
               children: [
                 Text('Signed in as ${_user?.displayName}'),
                 ElevatedButton(
                   onPressed: _signOut,
                   child: const Text('Sign out'),
                 ),
               ],
             ),
     ),
   );
 }
}

And I was able to complete the Sign In successfully 🤔 Can you try with my example?

[Lyokone]

Yes

Flutter is already up to date on channel stable
Flutter 3.22.1 • channel stable • https://github.com/flutter/flutter.git
Framework • revision a14f74ff3a (6 days ago) • 2024-05-22 11:08:21 -0500
Engine • revision 55eae6864b
Tools • Dart 3.4.1 • DevTools 2.34.3

flutter build web --wasm
serve build/web

If you say the initializeApp don't work on stable, you probably have an issue with your setup.

[ekasetiawans]

I also facing the issue with latest flutter stable

[Rexios80]

I'm not sure what exactly could be wrong with my setup

Can you confirm that bool.fromEnvironment('FLUTTER_WEB_USE_SKWASM') is true?

[Rexios80]

The initializeApp issue is probably the same as #12623 which I'm not sure has landed in stable

[Lyokone]

I've tried a couple of things, even tried the official google_sign_in package. It wouldn't even render the button to sign in in web 🤔 Not sure how to help you with this issue, I'll raise it internally.