SPA(react)でauth0を使う

前回の続き。
https://qiita.com/celeron1ghz/items/2e901694859940615307

Auth0自体は良いサービスですが、かつてのAuth0は割と使うまでのコード数が割とあって、正直手軽ではないなという感じでした。

ですが、auth0-spa-js がそういうものを払拭し、マジ便利＆マジセキュア＆マジ簡単みたいになって、文字通り簡単に認証を追加できるサービスに進化しています。

auth0のセットアップ

前回のtfファイルにてテナントとアプリケーションは作成した後の話。

Twitterでのログイン設定。

• https://developer.twitter.com/ でアプリケーションを作成。
  • Consumer Key と Consumer Secret を取得。Callback URL の設定も忘れずに。

Auth0の設定

• ConnectionタブからTwitterを選択してオンにする。（今回はTwitterを使う）
• Consumer Key と Secret を入れてログインのテスト。
• It works!みたいに言われたらおk！

client側

create-react-app した後に下記内容で src/App.tsx を上書きして npm i @auth0/auth0-spa-js して yarn start すれば多分動く！！

auth0の設定も適宜変えてください。

import React, { useState, useCallback, useMemo } from 'react';
import createAuth0Client from '@auth0/auth0-spa-js';

const AUTH0_DOMAIN          = 'xxxxxxxx.auth0.com';
const AUTH0_CLIENT_ID       = 'xxxxxxxx';
const AUTH0_REDIRECT_URI    = 'https://xxxxxxxx.ngrok.io/callback';
const AUTH0_AUDIENCE        = 'https://api.example.com';

const AUTH0_PARAM = { audience: AUTH0_AUDIENCE };

const App: React.FC = () => {
  const [auth0, setAuth0] = useState<any>();
  const [profile, setProfile] = useState<Object>();
  const [auth0Token, setAuth0Token] = useState<string>();

  const login = useCallback(async function() {
    if (!auth0) return;
    await auth0.loginWithPopup(AUTH0_PARAM);

    const user: Object = await auth0.getUser(AUTH0_PARAM);
    setProfile(user);
  }, [auth0]);

  const logout = useCallback(() => {
    auth0.logout();
  }, [auth0]);

  useMemo(async function(){
    if (!auth0) return;
    try {
      const token: string = await auth0.getTokenSilently(AUTH0_PARAM); 
      setAuth0Token(token);
      console.log(token);

      const user = await auth0.getUser(AUTH0_PARAM); 
      setProfile(user);
    } catch (e) {
      console.log(e);
    }   
  }, [auth0]);

  if (!auth0) {
    createAuth0Client({
      domain:       AUTH0_DOMAIN,
      client_id:    AUTH0_CLIENT_ID,
      redirect_uri: AUTH0_REDIRECT_URI,
      audience:     AUTH0_AUDIENCE,
    }).then(setAuth0);

    return null;
  }

  //console.log(auth0Token);

  return (
    <div>
      {
        profile && <button onClick={logout}>Logout</button>
      }
      {
        !profile && <button onClick={login}>Login</button>
      }
      <div>
        {JSON.stringify(profile)}
      </div>
    </div>
  );
}

export default App;

以前のauth0のチュートリアルと比べても圧倒的に楽になっていて、boilerplateさえ用意してしまえば文字通り秒で認証を使えるようになる感じで非常によいですね！！！

次はAPI GatewayでJWTの検証。

注意点

• callback URLに https じゃなくて http を指定してはまりがちなので注意。
• http://localhost で試した後に https://xxx.ngrok.info を試すと動作がおかしくなる時がある。
  • jwt tokenの取得時の条件にURLを見てる感じで、tokenは取得できても getTokenSilently が動かなくなる時がある（ログインしてリロードすると再度ログインが必要になる）。
  • 開発の時だとAuth0でログインしたアカウントを削除すればOK。基本的にはログインに使用するホストを変えないほうがいいっぽい。