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

はじめに

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

SPA の作成

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

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

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

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

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

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

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

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

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

その上で以下を実施。

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

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

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

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

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

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

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

以下で SPA 起動。

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

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

  vite v2.9.18 dev server running at:

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

  ready in 1189ms.

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

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

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

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

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

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

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 はこんな感じで勝手に情報がうまっておりました。

vuejs-01-login/auth_config.js

{
  "domain": "[AUth0 Project ID].us.auth0.com",
  "clientId": "[SPA の CLIENT ID]"
}

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

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

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