Cara Membuat Google Sign-in dan Auth pada React Native dan Firebase

Pada saat kita membuat sebuah aplikasi atau startup terutama yang membutuhkan login atau akses pada user tertentu seringkali membuat kita bingung tentang bagaimana cara mengamankan data-data para user pengguna aplikasi kita bukan?. Saya pun merasakannya mulai dari mengamankan password user, data user, dan informasi-informasi penting lainnya, karena  saat kita membuat aplikasi kitalah para developer yang bertanggung atas data-data user tersebut. Oleh karena itulah banyak pembuat aplikasi mulai memanfaatkan fitur Google yaitu OAuth, dimana OAuth sendiri adalah Open Authorization yang artinya protokol yang membagikan informasi-informasi pribadi user seperti yang sudah dilakukan oleh Google dan Facebook, salah satunya adalah kita seringkali melihat login dengan Google atau login dengan Facebook pada suatu aplikasi.

Google Auth React Native

Nah saat ini kita akan membuat seperti itu untuk aplikasi kita, namun sebelumnya saya akan menjelaskan bahwa artikel ini adalah lanjutan dari artikel sebelumnya yaitu tentang Tutorial React Native jika kalian belum membacanya  silahkan klik disini Tutorial React Native

Nah tanpa panjang lebar lagi mari kita langsung membuat OAuth pada project kita sesuai langkah-langkah berikut:

1. Buka project kalian dan ketikan perintah berikut pada Terminal / CMD
   
   npm install @react-native-community/google-signin
2. Setelah itu buka Firebase Console kemudian pilih menu Authentication
   
   

   

   Pilih Authentication
   
   

3. Kemudian akan terlihat tampilan seperti gambar di bawah lalu pilih Siapkan metode masuk
   
   

   

   Pilih siapkan metode masuk

   
   
4. Jika sudah pilih metode masuk yang ingin kalian gunakan, pada kasus ini kita akan menggunakan Google Sign-in karena itu kita memilih Google
   
   

   

   Pilih metode masukan
   
   

5. Kemudian masukan nama project anda yang ingin ditampilkan kepada pengguna aplikasi kita dan masukan juga email untuk project kita, lalu jangan lupa klik aktifkan pada pojok kanan atas
   
   

   

   Gambar konfigurasi OAuth

   
   
6. Kemudian klik simpan, sekarang buka file App.js di project anda dan ketikan kode berikut untuk mengimport package '@react-native-community/google-signin'
   
   import { GoogleSignin, GoogleSigninButton, statusCodes } from '@react-native-community/google-signin';
7. Masih di file App.js tambahkan kode berikut
   
     componentDidMount() {
       GoogleSignin.configure({
         scopes: ['https://www.googleapis.com/auth/drive.readonly'], // what API you want to access on behalf of the user, default is email and profile
         webClientId: '<CLIENT ID>', // client ID of type WEB for your server (needed to verify user ID and offline access)
         offlineAccess: false, // if you want to access Google API on behalf of the user FROM YOUR SERVER
         hostedDomain: '', // specifies a hosted domain restriction
         loginHint: '', // [iOS] The user's ID, or email address, to be prefilled in the authentication UI if possible. [See docs here](https://developers.google.com/identity/sign-in/ios/api/interface_g_i_d_sign_in.html#a0a68c7504c31ab0b728432565f6e33fd)
         forceConsentPrompt: true, // [Android] if you want to show the authorization prompt at each login.
         accountName: '', // [Android] specifies an account name on the device that should be used
         iosClientId: '<FROM DEVELOPER CONSOLE>', // [iOS] optional, if you want to specify the client ID of type iOS (otherwise, it is taken from GoogleService-Info.plist)
       });
     }
   Note : Ganti tulisan yang saya beri warna merah dengan kode yang kita
   dapatkan pada point no 8


8. Sekarang kita buka halaman seperti pada point no 4 dan pilih Konfigurasi Web SDK lalu copy ID Klien Web ke dalam webClientId pada point no 7
   
   

   

   Copy kode ID Klien Web

   
   
9. Sekarang buat fungsi _signIn() dimana fungsi ini berfungsi untuk memproses Authentication Google lalu ketikan kode berikut
   
     _signIn = async () => {
       try {
         await GoogleSignin.hasPlayServices();
         const userInfo = await GoogleSignin.signIn();
       } catch (error) {
         console.log(error.code)
         if (error.code === statusCodes.SIGN_IN_CANCELLED) {
           // user cancelled the login flow
           console.log("Cancelled")
         } else if (error.code === statusCodes.IN_PROGRESS) {
           console.log("In Progress")
           // operation (e.g. sign in) is in progress already
         } else if (error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) {
           console.log("Not Available")
           // play services not available or outdated
         } else {
           console.log(error)
           // some other error happened
         }
       }
     };
