Google Sign-In y otros proveedores de autenticación en tu app Flutter con Firebase

La autenticación de usuarios es un aspecto clave en cualquier aplicación moderna, y Firebase Authentication facilita mucho el proceso al ofrecer soporte para múltiples proveedores de inicio de sesión, como Google, Facebook, Twitter, GitHub y más. En este artículo, aprenderás cómo integrar el inicio de sesión de Google (Google Sign-In) en tu aplicación Flutter con Firebase, así como otros proveedores populares.

Google Sign-In ofrece una experiencia de usuario fluida, permitiendo iniciar sesión sin necesidad de recordar una contraseña. ¡Vamos a ello!

🚀 Paso 1: Activar Google Sign-In en Firebase

1. Ve a la consola de Firebase: https://console.firebase.google.com/

2. Selecciona tu proyecto

3. Dirígete a Authentication > Métodos de inicio de sesión

4. Activa el método de inicio de sesión de Google

5. Configura el ID de cliente de OAuth 2.0 (en caso de que no lo tengas)

📦 Paso 2: Agregar las dependencias en pubspec.yaml

Para implementar Google Sign-In, necesitas agregar las siguientes dependencias:

dependencies:
  firebase_core: ^2.25.0
  firebase_auth: ^4.15.0
  google_sign_in: ^5.0.0

Luego ejecuta:

flutter pub get

📱 Paso 3: Configurar Google Sign-In en tu app

Ahora, necesitas configurar el inicio de sesión de Google en tu aplicación. Comienza con la configuración básica de Google Sign-In y Firebase Auth en tu archivo main.dart:

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:google_sign_in/google_sign_in.dart';
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Google Sign-In Flutter',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: SignInScreen(),
    );
  }
}

🧩 Paso 4: Implementar Google Sign-In

Ahora, vamos a implementar el flujo de autenticación de Google:

class SignInScreen extends StatelessWidget {
  final GoogleSignIn googleSignIn = GoogleSignIn();
  final FirebaseAuth auth = FirebaseAuth.instance;
  Future<User?> signInWithGoogle() async {
    final GoogleSignInAccount? googleUser = await googleSignIn.signIn();
    if (googleUser == null) return null; // Usuario canceló el inicio de sesión
    final GoogleSignInAuthentication googleAuth = await googleUser.authentication;
    final OAuthCredential credential = GoogleAuthProvider.credential(
      accessToken: googleAuth.accessToken,
      idToken: googleAuth.idToken,
    );
    // Iniciar sesión con Firebase
    final UserCredential userCredential = await auth.signInWithCredential(credential);
    return userCredential.user;
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Google Sign-In')),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            User? user = await signInWithGoogle();
            if (user != null) {
              ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Bienvenido, ${user.displayName}')));
            }
          },
          child: Text('Iniciar sesión con Google'),
        ),
      ),
    );
  }
}

🎯 Paso 5: Mostrar los datos del usuario

Una vez que el usuario ha iniciado sesión, puedes acceder a la información de su cuenta, como su nombre, correo electrónico y foto de perfil:

if (user != null) {
  print('Nombre: ${user.displayName}');
  print('Correo: ${user.email}');
  print('Foto de perfil: ${user.photoURL}');
}

🔐 Paso 6: Cerrar sesión

Puedes permitir que el usuario cierre sesión de la siguiente manera:

Future<void> signOut() async {
  await googleSignIn.signOut();
  await FirebaseAuth.instance.signOut();
}

🔄 Paso 7: Verificar si el usuario está autenticado

Para mostrar una pantalla diferente a los usuarios autenticados:

Widget build(BuildContext context) {
  return StreamBuilder<User?>(
    stream: FirebaseAuth.instance.authStateChanges(),
    builder: (context, snapshot) {
      if (snapshot.connectionState == ConnectionState.waiting) {
        return CircularProgressIndicator();
      } else if (snapshot.hasData) {
        return HomeScreen();  // Pantalla principal para usuarios autenticados
      } else {
        return SignInScreen();  // Pantalla de inicio de sesión
      }
    },
  );
}

🔧 Paso 8: Agregar otros proveedores de autenticación

Firebase también permite la integración de otros proveedores como Facebook, Twitter, GitHub, etc. La configuración es similar a la de Google Sign-In. Solo debes seguir los mismos pasos que realizamos para Google en la consola de Firebase, y utilizar el paquete correspondiente para cada proveedor, como flutter_facebook_auth o twitter_login.

🎉 Conclusión

Con esta implementación de Google Sign-In, ahora tienes un sistema de autenticación robusto en tu app Flutter, que permite a los usuarios iniciar sesión fácilmente. Firebase Authentication es una excelente opción por su integración sencilla y su capacidad para añadir múltiples proveedores de autenticación en un solo proyecto.