Auth0でJWTからmetadataを取得する(React HandsOn)

はじめに

Auth０がめちゃめちゃ便利だったので、本格的にプロダクトに適用したいなと思っています。プロダクト適用時にJWTのペイロードを定義できるのか、また値設定が簡単にできるのか？という所が気になり、調査してみました。結論から言って、すごい簡単だったので、記事にしています。こんだけの機能が豊富で無料プランで利用できるのは純粋にすごいなと思っています。

今回やりたいこと

・JWTのペイロードに「アカウントタイプ」、「ユーザID」を含めること
・ユーザ毎にペイロードの値を付与できること

JWTとは？ペイロードとは？

JWTとは？
JWTとは「Json Web Token」のことです。JWTの構造は、ヘッダー情報、ペイロード、署名の3つから成り立っています。
ヘッダー情報はその名の通り、JWTの署名検証を実施するために必要な情報。

ヘッダー情報サンプル

{
  "typ": "JWT",
  "alg": "HS256"
}

ペイロードとは属性情報(Claim)です。下記例のように、アプリケーションで利用する値です。

ペイロードサンプル

{
  "admin": true,
  "name": "John Doe",
}

署名は認証時利用するものです。

署名サンプル

TJVA95OrM7E2cBab30RMHrHDcEfxjoYZgeFONFh7HgQ

今回のチケットでは、ペイロードに「アカウントタイプ」、「ユーザID」が追加することが目的。

ペイロードの定義と値の設定

Auth0にアクセスし、「User Management」の「Users」タブを開く。
Metadataに値を設定する。値はJSON形式で下記のように設定する。

値を設定

{
  "user_id": "db37ab6f-b2cb-d3b1-e867-2638668755c0",
  "user_type": "system_admin"
}

※値の設定画像

アプリケーション実装（React）

事前に作成したReactのアプリケーションを一部修正する。
※https://qiita.com/kouji0705/items/b80f7cc7316324757ee4　に記載しております。

src/App.tsx

import "./App.css";
import { useAuth0 } from "@auth0/auth0-react";

function App() {
  const { isAuthenticated, loginWithRedirect, logout, user } = useAuth0();
  return (
    <div className="App">
      <header className="App-header">
        {!isAuthenticated ? (
          <button onClick={loginWithRedirect}>Log in</button>
        ) : (
          <>
            <button
              onClick={() => {
                logout({ returnTo: window.location.origin });
              }}
            >
              Log out
            </button>
            <div>
             ユーザID:{user!["https://myapp.example.com/user_metadata"].user_id}
            </div>
            <div>
             ユーザタイプ：{user!["https://myapp.example.com/user_metadata"].user_type}
            </div>
          </>
        )}
      </header>
    </div>
  );
}

export default App;

プロジェクト実行

プロジェクト実行後、アプリケーションを開く。
すると、ユーザIDとユーザタイプが表示されていることが分かる。

■参考