React Social Login Using OAuth 2.0

This npm package provides support for multiple social logins within a React application. It is built using TypeScript and offers React Hooks for seamless integration. Notably, the package is designed to be highly efficient, with tree-shakeable code, zero external dependencies, and a lightweight footprint.

Using this package is straightforward. You simply need to call the appropriate hook for your preferred social media platform, providing the required props along with any additional props that align with your specific needs. This makes it easy to implement social login functionality tailored to your application's requirements.

In ReactJS, our package provides support for the following platforms:

• Facebook
• Google
• Twitter
• LinkedIn
• Snapchat

See Usage and Demo for guidelines.

Table of contents

• Changelog
• Installation
• Overview
• Usage
• Demo
• Props
• Components
• Contribution
• Issues

Changelog

See CHANGELOG.md

Installation

npm install --save @ekaruz/react-social-auth

Overview

Our hooks, such as useTwitterConnection, are activated by destructuring their respective onClick event handlers. When a user clicks the "Sign in with Twitter" button, a popup window will appear, requesting the user's permission. Once the user accepts, the popup window redirects to the user-specified redirectUri. At this point, you gain access to the data you need based on the provided props. You can use react-router-dom or Next.js's file system routing

Usage

First, we create a button and provide required props:

import React, { useState } from 'react';

import { useTwitterConnection } from '@ekaruz/react-social-auth';

function TwitterPage() {
  const { onTwitterConnect, isLoading, twitterData} = useTwitterConnection({ clientId:'texcdfgr',  clientKeys:'gvbhgtyh', redirectUri: REDIRECT_URI, isOnlyGetCode: true });

  return (
    <button disabled={isLoading} onClick={onTwitterConnect}>Sign in with Twitter</button>
  );
}

Important Note: Your client IDs and keys are considered private and confidential information. It is essential to store them as environment variables for security purposes.

It's worth noting that for Twitter integration, your clientKeys consist of a combination of your Client ID and Client Secret separated by a colon : from your developer account. For instance, it should be formatted as clientId:clientSecret.

Then we point redirect_uri to TwitterCallback. You can use react-router-dom or Next.js's file system routing

• react-router-dom:

import React from 'react';
import { TwitterCallback } from '@ekaruz/react-social-auth';
import { BrowserRouter, Route } from 'react-router-dom';

function Demo() {
  return (
    <BrowserRouter>
      <Route exact path="/twitter" component={TwitterCallback} />
    </BrowserRouter>
  );
}

• Next.js's file system routing:

// twitter/page.tsx
import { TwitterCallback } from '@ekaruz/react-social-auth';
export default function TwitterPage() {
  return <TwitterCallback />;
}

Important Note: Callback pages are required only for Twitter, Snapchat, and LinkedIn integrations. For Google, you just have to provide a redirectUri. Additionally, it is crucial that your redirect URLs precisely match the values provided in the respective developer consoles for each platform.

Demo

• In actual usage: https://ekaruz-react-social-oauth.vercel.app/

Props

• useFacebookConnection hook:

| Parameter | value | is required | default value | |--------------|-----------------|-------------|----------------------------| | scope | Array of string | false | ['email','public_profile'] | | responseType | string | false | | | returnScopes | boolean | false | |

• useGoogleConnection hook:

| Parameter | value | is required | default value | |-----------------|-------------------|-------------|---------------| | redirectUri | string | true | | | responseType | 'code' | 'token' | false | 'code' | | state | string | false | '' | | scope | string | false | | | flow | string | false | 'implicit' | | onSuccess | function | true | | | onError | function | false | | | overrideScope | boolean | false | false | | onNonOAuthError | function | false | |

• useTwitterConnection hook:

