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

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