Auth0のポップアップモードをReact.jsから使ってみた

ドキュメントが何処見ていいのやら、わからなかったり、
サンプルソースがなかったり、結構大変だったので此処に記します。

Auth0(SPA)でリフレッシュトークン

リフレッシュトークンを使うには、今までやってきたリダイ
レクトモードではだめなようで。ポップアップモードを使わないといけない。

auth0.com

ソーシャル連携の設定

あなたのfacebookアプリのsecret_keyとapp_idを取得して、Auth0に設定。
あなたのfacebookアプリのリダイレクトＵＲＬをAuth0指定のURLに変更

auth0.com

auth0.com

ＳＰＡのコーディング

class Login extends React.Component {
  showLock () {
    var that = this;
    this.props.lock.show({authParams: {
      scope: 'openid offline_access'
      }},
      function (err, profile, id_token, access_token, state, refresh_token) {
        localStorage.setItem('userToken', id_token)
        localStorage.setItem('refresh_token', refresh_token)
        var jwt = that.props.lock.getClient().decodeJwt(id_token)
        localStorage.setItem('expire', jwt.exp)
        that.props.history.replaceState(null, "/")
    });
  }
  render () {
    return (
    <div>
      <div>
        <span>{this.props.error}</span>
      </div>
      <button onClick={this.showLock.bind(this)} className="btn">Sign In</button>
    </div>);
  }
}