npm package: @lcbase/social-login
Description: This package is used to handle `Oauth 2.0` login with social network services from client side using `javascript` or `typescript`.
Author: @lcbase
Latest version: 0.5.1

# social-login

This package is used to handle `Oauth 2.0` login with social network services from client side using `javascript` or `typescript`.

It can be used for any front-end framework like `Vanilla`, `React`, `Angular`, `Vue`, `Lit`, `Svelte`...etc.

## Get Started

1. Installation

```sh
# with pnpm
pnpm add @lcbase/social-login

# with npm
npm i @lcbase/social-login

# with yarn
yarn add @lcbase/social-login
```

2. Import and configure component.

```html
<button id="google" part="button">Login with google</button>
<button id="microsoft" part="button">Login with microsoft</button>
<button id="facebook" part="button">Login with facebook</button>
<button id="twitter" part="button">Login with twitter</button>
<button id="naver" part="button">Login with naver</button>
<button id="kakao" part="button">Login with kakao</button>
<button id="tiktok" part="button">Login with tiktok</button>

<script type="module">
  import {
    facebookLoginPopup,
    googleLoginPopup,
    kakaoLoginPopup,
    microsoftLoginPopup,
    naverLoginPopup,
    socialLoginCleanup,
    socialLoginInit,
    tiktokLoginPopup,
    twitterLoginPopup,
  } from '@lcbase/social-login';

  socialLoginInit({
    onSuccess(data) {
      console.log(data);
    },
    onError(error) {
      console.error(error);
    },
  });

  document.getElementById("google").addEventListener("click", () => {
    googleLoginPopup({
      client_id: 'your_google_client_id',
    });
  }, false);

  document.getElementById("microsoft").addEventListener("click", () => {
    microsoftLoginPopup({
        client_id: 'your_microsoft_client_id',
      }).catch(err => console.error(err));
  }, false);
  ...
</script>
```

## How to use

> **Note**:
>
> - Only support [Authorization Code Flow](https://datatracker.ietf.org/doc/html/rfc6749#section-4.1) to get auth `code` and you need a your back-end api to exchange `code` to `access_token`.
> - Only support Login with Popup to improve UX.
> - Currently supports Facebook, Google, Twitter, Microsoft, Tiktok, Kakao, naver as providers (more to come!).

1. Social Login Initialize

- Initialize only once in your app and get data from all providers.

```js
import { socialLoginInit } from '@lcbase/social-login';

socialLoginInit({
  onSuccess(data) {
    console.log(data);
  },
  onError(error) {
    console.error(error);
  },
});
```

> **Note:** If your `redirect_url` is not the same as the URL where `socialLoginInit` is located. Please add `authCallbackHandler` function to your redirect url page.

eg: In `/auth/callback` page

```js
import { authCallbackHandler } from '@lcbase/social-login';

authCallbackHandler();
```

2. Google Login

- Google Parameters [here](https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow#redirecting).

```js
import { googleLoginPopup } from '@lcbase/social-login';

googleLoginPopup(params);
```

3. Microsoft Login

- Microsoft Parameters [here](https://learn.microsoft.com/en-us/azure/active-directory/develop/v2-oauth2-auth-code-flow#request-an-authorization-code).

```js
import { microsoftLoginPopup } from '@lcbase/social-login';

microsoftLoginPopup(params);
```

4. Facebook Login

- Facebook Parameters [here](https://developers.facebook.com/docs/facebook-login/guides/advanced/oidc-token).

```js
import { facebookLoginPopup } from '@lcbase/social-login';

facebookLoginPopup(params);
```

5. Twitter Login

- Twitter Parameters [here](https://developer.twitter.com/en/docs/authentication/oauth-2-0/authorization-code).

```js
import { twitterLoginPopup } from '@lcbase/social-login';

twitterLoginPopup(params);
```

6. Kakao Login

- Kakao Parameters [here](https://developers.kakao.com/docs/latest/en/kakaologin/rest-api#request-code).

```js
import { kakaoLoginPopup } from '@lcbase/social-login';

kakaoLoginPopup(params);
```

7. Naver Login

- Naver Parameters [here](https://developers.naver.com/docs/login/api/api.md#3-1--%EB%84%A4%EC%9D%B4%EB%B2%84-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EC%9D%B8%EC%A6%9D-%EC%9A%94%EC%B2%AD).

```js
import { naverLoginPopup } from '@lcbase/social-login';

naverLoginPopup(params);
```

8. Tiktok Login

- Tiktok Parameters [here](https://developers.tiktok.com/doc/login-kit-web/).

```js
import { tiktokLoginPopup } from '@lcbase/social-login';

tiktokLoginPopup(params);
```

## 📝 License

[MIT](./LICENSE)