Enable Gmail Authentication in Flutter with Firebase

Discover how to quickly integrate Gmail authentication into your Flutter app using Firebase, simplifying user login and enhancing security. Ready to level up your app’s authentication? Let’s dive in!

Google Firebase Authentication

To authenticate users with a Gmail account in your Flutter app using Firebase Authentication, you can follow these steps:

1. Set up Firebase for your Flutter project:

• Go to the Firebase console (https://console.firebase.google.com/).
• Create a new project or select an existing one.
• Add your Android and iOS apps to the project and follow the instructions to download the google-services.json file for Android and GoogleService-Info.plist file for iOS.

2. Add Firebase Authentication to your Flutter project:

• Add the firebase_auth package to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^1.10.0
  firebase_auth: ^4.4.0

• Run flutter pub get to install the package.

3. Initialize Firebase in your Flutter app:

• Import the required packages and initialize Firebase in your main.dart file:

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Firebase Auth',
      home: SignInScreen(), // Your authentication screen
    );
  }
}

4. Implement Gmail authentication:

• Create a new Dart file for your sign-in screen (sign_in_screen.dart, for example).
• Implement the Gmail sign-in functionality:

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

class SignInScreen extends StatelessWidget {
  final FirebaseAuth _auth = FirebaseAuth.instance;
  final GoogleSignIn googleSignIn = GoogleSignIn();

  Future<UserCredential?> _signInWithGoogle() async {
    try {
      final GoogleSignInAccount? googleSignInAccount = await googleSignIn.signIn();
      final GoogleSignInAuthentication googleSignInAuthentication = await googleSignInAccount!.authentication;

      final AuthCredential credential = GoogleAuthProvider.credential(
        accessToken: googleSignInAuthentication.accessToken,
        idToken: googleSignInAuthentication.idToken,
      );

      return await _auth.signInWithCredential(credential);
    } catch (error) {
      print(error);
      return null;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sign In'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            final UserCredential? userCredential = await _signInWithGoogle();
            // Handle the signed-in user
            if (userCredential != null) {
              // Navigate to the next screen or perform other actions
            }
          },
          child: Text('Sign in with Google'),
        ),
      ),
    );
  }
}

5. Run your Flutter app on an emulator or a physical device and test the Gmail authentication functionality.

Remember to handle error cases appropriately and consider adding user interface improvements such as loading indicators and error messages for a better user experience.