Help with Google Auth in Webview

General
1

I’ve been trying several methods and ways to make my google auth work in flutter webview for my site create using Firebase Studio.Is there any developer who thinks that can help me fix this?

2

Hello! This is a classic (and very frustrating) problem, but I can definitely help.

The issue you’re facing is not with your Firebase Studio site; it’s a specific security policy from Google. For several years, Google has actively blocked all Google Sign-In attempts from standard “WebViews” to protect user security.

When your Flutter app opens your site in a WebView, and your site tries to open the Google Sign-In popup, Google’s servers detect it’s coming from an “untrusted” WebView environment and block it. This is why it fails, and you might see a disallowed_useragent error.

:light_bulb: The Solution: Handle Auth Natively in Flutter

You cannot use the WebView to handle the Google Sign-In flow. Instead, you must handle the authentication natively in your Flutter app and then pass the token to Firebase.

Here is the standard, secure workflow:

  1. Your Flutter App (Not the WebView) triggers the native Google Sign-In.

  2. The user signs in using the native Android/iOS account picker (which is secure).

  3. The Google Sign-In package gives your Flutter app an idToken and accessToken.

  4. You use these tokens to create a Firebase credential.

  5. You sign the user into Firebase Auth natively within your Flutter app.

  6. Now that the user is authenticated in the app, you can load your Firebase Studio site in the WebView. The user will already be signed in.

:hammer_and_wrench: How to Implement This in Flutter

Here are the packages and steps you’ll need:

  1. Add Packages: Add these to your pubspec.yaml:

    YAML

    dependencies:
  firebase_auth: ^4.0.0  # Or latest
  google_sign_in: ^6.0.0 # Or latest

  2. Trigger Native Sign-In: In your Flutter code (e.g., on a “Sign In” button), you’ll call the google_sign_in package, not load the WebView.

  3. Use This Code: Here is a complete function that handles the entire native flow:

    Dart

    import 'package:firebase_auth/firebase_auth.dart';
import 'package:google_sign_in/google_sign_in.dart';

Future<UserCredential?> signInWithGoogle() async {
  try {
    // 1. Trigger the native Google Authentication flow
    final GoogleSignInAccount? googleUser = await GoogleSignIn().signIn();

    if (googleUser == null) {
      // The user canceled the sign-in
      return null;
    }

    // 2. Obtain the auth details from the request
    final GoogleSignInAuthentication googleAuth = await googleUser.authentication;

    // 3. Create a new Firebase credential
    final AuthCredential credential = GoogleAuthProvider.credential(
      accessToken: googleAuth.accessToken,
      idToken: googleAuth.idToken,
    );

    // 4. Once signed in, return the UserCredential
    return await FirebaseAuth.instance.signInWithCredential(credential);

  } catch (e) {
    // Handle error (e.g., user canceled, network error)
    print("Google Sign-In Error: $e");
    return null;
  }
}

// --- Now you can use it ---

// Call this function when your button is pressed
void onLoginButtonPressed() async {
  final userCredential = await signInWithGoogle();

  if (userCredential != null) {
    // SUCCESS!
    // The user is now signed into Firebase in the app.
    // NOW is the time to open your WebView.
    // The website in the WebView will automatically share the
    // authentication state from the app.

    // Example:
    // Navigator.push(context, MaterialPageRoute(
    //   builder: (context) => MyWebViewPage(url: "your-firebase-studio-site.com")
    // ));
  } else {
    // User canceled or an error occurred
  }
}

This is the official, secure, and recommended way to handle Firebase Google Auth in a Flutter app. The key is to authenticate in Flutter first, then show the WebView.