10. Jika sudah sekarang ketikan kode berikut pada fungsi render() di file App.js
    
      render() {
        return (
          <>
            <StatusBar barStyle="dark-content" />
            <SafeAreaView>
              <ScrollView
                contentInsetAdjustmentBehavior="automatic"
                style={styles.scrollView}>
                <Text
                  style={{ textAlign: "center", fontSize: 20, fontWeight: "bold" }}
                >Google Auth React Native</Text>
                <View style={styles.btn_view}>
                  <GoogleSigninButton
                    size={GoogleSigninButton.Size.Wide}
                    color={GoogleSigninButton.Color.Dark}
                    onPress={this._signIn}
                    disabled={this.state.isSigninInProgress} />
                </View>
              </ScrollView>
            </SafeAreaView>
          </>
        );
      }
11. Sekarang buka jalankan aplikasi anda maka tampilannya akan seperti gambar dibawah, jika sudah sekarang coba klik tombol Login dengan Google
    
    

    

    Gambar tampilan awal

    
    
12. Kalau sudah berhasil maka akan keluar seperti gambar di bawah, yang artinya aplikasi kita sudah dapat tersambung dengan API Google
    

    

    Gambar jika Auth kita berhasil

    
    
13. Namun setelah kita berhasil menghubungkan API Google maka sekarang kita harus menyimpannya ke firebase kita yaitu dengan menambahkan kode berikut ke dalam file android/app/build.gradle
    
    dependencies {
      // ...
      implementation "com.google.firebase:firebase-auth:17.0.0" // Tambahkan ini 
    }
14. Setelah itu tambahkan juga kode ini ke dalam file android/app/src/main/java/com/namaAplikasi/MainApplication.java
    
    import io.invertase.firebase.auth.RNFirebaseAuthPackage; // Tambahkan ini
    
    public class MainApplication extends Application implements ReactApplication {
        // ...
    
        @Override
        protected List<ReactPackage> getPackages() {
          @SuppressWarnings("UnnecessaryLocalVariable")
          List<ReactPackage> packages = new PackageList(this).getPackages();
          // Packages that cannot be autolinked yet can be added manually here, for example:
          // packages.add(new MyReactNativePackage());
          packages.add(new RNFirebaseAuthPackage()); // Tambahkan ini
          return packages;
        }
      };
      // ...
    }
15. Setelah itu ganti kode di file App.js pada point no 9 dengan kode berikut
    
    _signIn = async () => {
        try {
          await GoogleSignin.hasPlayServices();
          const userInfo = await GoogleSignin.signIn();
          const credential = firebase.auth.GoogleAuthProvider.credential(userInfo.idToken, userInfo.accessToken)
          const firebaseUserCredential = await firebase.auth().signInWithCredential(credential)
        } catch (error) {
          console.log(error.code)
          if (error.code === statusCodes.SIGN_IN_CANCELLED) {
            // user cancelled the login flow
            console.log("Cancelled")
          } else if (error.code === statusCodes.IN_PROGRESS) {
            console.log("In Progress")
            // operation (e.g. sign in) is in progress already
          } else if (error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) {
            console.log("Not Available")
            // play services not available or outdated
          } else {
            console.log(error)
            // some other error happened
          }
        }
      };
    Note : Dapat dilihat bahwa di sana saya menambahkan variabel credential dan firebaseUserCredential dimana credential sendiri berfungsi untuk mendapatkan idToken dan  accessToken dari akun yang kita masukan lalu firebaseUserCredential sendiri berfungsi untuk menambahkan akun berupa credential yang sudah kita dapatkan pada variabel credential 
    
    Baca Juga : Cara Setting Koneksi Firebase ke React Native


16. Setelah selesai sekarang coba buka aplikasi anda lagi dan login maka user baru akan terdaftar pada firebase anda seperti gambar berikut
    
    

    

    Pada gambar di atas terlihat
    bahwa akun kita berhasil ditambahkan ke firebase

    
    Note: Jika tidak bisa silahkan hapus lagi aplikasi anda lalu install lagi  

Nah itulah tadi "Cara Membuat Google Sign-in dan Auth pada React Native dan Firebase" jika ada yang masih kurang paham silahkan tanya pada kolom komentar di bawah

Akhir kata dari saya, selamat belajar dan mencoba 😁