如何用nuxt3实现auth0

Question

我正在尝试将 auth0 添加到我的 nuxt3 应用程序中，但我在处理它时遇到了问题。 auth-nuxt 模块仍然不可用于 nuxt3，auth0-spa-js 无法使其与 SSR 一起使用，我遵循了这个tutorial。

import createAuth0Client from "@auth0/auth0-spa-js";

let auth = await createAuth0Client({
  domain: "dev-......com",
  client_id: "Z0...................0T6I",
  redirect_uri: '<MY_CALLBACK_URL>'
});

export default auth;

import auth from "../store/authfile";
export default defineNuxtRouteMiddleware(async (to, from) => {
    let isAuthenticated = await auth.isAuthenticated();
    if (to.path === "/" && !to?.query?.code) {
        return;
    }
    if (!isAuthenticated) {
        const query = to?.query;
        if (query && query.code && query.state) {
            await auth.handleRedirectCallback();
        } else {
            await auth.loginWithRedirect();
        }
    } else {
        console.log("logged in ", to.path);
    }
    const router = useRouter();
    if (to.path === "/") {
        to.fullPath = "/";
    }
    navigateTo(to.path);
});

500 文档未定义

在 getAll (C:\Users\vesel\Desktop\nuxt-app\node_modules\es-cookie\src\es-cookie.js:68:18) 在 Object.get (C:\Users\vesel\Desktop\nuxt-app\node_modules\es-cookie\src\es-cookie.js:72:12) 在 Object.get (C:\Users\vesel\Desktop\nuxt-app\node_modules@auth0\auth0-spa-js\dist\lib\auth0-spa-js.cjs.js:4550:40) 在 Object.get (C:\Users\vesel\Desktop\nuxt-app\node_modules@auth0\auth0-spa-js\dist\lib\auth0-spa-js.cjs.js:4585:35) 在 Auth0Client。 (C:\Users\vesel\Desktop\nuxt-app\node_modules@auth0\auth0-spa-js\dist\lib\auth0-spa-js.cjs.js:5258:45) 在步骤 (C:\Users\vesel\Desktop\nuxt-app\node_modules@auth0\auth0-spa-js\dist\lib\auth0-spa-js.cjs.js:186:23) 在 Object.next (C:\Users\vesel\Desktop\nuxt-app\node_modules@auth0\auth0-spa-js\dist\lib\auth0-spa-js.cjs.js:130:20) 在 C:\Users\vesel\Desktop\nuxt-app\node_modules@auth0\auth0-spa-js\dist\lib\auth0-spa-js.cjs.js:107:71 在新的承诺 () 在 __awaiter (C:\Users\vesel\Desktop\nuxt-app\node_modules@auth0\auth0-spa-js\dist\lib\auth0-spa-js.cjs.js:89:12)`

Answer 1

Auth0 有一个 Vue3 package 可以配置为 Nuxt3 插件。

首先，仅遵循他们的quickstart 中概述的配置步骤和安装步骤。

接下来，将其添加为 Nuxt3 插件，使用以下代码在 Plugin 文件夹中创建一个名为 auth.ts 的新文件。在这里，我们将 auth0 实例化为一个插件，并添加一个重新路由经过身份验证的页面的“auth”中间件。请记住使用 definePageMeta 将中间件添加到需要它们的页面：

import { createAuth0 } from '@auth0/auth0-vue'

export default defineNuxtPlugin((nuxtApp) => {
  const auth0 = createAuth0({
    domain: 'xxxx.auth0.com',
    client_id: 'xxx',
    redirect_uri: 'http://localhost:3000',
  })

  if (process.client) {
    nuxtApp.vueApp.use(auth0)
  }

  addRouteMiddleware('auth', () => {
    auth0.checkSession()
    if (!auth0.isAuthenticated.value) {
      auth0.loginWithRedirect({
        appState: {
          target: useRoute().path,
        },
      })
    }
  })
})

现在我们可以创建一个引用此插件的登录按钮 Vue 组件 (Login.client.vue)。请注意，登录按钮应该只呈现在客户端，因为我们只能在客户端检查 isAuthenticated。

<template>
  <div>
    <a
      v-if="!isAuthenticated"
      @click="login"
    >
      <slot>Log In</slot>
    </a>
    <a
      v-else
      @click="logout"
    >
      <slot>Log Out</slot>
    </a>
  </div>
</template>

<script lang="ts" setup>
import { useAuth0 } from '@auth0/auth0-vue'

// Composition API
const auth0 = useAuth0()

const isAuthenticated = computed(() => {
  return auth0.isAuthenticated.value
})

const login = () => {
  auth0.checkSession()
  if (!auth0.isAuthenticated.value) {
    auth0.loginWithRedirect({
      appState: {
        target: useRoute().path,
      },
    })
  }
}

const logout = () => {
  navigateTo('/')
  auth0.logout()
}
</script>

这个包的更多功能可以在Github Repo找到。

边注: 这个中间件只在客户端运行，因此你应该声明所有页面默认不返回敏感信息。 Auth0在这里描述了NextJS serverless architecture认证。