Membuat Login Google di Flutter dengan Firebase

Halo semuanya, kembali lagi di sahretech. Pada kesempatann kali ini kita akan belajar cara membuat login google di flutter. Bagaimana caranya?, ayo ikuti pembahasannya di bawah ini.

Membuat Fitur Login dengan Google Login di Flutter

1. Buatlah sebuah project flutter baru. Gunakan flutter versi 3 atau versi flutter yang lebih baru.

2. Hubungkan project firebase dengan project flutter kalian. Kalian bisa mengikuti tutorialnya di link berikut ini. https://www.sahretech.com/2023/10/cara-menghubungkan-flutter-dengan.html. Link ini wajib kalian ikuti agar data dapat disimpan ke firebase.

3. Buka cmd atau terminal lalu masuk ke folder android dan ketik .\gradlew SigInReport maka akan muncul kunci SHA-1 seperti di bawah ini. Copy dan simpan kode tersebut.

Mendapatkan Kunci SHA-1

4. Selanjutnya kita akan menambahkan kunci SHA-1. Kembali lagi ke firebase project, lalu klik icon gear, lalu pilih project settings 

Menambahkan Kunci SHA-1

5. Scroll ke bagian paling bawah halaman lalu klik tombol add fingerprint untuk menambahkan kunci SHA-1. Copy kunci SHA-1 yang sudah didapatkan sebelumnya dan klik save untuk menyimpan.

Menambahkan Kunci SHA-1

6. Klik menu build --> Authentication --> lalu pilih tab sign-in method --> lalu pada additional providers pilih google

Menambahkan Google Providers

7. Klik atau switch enable lalu scroll ke bawah dan klik save --> lalu klik done. Sampai disini semua urusan dengan google firebase sudah selesai. Selanjutnya kita mulai ngoding!.

8. Kembali ke project flutter. Buka file pubspec.yaml lalu tambahkan paket firebase_core: ^2.19.0
dan google_sign_in: seperti gambar di bawah ini. Lalu save file untuk mengunduh paket

9. Buka file main.dart lalu tambahkan script di bawah ini.

// ignore_for_file: prefer_const_constructors, avoid_print, unused_local_variable, prefer_const_literals_to_create_immutables, sized_box_for_whitespace, unused_field, invalid_return_type_for_catch_error

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Google Login',
      home: Scaffold(
        appBar: AppBar(
          title: Center(
            child: Text('Google Login in Flutter'),
          ),
        ),
        body: Container(
          alignment: Alignment.center,
          child: Home(),
        ),
      ),
    );
  }
}

10. Buat file baru dengan nama home.dart di dalam folder lib. Lalu ganti script di bawah ini

// Import library untuk menggunakan Flutter dan Google Sign-In
import 'package:flutter/material.dart';
import 'package:google_sign_in/google_sign_in.dart';

// Definisikan kelas StatefulWidget untuk halaman Home
class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  State<Home> createState() => _HomeState();
}

// Definisikan state untuk halaman Home
class _HomeState extends State<Home> {
  // Inisialisasi objek GoogleSignIn
  final GoogleSignIn _googleSignIn = GoogleSignIn();
  // Deklarasikan variabel untuk menyimpan pengguna saat ini
  GoogleSignInAccount? _currentUser;

  // Definisikan metode untuk login dengan Google
  Future<void> signIn() async {
    try {
      // Cobalah untuk login dengan Google
      final auth = await _googleSignIn.signIn();
      // Periksa apakah pengguna membatalkan proses login
      if (auth == null) {
        // Tampilkan snackbar jika pengguna tidak memilih akun
        SnackBar(content: Text('User Tidak Memilih Akun. Klik tombol login '));
      } else {
        // Perbarui state dengan pengguna saat ini jika login berhasil
        setState(() {
          _currentUser = auth;
        });
      }
    } catch (e) {
      // Cetak pesan error jika login gagal
      print('Error signing in: $e');
    }
  }

  // Definisikan metode untuk logout
  void signOut() async {
    // Putuskan koneksi pengguna saat ini
    final auth = await _googleSignIn.disconnect();

    // Perbarui state dengan pengguna yang terputus
    setState(() {
      _currentUser = auth;
    });
  }

  // Override metode build untuk membuat UI halaman Home
  @override
  Widget build(BuildContext context) {
    // Panggil metode _buildWidget untuk membangun UI
    return _buildWidget();
  }

  // Definisikan metode untuk membangun UI halaman Home
  Widget _buildWidget() {
    // Ambil pengguna saat ini
    GoogleSignInAccount? user = _currentUser;
    
    // Periksa apakah pengguna sudah login
    if (user != null) {
      // Kembalikan kolom dengan informasi pengguna jika sudah login
      return Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            'Berhasil masuk',
            style: TextStyle(fontSize: 20),
          ),
          SizedBox(
            height: 10,
          ),
          Container(
            width: 175,
            height: 175,
            child: ClipRRect(
              borderRadius: BorderRadius.circular(200),
              child: Image.network(
                user.photoUrl ??
                    'https://cdn.pixabay.com/photo/2016/04/24/20/52/laundry-1350593_1280.jpg',
                fit: BoxFit.cover,
              ),
            ),
          ),
          SizedBox(
            height: 10,
          ),
          Text(
            user.displayName!,
            style: TextStyle(fontSize: 20),
          ),
          SizedBox(
            height: 5,
          ),
          Text(
            user.email,
            style: TextStyle(fontSize: 20),
          ),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 40, vertical: 10),
            child: ElevatedButton(
                onPressed: signOut,
                child: Padding(
                  padding: const EdgeInsets.symmetric(vertical: 10),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Icon(
                        Icons.lock,
                        size: 30,
                      ),
                      SizedBox(
                        width: 5,
                      ),
                      Text('Keluar', style: TextStyle(fontSize: 30))
                    ],
                  ),
                )),
          ),
        ],
      );
    } else {
      // Kembalikan kolom untuk login ketika pengguna belum login
      return Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          FlutterLogo(
            size: 250,
          ),
          SizedBox(
            height: 20,
          ),
          Text(
            'Anda belum masuk',
            style: TextStyle(fontSize: 20),
          ),
          SizedBox(
            height: 10,
          ),
          Padding(
            padding: EdgeInsets.symmetric(horizontal: 40, vertical: 10),
            child: ElevatedButton(
              onPressed: signIn,
              child: Padding(
                padding: EdgeInsets.symmetric(vertical: 10),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Icon(
                      Icons.lock,
                      size: 30,
                    ),
                    SizedBox(
                      width: 5,
                    ),
                    Text('Masuk dengan Google', style: TextStyle(fontSize: 20))
                  ],
                ),
              ),
            ),
          ),
        ],
      );
    }
  }
}

11. Semua tahap sudah dikerjakan, sekarang kita bisa melakukan uji coba. Jika hasilnya seperti gambar di bawah ini artinya kalian sudah berhasil

Sekian tutorial tentang membuat login google di flutter semoga bermanfaat. Jika ada pertanyaan, silahkan tanya langsung di kolom komentar di bawah ini. Sekian dan terima kasih.