Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

communitycreator
android

React Native Firebase authentication for Android Google sign-in

Gautham Vijayan

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.

  1. Add the code below in build.gradle
classpath 'com.google.gms:google-services:4.3.10'

  1. 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'

  1. 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')

  1. Now install the required npm packages from the terminal
npm install --save @react-native-firebase/app @react-native-firebase/auth 

  1. 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

RELATED TAGS

communitycreator
android
RELATED COURSES

View all Courses

Keep Exploring