vue3.0+setup構文+vue-router4.0+typescriptでAuth0を動かす(non-plugin)

Auth0の公式サイトのサンプルは少し古いのとで色々探す。
vue3.0とtypescriptなのは日本語も含めいくつかサンプルも見つかる。

しかし、Vueプラグインを使うのがほとんどでVScode使うときの、インテリセンス？が出ないのでプラグインは避けたい。

いくつかのサンプルを組み合わせて動かしました。

https://github.com/alexeyzimarev/auth0-vue3-ts
こちらはコピペだけで動きました！
ただ、プラグイン使ってるので少し嫌。
こちらをプラグイン無しに改造するのは少し手間がかかりそうです。

https://github.com/Hawxy/auth0-vue-samples/tree/vue-3
そこでこちらのサンプル。
vue-router4.0だと少し怒られます。

手順としては
・authフォルダの２ファイルを作成＆コピペ
・App内で初期化
・router内でナビゲーションガード設定

useAuthService.ts

// ログイン後にどのページに遷移するか設定できるようにします。
// 標準だとリダイレクトに与えたアドレスを無視してしまいます。

const DEFAULT_REDIRECT_CALLBACK = async (appState: any) =>
  router.replace(appState.targetUrl);

useRouterGuard.ts

import { NavigationGuardNext, RouteLocationNormalized, NavigationGuardWithThis } from 'vue-router';
// RouteGuardに型を与えるため修正

export const useRouteGuard: NavigationGuardWithThis<undefined> | NavigationGuardWithThis<undefined>[] = (to: RouteLocationNormalized, from: RouteLocationNormalized) => {

    const verify = async () => {
        // If the user is authenticated, continue with the route
        if (isAuthenticated.value) {
            return true;
        }
        // Otherwise, log in
        await loginWithRedirect({ appState: { targetUrl: to.fullPath } })
        return false;
    }
// 非同期に変更

App.vue

<script setup lang="ts">
import { onMounted } from 'vue'
import { useAuth } from './auth/useAuthService'
const { initializeAuth } = useAuth();

// Authorizationの初期化
onMounted(() => {
  initializeAuth({
            domain: 'XXXXXXXX.jp.auth0.com',
            client_id: 'XXXX000000XXXXXXAAAAAAAAAA',
            redirect_uri: window.location.href,
        audience: "", //process.env.VUE_APP_AUTH0_AUDIENCE as string,
        scope: "" //'openid profile email'
      });
})
</script>
// setup構文内に移す。

これで2022/02/12時点のvue最新環境で動くのではないでしょうか。

始めは1ページの中で試行錯誤しようとしましたが、Loginした後に、callbackを呼ぶタイミングの制御が出来ずこのような形になりました。