Social Media Login

A comprehensive React component library for easy social media login integration. Supports Facebook, Google, Twitter, GitHub, and LinkedIn authentication.

Features

• 🚀 Easy Integration: Simple setup with minimal configuration
• 🔒 Secure: OAuth 2.0 and OAuth 1.0a flows with proper security measures
• 🎨 Customizable: Fully customizable button styles and text
• 📱 Responsive: Works on all device sizes
• 🔧 Flexible: Use individual components or the unified SocialLogin component
• 📦 Lightweight: No heavy dependencies, only React and PropTypes

Supported Providers

• ✅ Facebook
• ✅ Google
• ✅ Twitter
• ✅ GitHub
• ✅ LinkedIn

Installation

npm install social-media-login

Quick Start

1. Initialize SDKs (Optional)

You can initialize all SDKs at once in your app:

import { initializeSocialSDKs } from "social-media-login";

// Initialize in your app startup
initializeSocialSDKs({
  facebookAppId: "your-facebook-app-id",
  googleClientId: "your-google-client-id",
});

2. Use the Unified Component

import React from "react";
import { SocialLogin, SOCIAL_PROVIDERS } from "social-media-login";

function LoginPage() {
  const handleSuccess = (userData) => {
    console.log("Login successful:", userData);
    // Handle successful login
  };

  const handleError = (error) => {
    console.error("Login failed:", error);
    // Handle login error
  };

  const handleCancel = () => {
    console.log("Login cancelled");
    // Handle login cancellation
  };

  return (
    <div>
      <h1>Login</h1>
      <SocialLogin
        providers={[
          SOCIAL_PROVIDERS.FACEBOOK,
          SOCIAL_PROVIDERS.GOOGLE,
          SOCIAL_PROVIDERS.GITHUB,
        ]}
        config={{
          facebookAppId: "your-facebook-app-id",
          googleClientId: "your-google-client-id",
          githubClientId: "your-github-client-id",
        }}
        onSuccess={handleSuccess}
        onError={handleError}
        onCancel={handleCancel}
      />
    </div>
  );
}

3. Use Individual Components

import React from "react";
import { FacebookLogin, GoogleLogin } from "social-media-login";

function LoginPage() {
  return (
    <div>
      <FacebookLogin
        appId="your-facebook-app-id"
        onSuccess={(userData) => console.log("Facebook login:", userData)}
        onError={(error) => console.error("Facebook error:", error)}
      />

      <GoogleLogin
        clientId="your-google-client-id"
        onSuccess={(userData) => console.log("Google login:", userData)}
        onError={(error) => console.error("Google error:", error)}
      />
    </div>
  );
}

API Reference

SocialLogin Component

The main component that renders multiple social login buttons.

Props

| Prop | Type | Default | Description | | ------------- | --------------- | ------- | ------------------------------------------------ | | providers | Array<string> | [] | Array of provider names to render | | config | Object | {} | Configuration object with app IDs and client IDs | | onSuccess | Function | - | Callback when login is successful | | onError | Function | - | Callback when login fails | | onCancel | Function | - | Callback when user cancels login | | buttonStyle | Object | {} | Custom styles for buttons | | disabled | Boolean | false | Disable all buttons | | autoLoad | Boolean | true | Automatically load SDKs |

Individual Provider Components

Each provider component accepts the following props:

Common Props

| Prop | Type | Default | Description | | ------------- | ---------- | ----------------- | --------------------------------- | | onSuccess | Function | - | Callback when login is successful | | onError | Function | - | Callback when login fails | | onCancel | Function | - | Callback when user cancels login | | buttonText | String | Provider-specific | Custom button text | | buttonStyle | Object | {} | Custom button styles | | disabled | Boolean | false | Disable the button | | autoLoad | Boolean | true | Automatically load SDK |

Provider-Specific Props

FacebookLogin

• appId (required): Facebook App ID
• scope: OAuth scope (default: 'email,public_profile')
• version: Facebook SDK version (default: 'v18.0')

GoogleLogin

• clientId (required): Google Client ID
• scope: OAuth scope (default: 'email profile')

TwitterLogin

• consumerKey (required): Twitter Consumer Key
• consumerSecret (required): Twitter Consumer Secret
• callbackUrl: OAuth callback URL

GithubLogin

• clientId (required): GitHub Client ID
• scope: OAuth scope (default: 'read:user user:email')

LinkedInLogin

• clientId (required): LinkedIn Client ID
• scope: OAuth scope (default: 'r_liteprofile r_emailaddress')

User Data Format

Each provider returns normalized user data in the following format:

Facebook

{
  id: "user-id",
  name: "User Name",
  email: "[email protected]",
  accessToken: "access-token",
  provider: "facebook",
  expiresAt: 1234567890,
  picture: "profile-picture-url"
}

Google

{
  id: "user-id",
  email: "[email protected]",
  name: "User Name",
  firstName: "User",
  lastName: "Name",
  imageUrl: "profile-picture-url",
  accessToken: "access-token",
  provider: "google",
  expiresAt: 1234567890
}

Twitter, GitHub, LinkedIn

{
  oauthToken: "oauth-token", // Twitter only
  oauthVerifier: "oauth-verifier", // Twitter only
  code: "authorization-code", // GitHub & LinkedIn
  state: "state-parameter", // GitHub & LinkedIn
  provider: "provider-name"
}

Setup Instructions

Facebook Setup

1. Go to Facebook Developers
2. Create a new app
3. Add Facebook Login product
4. Get your App ID
5. Configure OAuth redirect URIs

Google Setup

1. Go to Google Cloud Console
2. Create a new project or select existing
3. Enable Google+ API
4. Create OAuth 2.0 credentials
5. Get your Client ID

Twitter Setup

1. Go to Twitter Developer Portal
2. Create a new app
3. Get your Consumer Key and Consumer Secret
4. Configure OAuth callback URLs

GitHub Setup

1. Go to GitHub Developer Settings
2. Create a new OAuth App
3. Get your Client ID
4. Configure Authorization callback URL

LinkedIn Setup

1. Go to LinkedIn Developer Portal
2. Create a new app
3. Get your Client ID
4. Configure OAuth 2.0 redirect URLs

Customization

Custom Button Styles

const customStyle = {
  backgroundColor: "#ff6b6b",
  borderRadius: "25px",
  fontSize: "16px",
  fontWeight: "bold",
  boxShadow: "0 4px 8px rgba(0,0,0,0.1)",
};

<FacebookLogin
  appId="your-app-id"
  buttonStyle={customStyle}
  onSuccess={handleSuccess}
/>;

Custom Button Text

<GoogleLogin
  clientId="your-client-id"
  buttonText="Sign in with Google"
  onSuccess={handleSuccess}
/>

Error Handling

const handleError = (error) => {
  if (error.message.includes("popup_closed")) {
    // User closed the popup
    showMessage("Login cancelled");
  } else if (error.message.includes("access_denied")) {
    // User denied permission
    showMessage("Permission denied");
  } else {
    // Other errors
    showMessage("Login failed. Please try again.");
  }
};

Browser Support

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

If you encounter any issues or have questions, please:

1. Check the documentation
2. Search existing issues
3. Create a new issue with detailed information

Changelog

v1.0.0

• Initial release
• Support for Facebook, Google, Twitter, GitHub, and LinkedIn
• Unified SocialLogin component
• Individual provider components
• Comprehensive error handling
• Customizable styling