# react-easy-oauth2
> A simple React component to manage your authentication with social networks
Latest version **2.4.8** (published 2023-04-02) · MIT license · 0 weekly downloads
## Install
```sh
npm install react-easy-oauth2
pnpm add react-easy-oauth2
yarn add react-easy-oauth2
bun add react-easy-oauth2
```
## Health
**Score 20/100 (F)** — status: abandoned.
Positive: esm support; no vulnerabilities.
Warnings: low downloads; no types.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 2.4.8 |
| Published | 2023-04-02 |
| First published | 2023-02-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 76.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Mathieu Santiago |
| Maintainers | mathieusantiago21 |
| Keywords | react, npm, package, oauth2, react-component, supabase, supabase-js, supabase-auth, react, google, hooks, login, sso, easy, gSuite, react-native, react-native-web, authauthentication, oauth, openid |
## Links
- npm: https://www.npmjs.com/package/react-easy-oauth2
- npm.io page: https://npm.io/package/react-easy-oauth2
## Alternatives
- [@clerk/clerk-expo](https://npm.io/package/@clerk/clerk-expo.md) — 133.6K weekly downloads
- [@pothos/plugin-authz](https://npm.io/package/@pothos/plugin-authz.md) — 12.4K weekly downloads
- [@bounded-sh/client](https://npm.io/package/@bounded-sh/client.md) — 3.2K weekly downloads
- [@luigi-project/plugin-auth-oauth2](https://npm.io/package/@luigi-project/plugin-auth-oauth2.md) — 2.3K weekly downloads
- [@nocobase/plugin-verification](https://npm.io/package/@nocobase/plugin-verification.md) — 2.0K weekly downloads
## Recent versions
- 2.4.8 (latest) — 2023-04-02
- 2.4.7 — 2023-03-19
- 2.4.6 — 2023-03-03
- 2.4.5 — 2023-03-02
- 2.4.4 — 2023-03-02
- 2.4.3 — 2023-03-02
- 2.4.2 — 2023-02-28
- 2.4.1 — 2023-02-28
- 2.3.3 — 2023-02-27
- 2.3.2 — 2023-02-27
- 2.3.1 — 2023-02-27
- 2.2.3 — 2023-02-27
- 2.2.2 — 2023-02-26
## README
# React Easy oAuth2
[](https://www.npmjs.com/package/react-easy-oauth2)
[](https://badge.fury.io/js/react-easy-oauth2)
[](https://github.com/mathieusantiago/react-easy-oauth2)
A simple React component to manage your authentication with social networks
Demo : [react-easy-oauth2](https://demo-react-easy-oauth2.santiagodevweb.com/ "")
This npm package simplifies authentication with Supabase Auth2, making it easier to connect with popular social media platforms such as Google, GitHub, Facebook, Twitter, and more easy
# SupaBase
this package works with SupaBase ensuring you have an account with a URL and a public api key
Create free account on Supabase https://supabase.com/
Create new project you have 2 free project with a free account
Retrieve your api and URL keys in your project settings on SupaBase
Installation
==============
$ npm install react-easy-oauth2
OR
$ yarn add react-easy-oauth2
# Examples
Here is an example of how to use the React Easy oAuth2 component
first import the react-easy-oauth2 component
```javascript
import { FormConnect } from "react-easy-oauth2";
```
secondly, create a function that will retrieve any errors and data returned by supabase
use the imported FormConnect component by passing it the correct props
```javascript
const catchPayload = (payload) => {
console.log("catchPayload", payload);
};
```
Thirdly, use the imported FormConnect component by passing it the correct props.
```javascript
"}
apiKey={""}
provider={<[Array of provider]>}
catchPayload={catchPayload}
/>
```
list of supported providers
```
['apple','bitbucket', 'discord', 'facebook', 'github', 'gitlab', 'google', 'keycloak', 'linkedin', 'microsoft', 'notion', 'slack', 'spotify', 'twitch', 'twitter', 'workos', 'zoom']
```
To activate the providers you will have to go to Supabase in your project section authentprovider and activate the desired provider by inserting the key of the provider in question
# Create your style
If you wish, it is possible to change the theme of the component by adding CSS attributes in a theme property which is an object that takes several elements
Add to the component ``` ``` the theme property as in the example below and apply your own color theme to the component
```javascript
theme={{
bgComponent :{
"background-color": "blue",
},
textStyle: {
color: "#6b7280",
},
h1Style: {
color: "#6366f1",
},
btnStyle: {
"background-color": "#6366f1",
},
linkStyle: {
color: "#6366f1",
},
}}
```
# Selecte your logo
If you wish, it is possible to change the logo of the component
Add to the component ``` ``` the logo property as in the example below and apply your own logo to the component
```javascript
logo={'https://cdn-icons-png.flaticon.com/512/3387/3387987.png'}
```
# Selecte your langage
If you wish, it is possible to change the langage of the component by adding String('Fr') attributes in a lang property
| code | language |
|:----:| :----: |
| Fr | French |
| Ar | Arabic |
| De | German |
| En | English |
| Es | Spanish |
| It | Italy |
| Ja | Japanese |
| Pt | Poland |
| Ru | Russian |
| Zh | Chinese |
Add to the component ``` ``` the lang property as in the example below and apply your own langage to the component
```javascript
lang={'Fr'}
```
# Selecte your Field
If you wish, it is possible to change the Field of the component by adding array of Field in a Field property
Add to the component ``` ``` the Field property as in the example below and apply your own Field to the component
```javascript
field={['fname','lname', 'email', 'passwd', 'add1', 'add2', 'phone', 'city', 'zip']}
```
# Complete exemple
Here is an example of a complete component with all properties and parameters
```javascript
() => {
const catchPayload = (payload) => {
console.log("catchPayload", payload);
};
return (
);
}
```
# list of propertys
| property | type |default|required/optional|description |
| :--- | :----: | :----:| :----: | :--- |
| url | String || required |The URL of your Supabase project|
| apiKey | String || required |The API key for your Supabase project|
| catchPayload| Function || required |A function that receives data or error|
| provider | Array |empty| optional |The provider for user sign-up.["apple","bitbucket","discord","facebook","github","gitlab","google","keycloak","linkedin","microsoft","notion","slack","spotify","twitch","twitter","workos","zoom",]|
| theme | Object |default theme| optional |An object that contains the styling for the sign-up form|
| field | Array |empty| optional |An array of objects that describe the input fields to render in the sign-up form.['fname','lname', 'email', 'passwd', 'add1', 'add2', 'phone', 'city', 'zip']|
| logo | String |empty| optional |The path to the logo image to display in the sign-up form|
| useDefault | String |signin| optional |A string that determines whether to show the signup/signin form by default.|
| lang | String |En| optional |The language to use for localization of the sign-up form. Fr/Ar/De/En/Es/It/Ja/Pt/Ru/Zh|
# Thank you
I hope this was useful and if you have any question or need help, you can open an issue on GitHub
and the discord where I am very active
GitHub: https://github.com/mathieusantiago/react-easy-oauth2
Discord: https://discord.gg/9EMDFGEs
---
_Source: https://npm.io/package/react-easy-oauth2 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._