@hironico/react-social
v1.1.0
Published
Google, Facebook ... OAuth2 using providers identity services SDKs for React
Downloads
6
Maintainers
Readme
@hironico/react-social
@hironico/react-social is a React component library that simplifies the integration of social login buttons for major login providers on the Internet such as Google, Facebook, ...
The goals of this project are :
- speed up the time to implement social login for react apps
- provide a template application as a boilerplate for starting a new project.
Supported login providers
The two major login providers are supported. Howwever, @hironico/react-social is designed to welcome as many provider as needed.
Currently supported providers:
More will be added in the future to cover the majority of desktop and mobile users.
Supported Platforms
Browser
@hironico/react-social supports the latest, stable releases of all major browsers and platforms. IE<=10 is not supported. @hironico/react-social is designed and implemented for use on modern browsers either on desktop or mobile platforms.
| Edge | Firefox | Chrome | Safari | | ---- | ------- | ------ | ------ | | >=14 | >= 45 | >= 49 | >= 10 |
Supported development environment
- Supports React 18 +
- Supports TypeScript
Installation
@hironico/react-social is available as an npm package.
npm install --save @hironico/react-social
or if you prefer Yarn
yarn add @hironico/react-social
Usage
Note: you can support multiple social login providers at the same time ! This allows to link user accounts and their corresponding social profiles in your application.
Sandbox
Checkout the app folder for a sandbox application that demonstrates how to integrate social logins for an app.
You must create a .env file (see .env-sample) that will contain your app IDs for the login providers (Google, Facebook).
Add a context and place login buttons
Create a social login context for your react application in index.tsx file:
...
import { FacebookPublicProfile, FacebookUserToken, GoogleUserProfile, LoginInfo, LoginProvider } from '@hironico/react-social';
...
const defaultLoginInfo: LoginInfo = {
google: null,
googleAccessToken: null,
saveGoogle: (_g: GoogleUserProfile) => {},
saveGoogleAccessToken: (_t: google.accounts.oauth2.TokenResponse) => {},
facebook: null,
facebookAcessToken: null,
saveFacebook: (_fb: FacebookPublicProfile) => {},
saveFacebookAccessToken: (_t: FacebookUserToken) => {}
}
root.render(
<React.StrictMode>
<LoginProvider {...defaultLoginInfo}>
<App />
</LoginProvider>
</React.StrictMode>
);
Then place login buttons somewhere on your welcome or login page that resides within the context tree:
...
<GoogleLoginButton clientId={clientId} errorCallback={errorCallback} buttonConfig={btnConfig} />
<FacebookLoginButton appId={fbAppId} errorCallback={errorCallback} apiVersion="v17.0" />
...
License
@hironico/react-social is MIT licensed. Copyright (c) 2023-present, hironico.net.