Mengintegrasikan Firebase Authentication di React Native: Login dengan Google dan Email

Firebase Authentication menyediakan backend service yang lengkap untuk menangani user authentication tanpa perlu membangun sistem login dari nol. Di React Native, integrasi ini menjadi lebih mudah dengan SDK yang didesain khusus untuk platform mobile.

Setup Firebase Project dan Instalasi Dependencies

Langkah pertama adalah membuat project di Firebase Console. Setelah project aktif, tambahkan aplikasi Android atau iOS dan download konfigurasi file (google-services.json untuk Android atau GoogleService-Info.plist untuk iOS).

Instalasi package yang diperlukan:

npm install @react-native-firebase/app @react-native-firebase/auth
npm install @react-native-google-signin/google-signin

Package @react-native-firebase/app adalah core module yang wajib ada sebelum menggunakan service Firebase lainnya. @react-native-firebase/auth menyediakan API untuk authentication flows. Untuk Google Sign-In, package @react-native-google-signin/google-signin menangani OAuth flow secara native.

Setelah instalasi, konfigurasi native setup diperlukan. Untuk Android, pastikan file google-services.json berada di folder android/app/. Untuk iOS, letakkan GoogleService-Info.plist di folder root project iOS. Jangan lupa menambahkan konfigurasi SHA-1 fingerprint di Firebase Console untuk Android jika menggunakan Google Sign-In.

Mengkonfigurasi Google Sign-In

Google Sign-In memerlukan konfigurasi tambahan di Firebase Console. Aktifkan provider Google di menu Authentication > Sign-in method. Dari sisi aplikasi, konfigurasi dilakukan sebelum melakukan sign-in attempt.

import { GoogleSignin } from '@react-native-google-signin/google-signin';
import auth from '@react-native-firebase/auth';

// Konfigurasi Google Sign-In
GoogleSignin.configure({
  webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
  offlineAccess: true,
});

// Fungsi untuk login dengan Google
async function signInWithGoogle() {
  try {
    await GoogleSignin.hasPlayServices({ showPlayServicesUpdateDialog: true });
    const { idToken } = await GoogleSignin.signIn();
    
    const googleCredential = auth.GoogleAuthProvider.credential(idToken);
    const userCredential = await auth().signInWithCredential(googleCredential);
    
    return userCredential.user;
  } catch (error) {
    console.error('Google Sign-In error:', error);
    throw error;
  }
}

Proses ini bekerja dengan flow OAuth 2.0 yang dimanage oleh Google Sign-In SDK. SDK menangani seluruh proses authorization, termasuk pemilihan account dan permission handling. Setelah user memberikan consent, SDK mengembalikan ID token yang kemudian ditukarkan dengan Firebase credential.

Implementasi Email dan Password Authentication

Firebase Auth menyediakan method sederhana untuk email/password authentication. Flow ini umumnya terdiri dari registrasi user baru dan sign-in untuk user yang sudah terdaftar.

import auth from '@react-native-firebase/auth';

async function registerWithEmail(email, password) {
  try {
    const userCredential = await auth().createUserWithEmailAndPassword(
      email,
      password
    );
    
    await userCredential.user.sendEmailVerification();
    return userCredential.user;
  } catch (error) {
    if (error.code === 'auth/email-already-in-use') {
      throw new Error('Email sudah terdaftar');
    }
    if (error.code === 'auth/invalid-email') {
      throw new Error('Format email tidak valid');
    }
    if (error.code === 'auth/weak-password') {
      throw new Error('Password terlalu lemah, minimal 6 karakter');
    }
    throw error;
  }
}

async function signInWithEmail(email, password) {
  try {
    const userCredential = await auth().signInWithEmailAndPassword(
      email,
      password
    );
    
    if (!userCredential.user.emailVerified) {
      throw new Error('Email belum diverifikasi');
    }
    
    return userCredential.user;
  } catch (error) {
    if (error.code === 'auth/user-not-found') {
      throw new Error('User tidak ditemukan');
    }
    if (error.code === 'auth/wrong-password') {
      throw new Error('Password salah');
    }
    throw error;
  }
}