| Parameter | value | is required | default value | |-------------------|----------|-------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | clientId | string | true | | | clientKeys | string | true | consist of a combination of your Client ID and Client Secret separated by a colon : from your developer account. For instance, it should be formatted as clientId:clientSecret | | redirectUri | string | true | | | state | string | false | A randomly generated string (we recommend keeping the default value). | | scope | string | false | 'users.read%20tweet.read%20offline.access%20tweet.write' (A string containing scopes seperated by %20 (a single space)) | | onResolve | function | false | | | onReject | function | false | | | closePopupMessage | string | false | 'User closed the popup' | | isOnlyGetCode | boolean | false | | | isOnlyGetToken | boolean | false | | | fields | string | false | 'created_at,description,entities,id,location,name,pinned_tweet_id,profile_image_url,protected,public_metrics,url,username,verified,withheld' (A string containing fields seperated by a comma) | | onLoginStart | function | false | |

• useLinkedInConnection hook:

| Parameter | value | is required | default value | |-------------------|-----------------|-------------|-----------------------------------------------------------------------| | clientId | string | true | | | clientSecret | string | true | | | redirectUri | string | true | | | state | string | false | A randomly generated string (we recommend keeping the default value). | | scope | Array of string | true | | | onResolve | function | false | | | onReject | function | false | | | closePopupMessage | string | false | User closed the popup | | isOnlyGetCode | boolean | false | | | isOnlyGetToken | boolean | false | |

• To obtain a personalized app scope for LinkedIn, you should first create a LinkedIn developer account and complete your app setup. Once your setup is complete, navigate to the "Settings" tab, and be sure to send a verification request to your associated LinkedIn page. Then, proceed to the "Products" section and request access to "Sign In with LinkedIn using OpenID Connect." By taking these steps, you will automatically generate OAuth 2.0 scopes for your app under the "Auth" tab.

• useSnapchatConnection hook:

| Parameter | value | is required | default value | |-------------------|-----------------|-------------|---------------------------------------------------------------------------------------------| | clientId | string | true | | | clientSecret | string | true | | | redirectUri | string | true | | | state | string | false | A randomly generated string (we recommend keeping the default value). | | scope | Array of string | false | ['snapchat-marketing-api','snapchat-profile-api'] (we recommend keeping the default value). | | onResolve | function | false | | | onReject | function | false | | | closePopupMessage | string | false | 'User closed the popup' | | isOnlyGetCode | boolean | false | | | isOnlyGetToken | boolean | false | | | onLoginStart | function | false | |

• Our useSnapchatConnection hook requires you create a Snapchat Business marketing account, then create an OAuth App under the business details section, thereafter you are given your Client ID and Client Secret. Do so Here

Components

• FacebookProvider component:

| Parameter | value | is required | default value | |----------------------|-----------|-------------|---------------| | appId | string | true | | | children | ReactNode | true | | | domain | string | false | | | version | string | false | | | cookie | boolean | false | | | status | boolean | false | | | xfbml | boolean | false | | | language | string | false | | | frictionlessRequests | boolean | false | | | debug | boolean | false | | | chatSupport | boolean | false | | | autoLogAppEvents | boolean | false | | | lazy | boolean | false | |

• GoogleOAuthProvider component:

| Parameter | value | is required | default value | |---------------------|-----------|-------------|---------------| | clientId | string | true | | | children | ReactNode | true | | | nonce | string | false | | | onScriptLoadSuccess | function | false | | | onScriptLoadError | function | false | |

• The useFacebookConnection and useGoogleConnection hooks should be employed within their corresponding providers, namely FacebookProvider and GoogleOAuthProvider, respectively.

• TwitterCallback

• LinkedInCallback

• SnapChatCallback

• All Callback components have zero props

Contribution

Clone project, open terminal and type these commands

npm install

npm run start

Issues

Kindly open an issue at https://github.com/nondefyde/react-social-auth/issues. We are here and willing to dedicate our time to assist you.

Contributors ✨

We extend our gratitude to these exceptional individuals:(emoji key):

This project adheres to the allcontributors standard, and we enthusiastically welcome contributions of any nature.