react-native-custom-social-login

A React Native package for implementing Google, LinkedIn, GitHub, and Microsoft social logins.

Installation

Run the following command to install the main package:

npm i react-native-custom-social-login

Additionally, install the dependencies required for each social login provider:

Google Login

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

LinkedIn Login

npm i @sasibalaji/react-native-custom-social-login-linkedin  
npm i @react-native-firebase/auth  
npm i @react-native-firebase/app  

GitHub Login

npm i @sasibalaji/react-native-custom-social-login-github  

Microsoft Login

npm i react-native-azure-auth  
npm i @react-native-async-storage/async-storage  
npm i @sasibalaji/react-native-custom-social-login-microsoft  

Native Configuration Changes

Google Login Configuration

Google Services JSON:

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

Modify android/app/build.gradle

Add the following line under dependencies:

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

Microsoft Login Configuration

Modify android/app/build.gradle

Add the following inside dependencies:

implementation 'androidx.versionedparcelable:versionedparcelable:1.1.1'

Modify AndroidManifest.xml

Inside the <activity> section, add the following intent-filter:

<intent-filter>
  <action android:name="android.intent.action.VIEW" />
  <category android:name="android.intent.category.DEFAULT" />
  <category android:name="android.intent.category.BROWSABLE" />
  <data android:scheme="com.sociallogin" />
</intent-filter>

Replace com.sociallogin with your actual app scheme.

Usage

Import the Package

import { GoogleLogin, LinkedInLogin, GitHubLogin, MicrosoftLogin } from 'react-native-custom-social-login';

Google Login Implementation

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

const App = () => {
  const handleSuccess = (response) => {
    console.log("Google Login Success:", response);
    if (response?.type === "success" && response?.data?.user) {
      const { name, email } = response.data.user;
      Alert.alert("Login Successful", `Name: ${name}\nEmail: ${email}`);
    }
  };

  const handleError = () => {
    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;

LinkedIn Login Implementation

import React from 'react';
import { Button } from 'react-native';
import { LinkedInLogin } from 'react-native-custom-social-login';

const App = () => {
  return (
    <LinkedInLogin
      clientId="your_client_id"
      clientSecret="your_client_secret"
      redirectUri="your_redirect_uri"
      onSuccess={({ user, accessToken }) => console.log(user, accessToken)}
      onError={(error) => console.error(error)}
    >
      {({ signInWithLinkedIn }) => (
        <Button title="Login with LinkedIn" onPress={signInWithLinkedIn} />
      )}
    </LinkedInLogin>
  );
};

export default App;

GitHub Login Implementation

import React from "react";
import { View, Button } from "react-native";
import { GitHubLogin } from "react-native-custom-social-login";

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

  const handleError = (error) => {
    console.error("GitHub Login Error:", error);
  };

  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <GitHubLogin
        clientId="your_github_client_id"
        clientSecret="your_github_client_secret"
        redirectUri="your_redirect_uri"
        onSuccess={handleSuccess}
        onError={handleError}
      >
        {({ signInWithGitHub }) => (
          <Button title="Login with GitHub" onPress={signInWithGitHub} />
        )}
      </GitHubLogin>
    </View>
  );
};

export default App;

Microsoft Login Implementation

import React from "react";
import { View, Button } from "react-native";
import { MicrosoftLogin } from "react-native-custom-social-login";

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

  const handleError = (error) => {
    console.error("Microsoft Login Error:", error);
  };

  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <MicrosoftLogin
        clientId="your_microsoft_client_id"
        redirectUri="your_redirect_uri"
        onSuccess={handleSuccess}
        onError={handleError}
      >
        {({ signInWithMicrosoft }) => (
          <Button title="Login with Microsoft" onPress={signInWithMicrosoft} />
        )}
      </MicrosoftLogin>
    </View>
  );
};

export default App;

Summary

✅ Complete setup for Google, LinkedIn, GitHub, and Microsoft logins in React Native. ✅ Installation and native configurations for each provider. ✅ Fully functional implementation code for all login methods. ✅ Handles success and error callbacks properly.

This guide ensures smooth social login integration in your React Native project. 🚀