Auth0 で認証する SPA を作ってみる

# はじめに

ここ数回の記事で、Auth0 を使用したAPIを作って (作ったと言えるようなこともしてないけど) 遊んでいましたが、今回は Auth0 で認証する SPA を作ってみます。
ほぼ Auth0 のテンプレを使うだけで、基本を覚えていこうと思って書いてますので、特別なことはしていません。(備忘録観点が大きい)

# SPA の作成

ここ数回の記事通り、Auth0 ダッシュボードにログインし、「Applications > Applications」 と選択。
「Create Application」ボタンをクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317673/ad6217bd-2b92-4e5a-5c70-cc2e59d515a1.png)


Name に今回は `Auth0 Practice SPA` と入力。
その下部の「Choose an application type」にて「Single Page Web Applications」を選択し「Create」ボタンをクリック。

画面が以下のようになる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317673/8fa7b82e-a525-95d1-d63e-5ed30f0d4d13.png)

どのフレームワークで SPA 作るかを選べるのか...
一番理解のある Vue を選択。

# サンプルアプリケーションのダウンロード

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317673/43fe8fcd-08c5-a2e4-b823-cfb3ee37f26f.png)

ここで「DOWNLOAD SAMPLE」をクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317673/0b7fcb7e-9994-9ac9-3374-91966344bfbd.png)

上記のモーダルが表示され、そこに動かし方がでている。

「DOWNLOAD」ボタンをクリックすると、 `vuejs-01-login.zip` がダウンロードされる。
これをどこかに展開。

`01-login` という名前のフォルダに展開されるが、前回までのフォルダ名とかぶるので `vuejs-01-login` にリネームしておく。

その上で以下を実施。

```bash
cd /path/to/vuejs-01-login
volta pin node@20.2.0
npm install
```

# アプリケーション側の設定

先程表示されていた動かし方に書かれている通り、 Callback URL 等を設定していく。


Auth0 ダッシュボードで、「Applications > Applications > Auth0 Practice SPA」を選択。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317673/7e9dbffa-a86a-80bd-0ff5-58a01cd433ca.png)


以下の3項目に `http://localhost:3000` を記入して「Save Changes」をクリック。

1. Allowed Callback URLs
2. Allowed Logout URLs
3. Allowed Web Origins

# サンプルアプリケーションの起動とログイン確認

以下で SPA 起動。

```bash
cd /path/to/vuejs-01-login
npm run serve
```

こんな表示が出れば起動完了。

```bash
  vite v2.9.18 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 1189ms.
```

ブラウザで `http://localhost:3000` に接続

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317673/0ac38fe2-a8b1-a565-8905-48cece6026f8.png)

こんな画面になるので、右上の「Login」ボタンをクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317673/a6660f9f-56f0-1316-d630-c0681acbf071.png)

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


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317673/14998d1d-ef0d-ee9e-fbc6-d1cdd017e5ff.png)

無事ログインができたらしい。

# 実際の認証部分を見てみる。

実際に認証を行っているのはここだと思われる。
実は `Vue.js` を直接使ったことがなく、 `Nuxt` 経由で使っていた人なので、この手のミドルウェアは `app.use` ってイメージがなかったりする。 (のは個人的な無知なだけかも)

```javascript:vuejs-01-login/src/main.ts
import App from "./App.vue";
import { createApp } from "vue";
import { createRouter } from "./router";
import { createAuth0 } from "@auth0/auth0-vue";
import { library } from "@fortawesome/fontawesome-svg-core";
import { faLink, faUser, faPowerOff } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import authConfig from "../auth_config.json";
import hljs from 'highlight.js/lib/core';
import json from 'highlight.js/lib/languages/json';
import hljsVuePlugin from "@highlightjs/vue-plugin";
import "highlight.js/styles/github.css";

hljs.registerLanguage('json', json);

const app = createApp(App);

library.add(faLink, faUser, faPowerOff);

app
  .use(hljsVuePlugin)
  .use(createRouter(app))
  .use(
    createAuth0({
      domain: authConfig.domain,
      clientId: authConfig.clientId,
      authorizationParams: {
        redirect_uri: window.location.origin,
      }
    })
  )
  .component("font-awesome-icon", FontAwesomeIcon)
  .mount("#app");
```
`app.use` して、 `createAuth0` すればいいだけってのは楽。
毎度のごとく `authConfig` はこんな感じで勝手に情報がうまっておりました。

```json:vuejs-01-login/auth_config.js
{
  "domain": "[AUth0 Project ID].us.auth0.com",
  "clientId": "[SPA の CLIENT ID]"
}
```

やはり簡単に物を作れるようになっていて素晴らしすぎる。

ということで、ここまでで認証・API 単体動作、SPA 単体動作まではできた。

次はこれらを連携してどう動かしていくかってのをやっていく予定。
(サンプルベースに改造 (ってほどでもないけど) をしていく感じで)