auth0を既存プロジェクトに組み込むときのメモ

## auth0を既存プロジェクトに組み込むときのメモ
- インストール
    `npm install @auth0/auth0-vue`

- auth_config.jsonの設定ファイル作成
    ```json
    {
      "domain": "[auth0で作成したアプリケーションの内容を設定]",
      "clientId": "[auth0で作成したアプリケーションの内容を設定]"
    }
    ```

- auth0のログイン画面を表示させる。
    ```NaviVar.vue
    .
    .
    .
    <ul>
        <li v-if="!isAuthenticated && !isLoading" class="nav-item">
          <button
            id="qsLoginBtn"
            class="btn btn-primary btn-margin"
            @click.prevent="login"
          >Login</button>
        </li>
        .
        .
        .
        <li class="nav-item dropdown" v-if="isAuthenticated">
            <div class="dropdown-menu dropdown-menu-right">
                <div class="dropdown-header">{{ user.name }}</div>
                <router-link to="/profile" class="dropdown-item dropdown-profile">
                  <font-awesome-icon class="mr-3" icon="user" />Profile
                </router-link>
                <a id="qsLogoutBtn" href="#" class="dropdown-item" @click.prevent="logout">
                  <font-awesome-icon class="mr-3" icon="power-off" />Log out
                </a>
            </div>
        </li>
    </ul>
    .
    .
    .
    <script setup lang="ts">
    import { useAuth0 } from '@auth0/auth0-vue';

    const auth0 = useAuth0();
    
    const isAuthenticated = auth0.isAuthenticated;
    const isLoading = auth0.isLoading;
    const user = auth0.user;
    
    const login = () => {
      auth0.loginWithRedirect();
    };
    
    const logout = () => {
      auth0.logout({
        logoutParams: {
          returnTo: window.location.origin,
        },
      });
    };
    </script>

    ```
- main.tsのアプリ起動時の初期設定
    ```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";
    import PrimeVue from 'primevue/config';
    
    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,
          }
        })
      )
      .use(PrimeVue)
      .component("font-awesome-icon", FontAwesomeIcon)
      .mount("#app");
    ```

- ルーター設定
    ```index.ts
    import { createRouter as createVueRouter, createWebHashHistory, Router } from "vue-router";
    import Home from "../views/Home.vue";
    import Profile from "../views/Profile.vue";
    import { createAuthGuard } from "@auth0/auth0-vue";
    import { App } from 'vue';
    
    export function createRouter(app: App): Router {
      return createVueRouter({
        routes: [
          {
            path: "/",
            name: "home",
            component: Home
          },
          {
            path: "/profile",
            name: "profile",
            component: Profile,
            beforeEnter: createAuthGuard(app)
          }
        ],
        history: createWebHashHistory()
      })
    }
    ```