@sasibalaji/react-native-custom-social-login-google v1.0.1

Google Login Integration in React Native

Installation

Run the following commands to install the required dependencies:

npm i @react-native-google-signin/google-signin
npm i @sasibalaji/react-native-custom-social-login-google

Native Configuration Changes

Google Services JSON

1. Create a google-services.json file.
2. Add it inside the android/app/ directory.

Gradle Configuration

Add the following line inside android/app/build.gradle under dependencies:

implementation 'com.google.android.gms:play-services-auth:20.7.0'

Implementation Code

import React from 'react';
import { View, Button, Alert } from 'react-native';
import GoogleLogin from '@sasibalaji/react-native-custom-social-login-google';

const App = () => {
  const handleSuccess = (response) => {
    console.log("Login Success:", response);

    if (response?.type === "success" && response?.data?.user) {
      const { name, email, photo } = response.data.user;
      console.log("User Info:", name, email, photo);
      Alert.alert("Login Successful", `Name: ${name}\nEmail: ${email}`);
    } else {
      console.error("User data is missing in response:", response);
    }
  };

  const handleError = (error) => {
    console.log("Login Failed:", error);
    Alert.alert("Error", "Google login failed");
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <GoogleLogin
        webClientId="YourWebclientId"
        onSuccess={handleSuccess}
        onError={handleError}
      >
        {({ signInWithGoogle }) => (
          <Button title="Sign in with Google" onPress={signInWithGoogle} />
        )}
      </GoogleLogin>
    </View>
  );
};

export default App;

Summary

1. Install the required dependencies.
2. Configure google-services.json in the correct directory.
3. Modify build.gradle to include Google authentication services.
4. Implement the GoogleLogin component with success and error handling.

This setup ensures a seamless Google authentication experience in your React Native app.