Method createUserWithEmailAndPassword otomatis membuat user baru di Firebase Authentication. Setelah registrasi berhasil, disarankan untuk mengirim email verifikasi menggunakan sendEmailVerification(). Verifikasi email meningkatkan keamanan dan memastikan user memiliki akses ke email yang didaftarkan.

Mengelola Authentication State

React Native Firebase menyediakan real-time listener untuk memantau perubahan authentication state. Pattern ini penting untuk mengimplementasikan protected routes dan conditional UI rendering.

import { useEffect, useState } from 'react';
import auth from '@react-native-firebase/auth';

function useAuthentication() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const unsubscribe = auth().onAuthStateChanged((currentUser) => {
      setUser(currentUser);
      setLoading(false);
    });

    return unsubscribe;
  }, []);

  return { user, loading };
}

Hook useAuthentication dapat digunakan di root component atau navigation container untuk menentukan tampilan berdasarkan login state. Listener onAuthStateChanged dipicu setiap kali user sign-in, sign-out, atau token di-refresh. Callback ini juga dipanggil secara synchronous saat pertama kali subscribe, sehingga initial state selalu tersedia.

Error Handling dan User Experience

Authentication flows rentan terhadap berbagai error yang perlu ditangani dengan baik untuk user experience yang optimal. Firebase Auth mengembalikan error codes yang spesifik untuk setiap scenario.

Error codes umum untuk Email/Password auth meliputi auth/invalid-email untuk format email salah, auth/user-disabled ketika account dinonaktifkan, auth/user-not-found jika email tidak terdaftar, dan auth/wrong-password ketika password tidak cocok. Untuk registrasi, gunakan auth/email-already-in-use dan auth/weak-password.

Untuk Google Sign-In, perhatikan juga error SIGN_IN_CANCELLED ketika user membatalkan dialog, atau PLAY_SERVICES_NOT_AVAILABLE jika device tidak memiliki Google Play Services. Error handling yang informatif membantu user memahami apa yang salah dan bagaimana memperbaikinya.

Security Best Practices

Keamanan authentication harus menjadi prioritas utama. Beberapa best practices yang perlu diimplementasikan:

Pertama, selalu verifikasi ID token di backend sebelum melakukan operasi sensitif. Firebase ID tokens expire setelah satu jam, sehingga cocok untuk session management yang aman. Gunakan Firebase Admin SDK di server untuk verifikasi token.

Kedua, implementasikan App Check untuk memastikan hanya aplikasi asli yang dapat mengakses Firebase services. App Check menggunakan Device Check di iOS dan SafetyNet di Android untuk verifikasi app integrity.

Ketiga, konfigurasikan authorized domains dan SHA certificates dengan benar. Jangan commit konfigurasi file ke public repository. Gunakan environment variables atau secret management untuk menyimpan sensitive data seperti web client ID.

Keempat, aktifkan multi-factor authentication untuk fitur sensitif. Firebase Auth mendukung MFA melalui SMS atau TOTP authenticator apps. Tambahkan juga Security Rules di Firebase services lain untuk membatasi akses berdasarkan authentication status user.

Kelima, implementasikan rate limiting di sisi client untuk mencegah brute force attack pada sign-in form. Firebase sendiri menerapkan rate limiting di backend, namun menambahkan debounce dan cooldown di sisi aplikasi memberikan layer perlindungan tambahan sekaligus meningkatkan user experience dengan menghindari request yang tidak perlu.

Dengan mengikuti panduan ini, kita dapat mengimplementasikan sistem authentication yang aman dan reliable di aplikasi React Native menggunakan Firebase Authentication.

Mau belajar mobile development secara mendalam dengan project hands-on? Bergabunglah dengan React Native Bootcamp di Rumah Coding. Kurikulum praktis dengan mentorship dari praktisi industri dan sertifikasi yang diakui.