React用のソーシャルログインライブラリ（React Social Login）

概要

GoogleやFacebookなどのソーシャルログインを自社のシステムで使うというケース、現在ではけっこう多い気がします。各社にはSDKが用意されているのですが、会社毎にSDKを導入してロジックを組むのも少し面倒な気がします。そんな中でReactでソーシャルログイン用のライブラリを見つけたので紹介します。

ライブラリの内容

今回紹介するライブラリは、React Social Loginです。githubのページにある通り、Facebook, GitHub, Google等々のログインに対応しています。組み込み自体もシンプルに実現できて、用意されたコンポーネントに対してプロバイダーとAppIdを指定すれば、ほぼほぼ実装完了です。

実装サンプル

githubにあるページの内容ほとんどそのままですが、Googleログインを例に実装サンプルをのせます。

まずはライブラリで用意されているクラスでラップするボタン用のコンポーネントを用意します。

SocialButton.js

import React from "react";
import SocialLogin from "react-social-login";

class SocialButton extends React.Component {
  render() {
    return (
      <button onClick={this.props.triggerLogin} {...this.props}>
        {this.props.children}
      </button>
    );
  }
}

export default SocialLogin(SocialButton);

次に実際のプロバイダーとそのプロバイダーで取得したAppIDを指定します。以下はGoogleの例です。

GoogleAuthComponent.js

import React from "react";
import SocialButton from "../SocialButton";

export default function GoogleAuthComponent() {
  
  const handleSocialLogin = (user) => {
    console.log(user);
  };

  const handleSocialLoginFailure = (err) => {
    console.error(err);
  };

  return (
    <div>
      <SocialButton
        provider="google"
        appId={process.env.GOOGLE_LOGIN_APP_ID}
        onLoginSuccess={handleSocialLogin}
        onLoginFailure={handleSocialLoginFailure}
      >
        Googleログイン
      </SocialButton>
    </div>
  );
}

ログインに成功したらuserの情報が取得できるので、後の後続処理は個別に実装していく形になります。