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
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):

Okafor Emmanuel

Walter Ifeakanwa

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