react-native-social-login-foodies

A React Native library for social login (Google, Facebook, Apple) with optional Firebase integration.

Features

• 🔐 Google Sign-In
• 📘 Facebook Login
• 🍎 Apple Sign-In
• 🔥 Optional Firebase Integration
• 📱 iOS & Android Support
• 🎨 Customizable Buttons and Icons
• 🌐 TypeScript Support

Installation

npm install react-native-social-login-foodies
# or
yarn add react-native-social-login-foodies

Peer Dependencies

Make sure you have the following dependencies installed:

npm install @react-native-google-signin/google-signin react-native-fbsdk-next @invertase/react-native-apple-authentication @react-native-firebase/app @react-native-firebase/auth

Configuration

1. Firebase Setup (Optional)

• Create a Firebase project at console.firebase.google.com
• Enable Authentication in Firebase Console
• Enable sign-in methods: Google, Facebook, Apple

2. Google Sign-In

iOS

Add your Google Web Client ID to your project:

// In your app configuration
import { GoogleSignin } from "@react-native-google-signin/google-signin";

GoogleSignin.configure({
  webClientId: "YOUR_GOOGLE_WEB_CLIENT_ID",
});

Android

Add your Google Web Client ID to android/app/build.gradle:

defaultConfig {
    manifestPlaceholders = [
        appAuthRedirectScheme: "com.yourapp"
    ]
}

3. Facebook Login

1. Go to Meta for Developers
2. Create an app and add Facebook Login product
3. Configure your app's bundle ID and package name

4. Apple Sign-In

1. Enable "Sign in with Apple" in your Apple Developer account
2. Configure in Firebase Console

Usage

Basic Usage

import React from "react";
import { View } from "react-native";
import {
  SocialLoginProvider,
  SocialLoginContainer,
  SocialProvider,
  UnifiedSocialUser,
} from "react-native-social-login-foodies";

const App = () => {
  const handleSuccess = (user: UnifiedSocialUser) => {
    console.log("Login success:", user);
    // Send user data to your backend
  };

  const handleError = (error: Error, provider: SocialProvider) => {
    console.log("Login error:", error.message);
  };

  return (
    <SocialLoginProvider
      config={{
        googleWebClientId: "YOUR_GOOGLE_WEB_CLIENT_ID",
        useFirebase: true,
      }}
    >
      <SocialLoginContainer onSuccess={handleSuccess} onError={handleError} />
    </SocialLoginProvider>
  );
};

export default App;

Using Individual Buttons

import {
  GoogleLoginButton,
  FacebookLoginButton,
  AppleLoginButton,
  SocialProvider,
  UnifiedSocialUser,
} from "react-native-social-login-foodies";

const LoginScreen = () => {
  const handleSuccess = (user: UnifiedSocialUser) => {
    console.log(user);
  };

  return (
    <View>
      <GoogleLoginButton onSuccess={handleSuccess} />
      <FacebookLoginButton onSuccess={handleSuccess} />
      <AppleLoginButton onSuccess={handleSuccess} />
    </View>
  );
};

Customizing Individual Buttons

import {
  GoogleLoginButton,
  FacebookLoginButton,
  AppleLoginButton,
} from "react-native-social-login-foodies";

const CustomLoginScreen = () => {
  const handleSuccess = (user) => {
    console.log(user);
  };

  return (
    <View>
      <GoogleLoginButton
        onSuccess={handleSuccess}
        disabled={false}
        buttonStyle={{ backgroundColor: "#fff" }}
        icon={require("./custom-google-icon.png")}
      />
      <FacebookLoginButton
        onSuccess={handleSuccess}
        disabled={false}
        buttonStyle={{ backgroundColor: "#fff" }}
      />
      <AppleLoginButton
        onSuccess={handleSuccess}
        disabled={false}
        buttonStyle={{ backgroundColor: "#000" }}
      />
    </View>
  );
};

Using SocialLoginContainer with Custom Options

import {
  SocialLoginProvider,
  SocialLoginContainer,
} from "react-native-social-login-foodies";

const CustomLogin = () => {
  return (
    <SocialLoginProvider config={{ googleWebClientId: "YOUR_CLIENT_ID" }}>
      <SocialLoginContainer
        onSuccess={(user) => console.log(user)}
        onError={(error, provider) => console.log(error)}
        showHeading={true}
        headingText="Sign In to Continue"
        containerStyle={{ padding: 20 }}
        disabledGoogle={false}
        disabledFacebook={false}
        disabledApple={false}
      />
    </SocialLoginProvider>
  );
};

