# react-third-party-login

> React 3rd party login component library

Latest version **1.0.7** (published 2022-02-14) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install react-third-party-login
pnpm add react-third-party-login
yarn add react-third-party-login
bun add react-third-party-login
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.7 |
| Published | 2022-02-14 |
| First published | 2021-08-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 3.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | lovelyhara |

## Links

- npm: https://www.npmjs.com/package/react-third-party-login
- Repository: https://github.com/StyleList94/react-third-party-login
- Homepage: https://github.com/StyleList94/react-third-party-login#readme
- Issues: https://github.com/StyleList94/react-third-party-login/issues
- npm.io page: https://npm.io/package/react-third-party-login

## Recent versions

- 1.0.7 (latest) — 2022-02-14
- 1.0.6 — 2022-02-14
- 1.0.5 — 2021-09-13
- 1.0.4 — 2021-08-21
- 1.0.3 — 2021-08-21
- 1.0.2 — 2021-08-21
- 1.0.1 — 2021-08-21
- 1.0.0 — 2021-08-21

## README

# React Third Party Login

React Thrid Party Login Button Component

## Feature

- Google Sign-In for Websites
- Naver Login
- Kakao Login

## Get Started

At least 16.8 version of `react` must be installed!

```bash
yarn add react-third-party-login

# or npm
npm install react-third-party-login
```

## Usage

### Sign in with Google Button

[Reference Guide](https://developers.google.com/identity/sign-in/web/reference)

```jsx
import { GoogleLoginButton } from 'react-third-party-login';

<GoogleLoginButton
  clientId="your_OAuth_client_id(* Require)"
  cookiepolicy="single_host_origin"
  scope="profile email"
  onSuccessCallback={(googleUser) => {
    const profile = googleUser.getBasicProfile();
    console.log(`Token: ${googleUser.getAuthResponse().id_token}`);
    console.log(`ID: ${profile.getId()}`);
    console.log(`Name: ${profile.getName()}`);
    console.log(`Image URL: ${profile.getImageUrl()}`);
    console.log(`Email: ${profile.getEmail()}`);
  }}
  className="react-third-party-login-button__google"
>
  {/* children(or default styled button) */}
</GoogleLoginButton>;
```

### Naver Login Button

[Reference Guide](https://developers.naver.com/docs/login/api/api.md#%EB%84%A4%EC%9D%B4%EB%B2%84-%EC%95%84%EC%9D%B4%EB%94%94%EB%A1%9C-%EB%A1%9C%EA%B7%B8%EC%9D%B8-api-%EB%AA%85%EC%84%B8)

```jsx
import { NaverLoginButton } from 'react-third-party-login';

<NaverLoginButton
  clientId="your_application_client_id(* Require)"
  redirectUri="redirect_url(* Require)"
  state="state(* Require)"
  isPopupOpen={false}
  popupWindowFeature="width=500, height=700, status"
  className="react-third-party-login-button__naver"
>
  {/* children(or default styled button) */}
</NaverLoginButton>;
```

### Kakao Login Button

[Reference Guide](https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api)

```jsx
import { KakaoLoginButton } from 'react-third-party-login';

<KakaoLoginButton
  clientId="your_application_client_id(* Require)"
  redirectUri="redirect_url(* Require)"
  state="state"
  isPopupOpen={false}
  popupWindowFeature="width=500, height=700, status"
  className="react-third-party-login-button__kakao"
>
  {/* children(or default styled button) */}
</KakaoLoginButton>;
```

---
_Source: https://npm.io/package/react-third-party-login · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._