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

インストール
npm install @auth0/auth0-vue

auth_config.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()
  })
}