React Native Firebase authentication for Android Google sign-in

Overview

In this shot, we’re going to discuss how we can integrate Google authentication in React Native For the Android version of the application.

Installation

Create a new React Native application from your terminal.

npx react-native init authtutorial
cd authtutorial

Go to the Firebase dashboard and create an Android and iOS application named com.authtutorial. We’ll get a file called googleservices.json for Android. We will be needing the file for integrating Firebase services in our React Native application.

Installation for Android

Place the googleservices.json inside the android > app folder. Follow the below steps to initialize the Firebase in the Android version of the application.

Add the code below in build.gradle

classpath 'com.google.gms:google-services:4.3.10'

Add the code below in build.gradle in the application folder, at the top of the app > build.gradle file

apply plugin: 'com.google.gms.google-services'

Add the code below in dependencies in the same file

dependencies {
  // Import the Firebase BoM
  implementation platform('com.google.firebase:firebase-bom:29.0.3')

Now install the required npm packages from the terminal

npm install --save @react-native-firebase/app @react-native-firebase/auth

In App.js, add the code below to integrate mobile authentication into the application

import React, {useState, useEffect} from 'react';
import {SafeAreaView, Text, TouchableOpacity, View} from 'react-native';
import auth from '@react-native-firebase/auth';
import {
  GoogleSignin,
  GoogleSigninButton,
} from '@react-native-google-signin/google-signin';
GoogleSignin.configure({
  webClientId:
    '745305328860-3e60bmsvapbft8kh1dr0vf0u3h2239cp.apps.googleusercontent.com',
});
const App = () => {
  const [user, setUser] = useState(null);
  const onGoogleButtonPress = async () => {
    const {idToken} = await GoogleSignin.signIn();
    const googleCredential = auth.GoogleAuthProvider.credential(idToken);
    return auth().signInWithCredential(googleCredential);
  };
  const onAuthStateChanged = async userAuth => {
    if (!userAuth) {
      return;
    }
    if (userAuth) {
      console.log(userAuth);
      setUser(userAuth);
    }
    return () => userReference();
  };
  useEffect(() => {
    const subscriber = auth().onAuthStateChanged(onAuthStateChanged);
    return () => {
      subscriber;
    };
  }, []);
  const signOut = async () => {
    auth().signOut();
    setUser(null);
    return () => userReference();
  };
  return (
    <SafeAreaView style={{alignItems: 'center', flex: 1, marginTop: 100}}>
      <View style={{margin: 10}}>
        <Text>Google Sign In Tutorial</Text>
      </View>
      <View style={{margin: 10}}>
        {user === null && (
          <GoogleSigninButton
            style={{width: 312, height: 48}}
            size={GoogleSigninButton.Size.Wide}
            color={GoogleSigninButton.Color.Light}
            onPress={onGoogleButtonPress}
          />
        )}
      </View>
      {user !== null && (
        <View style={{margin: 10}}>
          <Text style={{margin: 10}}>{user.displayName}</Text>
          <TouchableOpacity onPress={signOut} style={{alignItems: 'center'}}>
            <Text>Sign Out</Text>
          </TouchableOpacity>
        </View>
      )}
    </SafeAreaView>
  );
};
export default App;

Here, we import the necessary packages required for Google sign-in. The objective is to sign in the user with Google OAuth. So we include a Google “SignIn” button from @react-native-google-signin/google-signin.

We create a function to sign in the user, and when the user is successfully signed in, we need to create a function that listens to the authChanges.

We also create a function that will enable the user to sign out from Google.

Now go to the terminal and run:

npm run android

License: Creative Commons-Attribution-ShareAlike 4.0 (CC-BY-SA 4.0)

Learn in-demand tech skills in half the time

PRODUCTS

Mock Interview

New

Courses

Skill Paths

Projects

Assessments