@lcbase/social-login

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

# 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.

<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 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.

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

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

authCallbackHandler();

2. Google Login

• Google Parameters here.

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

googleLoginPopup(params);

3. Microsoft Login

• Microsoft Parameters here.

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

microsoftLoginPopup(params);

4. Facebook Login

• Facebook Parameters here.

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

facebookLoginPopup(params);

5. Twitter Login

• Twitter Parameters here.

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

twitterLoginPopup(params);

6. Kakao Login

• Kakao Parameters here.

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

kakaoLoginPopup(params);

7. Naver Login

• Naver Parameters here.

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

naverLoginPopup(params);

8. Tiktok Login

• Tiktok Parameters here.

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

tiktokLoginPopup(params);

📝 License

MIT