Using useSocialLoginConfig Hook

import {
  useSocialLoginConfig,
  SocialLoginProvider,
} from "react-native-social-login-foodies";

const LoginScreen = () => {
  const { config, setConfig } = useSocialLoginConfig();

  const toggleFirebase = () => {
    setConfig({ useFirebase: !config.useFirebase });
  };

  return (
    <View>
      <Text>Firebase Enabled: {config.useFirebase ? "Yes" : "No"}</Text>
    </View>
  );
};

const App = () => (
  <SocialLoginProvider config={{ useFirebase: true }}>
    <LoginScreen />
  </SocialLoginProvider>
);

API Reference

SocialLoginProvider

| Prop | Type | Description | | ---------- | ------------------- | -------------------- | | config | SocialLoginConfig | Configuration object | | children | ReactNode | Child components |

SocialLoginConfig

| Prop | Type | Required | Description | | ------------------- | --------- | -------- | ---------------------------- | | googleWebClientId | string | No | Google Web Client ID | | appleServiceId | string | No | Apple Service ID | | useFirebase | boolean | No | Use Firebase (default: true) |

SocialLoginContainer

| Prop | Type | Required | Description | | --------------------- | ------------ | -------- | ---------------------------- | | onSuccess | function | Yes | Success callback | | onError | function | Yes | Error callback | | containerStyle | ViewStyle | No | Custom container style | | innerContainerStyle | ViewStyle | No | Custom inner container style | | showHeading | boolean | No | Show heading (default: true) | | headingText | string | No | Custom heading text | | headingTextStyle | ViewStyle | No | Heading text style | | disabledGoogle | boolean | No | Disable Google button | | disabledFacebook | boolean | No | Disable Facebook button | | disabledApple | boolean | No | Disable Apple button | | googleButtonStyle | ViewStyle | No | Google button style | | facebookButtonStyle | ViewStyle | No | Facebook button style | | appleButtonStyle | ViewStyle | No | Apple button style | | googleIcon | any | No | Custom Google icon | | facebookIcon | any | No | Custom Facebook icon | | appleIcon | any | No | Custom Apple icon | | googleIconStyle | ImageStyle | No | Google icon style | | facebookIconStyle | ImageStyle | No | Facebook icon style | | appleIconStyle | ImageStyle | No | Apple icon style |

SocialLoginButton (Base)

| Prop | Type | Required | Description | | ------------- | ------------ | -------- | ------------------- | | onSuccess | function | No | Success callback | | onError | function | No | Error callback | | buttonStyle | ViewStyle | No | Custom button style | | imageStyle | ImageStyle | No | Custom image style | | disabled | boolean | No | Disable the button | | icon | any | No | Custom icon |

UnifiedSocialUser

| Property | Type | Description | | ------------- | ---------------- | --------------------- | | provider | SocialProvider | The login provider | | id | string | User ID from provider | | email | string? | User email | | name | string? | User full name | | firstName | string? | User first name | | lastName | string? | User last name | | photoUrl | string? | Profile photo URL | | accessToken | string? | Access token | | idToken | string? | ID token | | rawData | any | Raw provider response |

SocialProvider (Enum)

| Value | Description | | ---------- | -------------- | | GOOGLE | Google Sign-In | | FACEBOOK | Facebook Login | | APPLE | Apple Sign-In |

useSocialLoginConfig Hook

Returns the current social login configuration and a function to update it.

const { config, setConfig } = useSocialLoginConfig();

| Return Value | Type | Description | | ------------ | ------------------- | ------------------------- | | config | SocialLoginConfig | Current configuration | | setConfig | function | Function to update config |

Error Codes

• signInCancelledByUser - User cancelled the login
• googleSignInFailed - Google sign-in failed
• googlePlayServicesNotAvailable - Google Play Services not available
• facebookSignInFailed - Facebook sign-in failed
• failedFacebookAccessToken - Failed to get Facebook access token
• appleSignInFailed - Apple sign-in failed
• appleSignInAuthFailed - Apple authentication failed
• appleSignInNotConfigured - Apple sign-in not configured

Native Setup

iOS

Run after installation:

cd ios && pod install

Add to Info.plist:

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>fbYOUR_FACEBOOK_APP_ID</string>
    </array>
  </dict>
</array>
<key>LSApplicationQueriesSchemes</key>
<array>
  <string>fbapi</string>
  <string>fb-messenger-share-api</string>
</array>

Android

Add to android/app/build.gradle:

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

Building the Library

# Build TypeScript
npm run build

# Run tests
npm run test

# Lint
npm run lint

License

MIT