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

# はじめに

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

# Auth0登録

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317673/e88384d8-8e2b-cf9a-554f-275e2c448f4d.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317673/8690ccee-b564-4243-d800-a9b81d5e2d4b.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317673/5e51d050-9b82-33e7-d21d-7d9d09bdba18.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317673/613f3f91-9188-60e1-442e-ef809e7f1be4.png)


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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317673/33479ef5-8f2d-ceb0-67b8-a0d56c1b0ac8.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317673/c178dca3-f087-31ad-0c58-b5d055874d57.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317673/129e47e3-5744-8c70-8a73-853e07f987da.png)

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


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317673/03ea7279-b443-c03d-79e2-0508a8197634.png)



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

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


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317673/66450d1e-b94a-a3ec-bc46-ec3101666015.png)

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


「DOWNLOAD SAMPLE APP」をクリック。

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

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

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

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

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

```bash
% 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
```

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

```bash
npm install
```

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

- Allowed Callback URLs
- Allowed Logout URLs

設定後がこんな感じ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317673/9c42f96e-a6e6-93b9-5299-b6c168631af6.png)

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

```
npm start
```

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317673/ce4564b5-653c-350c-535c-720a2fec47ee.png)


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


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317673/3251ed16-2efd-b49d-5e30-0f43b59fdca5.png)


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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317673/f101b3b8-6bbc-b663-2ecc-9012c6507978.png)


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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317673/3f034caa-5cba-bff0-375b-fbe7d25e0ec9.png)

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

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

```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` ファイルを見たらわかった。

```bash
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を作って配布してくれているのですね。なんと親切な...

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

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