今更ながら Auth0 およびサンプルアプリケーションを触ってみる

はじめに

開発を離れて久しい中、きっかけもあり、今更ながら Auth0 について勉強し始めたので備忘録兼ねてメモ。

Auth0登録

まず無料トライアル経由でやってみる。

最終的な感想として「なんて至れり尽くせりなんだ！」と思いました。

「無料トライアル」ボタンをクリック。

「Google で登録する」をクリック。

「Account Type」で「Other」を選択して「NEXT」ボタンをクリック。

https://github.com/auth0-samples/auth0-express-webapp-sample を使って動作確認しようと思っていたので、以下を指定して「Continue」ボタンをクリック。

• Regular Web App
• Express (JS文字のアイコン)

この画面については一通りデフォルトのまま「Continue」をクリック。
デフォルトで Social Connections の Google がONになっていたのでちょうどいいいのでそのまま継続。

次の画面にて「Try Login」ボタンがあったのでクリック。

まだ自分以外のユーザ作ってないので、「Continue with Google」をしてみる。

こんな画面になったので無事認証できた模様。

ということで「Continue」クリックして次へ。

ここで、サンプルアプリで試してみ？というガイダンスがでてくる。なんと親切な...
(ということは、事前のExpress指定とかはそのためだったのですかね...)

「DOWNLOAD SAMPLE APP」をクリック。

すると 01-login.zip がダウンロードされるので展開してディレクトリに移動。
ここからサンプルアプリでの動作確認に移ります。

サンプルアプリケーションでの動作確認

久しくnode触ってなかったので、nodenvからvoltaに切り替えたのとか忘れていて、そっから思い出しましたわ。

volta自体もバージョン上げたのと、nodeもその時点でのLTSに変更。

(参考) https://zenn.dev/ryuu/scraps/c1b4b0316d9915 など

% volta install node@22.13.0
success: installed and set node@22.13.0 (with npm@10.9.2) as default

% volta list
⚡️ Currently active tools:

    Node: v22.13.0 (default)
    Yarn: v4.2.2 (default)
    Tool binaries available:
        redoc-cli (default)

See options for more detailed reports by running `volta list --help`.

% volta list node
⚡️ Node runtimes in your toolchain:

    v18.17.0
    v21.5.0
    v22.13.0 (default)

% volta pin node@22.13.0
success: pinned node@22.13.0 (with npm@10.9.2) in package.json

ということでパッケージ群をインストール。

npm install

先程の Aut0 側の画面において、「Application Settings」へのリンクがあるのでそれを開き、以下の項目を設定する。

• Allowed Callback URLs
• Allowed Logout URLs

設定後がこんな感じ。

設定が完了したので、サンプルアプリ側起動。

npm start

http://localhost:3000 に接続するとこんな画面になる。

「Login」というリンクをクリックするとこうなる。

「Accept」ボタンをクリック。

認証できたらしいので、「View your profile」のリンクをクリックしてみる。

こんな感じでプロフィールがでてくる。

画面下部のJSON部分はこんな感じ。

{
  "sid": "/********************",",
  "given_name": "Hikita",
  "family_name": "Keiichi",
  "nickname": "***********",
  "name": "Hikita Keiichi",
  "picture": "https://lh3.googleusercontent.com/a/********************",
  "updated_at": "2025-01-08T02:23:31.593Z",
  "email": "**********@gmail.com",
  "email_verified": true,
  "sub": "google-oauth2|/********************","
}

とりあえず最低限の動作確認は取れた。

ただ、終始以下が非常に謎だった。

• なぜアクセスする Auth0 テナントが決まっている？
• Client IDどうやって渡している？

謎の答え

で、それは .env ファイルを見たらわかった。

CLIENT_ID=********************
ISSUER_BASE_URL=https://dev-***********.us.auth0.com
SECRET='a long, randomly-generated string stored in env'
PORT=3000

おそらく「DOWNLOAD SAMPLE APP」をクリックした時点で、これらを埋め込んだzipを作って配布してくれているのですね。なんと親切な...

ということで、一通り謎も解決したので、一旦最低限の動作確認終わり。

これから実際に自分以外のユーザ作って色々試していきます。