React OAuth2 Social Login

A modern, lightweight React component library for implementing OAuth2 social login buttons (Google, Facebook) with TypeScript support. Zero dependencies, fully customizable, and built with security in mind.

Features

• 🚀 Modern React 18+ and TypeScript support
• 🎨 Customizable button designs following provider guidelines
• 🔒 Secure OAuth2 implementation
• 📦 Tiny bundle size (~5KB minified + gzipped)
• 🌐 Support for multiple providers (Google, Facebook)
• 💫 Built-in loading and error states
• ⚡ Zero external dependencies
• 🔥 Popup-based authentication flow
• 📱 Mobile-responsive design

Installation

# npm
npm install react-oauth2

# yarn
yarn add react-oauth2

# pnpm
pnpm add react-oauth2

Quick Start

import { FacebookOauth2, GoogleOauth2 } from 'react-oauth2';

function App() {
    const handleCallback = (error: Error, response: OAuthResponse) => {
        if (error) {
            // Handle error
            return;
        }
        const {profile} = response;
        // Handle successful login
    };

  return (
    <div>
      <GoogleOauth2
        clientId="your-google-client-id"
        clientSecret="your-google-client-secret"
        redirectUri="http://localhost:3000/auth/google/callback"
        scope={['openid', 'email', 'profile']}
        callback={handleCallback}
      >
        Continue with Google
      </GoogleOauth2>

      <FacebookOauth2
        clientId="your-facebook-client-id"
        clientSecret="your-facebook-client-secret"
        redirectUri="http://localhost:3000/auth/facebook/callback"
        scope="email,public_profile"
        callback={handleCallback}
      >
        Continue with Facebook
      </FacebookOauth2>
    </div>
  );
}

OAuth Provider Setup

Google Setup

1. Go to the Google Cloud Console
2. Create a new project or select an existing one
3. Navigate to APIs & Services > Credentials
4. Click "Create Credentials" > "OAuth 2.0 Client ID"
5. Configure your OAuth consent screen
6. Add authorized redirect URIs
7. Copy your Client ID and Client Secret

Facebook Setup

1. Go to Facebook Developers
2. Create a new app or select an existing one
3. Add the Facebook Login product
4. Configure OAuth settings
5. Add your redirect URI
6. Copy your App ID and App Secret

API Reference

GoogleButton Props

Prop	Type	Required	Description
clientId	string	Yes	Your Google OAuth 2.0 client ID
clientSecret	string	Yes	Your Google OAuth 2.0 client secret
redirectUri	string	Yes	The URI to redirect to after authentication
scope	string[]	No	Array of permission scopes
callback	(error: Error, response: OAuthResponse) => void	Yes	callback
className	string	No	Custom CSS class
style	CSSProperties	No	Custom styles
children	ReactNode	Yes	Button content

FacebookButton Props

Prop	Type	Required	Description
clientId	string	Yes	Your Facebook App ID
clientSecret	string	Yes	Your Facebook App Secret
redirectUri	string	Yes	The URI to redirect to after authentication
scope	string	No	Comma-separated permission scopes
callback	(error: Error, response: OAuthResponse) => void	Yes	callback
className	string	No	Custom CSS class
style	CSSProperties	No	Custom styles
children	ReactNode	Yes	Button content

Advanced Usage

Custom Styling

<GoogleButton
  className="custom-google-button"
  style={{
    backgroundColor: '#4285f4',
    color: 'white',
    padding: '12px 24px',
    borderRadius: '4px',
  }}
>
  <GoogleIcon className="custom-icon" />
  Sign in with Google
</GoogleButton>

Environment Variables

// .env
REACT_APP_GOOGLE_CLIENT_ID=your-google-client-id
REACT_APP_GOOGLE_CLIENT_SECRET=your-google-client-secret
REACT_APP_FACEBOOK_CLIENT_ID=your-facebook-client-id
REACT_APP_FACEBOOK_CLIENT_SECRET=your-facebook-client-secret

TypeScript Usage

import type {OAuthResponse, OAuthError} from 'react-oauth2';

const handleCallback = (error: Error, response: OAuthResponse) => {
    if (error) {
        // Handle error
        return;
    }
    const {profile} = response;
    // Handle successful login
};

Source Code

The full source code for this package is available on GitHub.

Security Considerations

• Never expose your client secrets in client-side code
• Use environment variables for sensitive data
• Implement proper CSRF protection
• Validate OAuth responses on your backend
• Use HTTPS for all OAuth endpoints
• Regularly rotate your client secrets

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• iOS Safari (latest)
• Android Chrome (latest)

Contributing

We welcome contributions! Please see our Contributing Guide for details.

1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Create a Pull Request

License

MIT © maxifjaved

Keywords

react, oauth, oauth2, social-login, google-login, facebook-login, react-component, typescript, authentication, social-authentication, google-oauth, facebook-oauth, react18, social-media-login, oauth2-client, react-oauth, social-signin, google-signin, facebook-signin, react-social-login

---

Made with ❤️ by @maxifjaved