Nuxt Kinde
快速设置
- 将
@nuxtjs/kinde依赖项添加到您的项目中
npx nuxi@latest module add kinde
- 将
@nuxtjs/kinde添加到nuxt.config.ts的modules部分
export default defineNuxtConfig({
modules: ['@nuxtjs/kinde'],
kinde: {
// This is true by default and adds 'auth-logged-in' and 'auth-logged-out'
// middleware to your Nuxt application.
//
// middleware: false,
//
// enable the debug `/api/health` endpoint
// debug: true,
//
// Set custom endpoints in case you use any of the default routes for other purposes
// endpoints: {
// callback: '/api/callback',
// login: '/api/login',
// register: '/api/register',
// health: '/api/health',
// logout: '/api/logout'
// access: '/api/access'
// portal: '/api/portal'
// }
}
})
将以下配置添加到您的 .env 文件中，并将 < > 中的值替换为您的 Kinde 凭据。
注意：Nuxt Kinde 模块需要后端 Web API 密钥
NUXT_KINDE_AUDIENCE="https://<your_kinde_subdomain>.kinde.com/api" # if you want to use the Management API
NUXT_KINDE_AUTH_DOMAIN="https://<your_kinde_subdomain>.kinde.com"
NUXT_KINDE_CLIENT_ID="<your_kinde_client_id>"
NUXT_KINDE_CLIENT_SECRET="<your_kinde_client_secret>"
NUXT_KINDE_LOGOUT_REDIRECT_URL="https://:3000"
NUXT_KINDE_REDIRECT_URL="https://:3000/api/callback"
NUXT_KINDE_PASSWORD=<a random password which will be used to encrypt the session cookie>
NUXT_KINDE_POST_LOGIN_REDIRECT_URL="https://:3000/dashboard"
或者，您也可以在 nuxt.config 文件中设置这些值中的任何一个
export default defineNuxtConfig({
kinde: {
authDomain: 'https://<your_kinde_subdomain>.kinde.com',
clientId: '<your_kinde_client_id>',
// You probably don't want to set any of the following directly in your config
// as they either shouldn't be committed to version control, or are dependent
// on your environment.
//
// clientSecret: '<your_kinde_client_secret>',
// redirectURL: 'https://:3000/api/callback',
// logoutRedirectURL: 'https://:3000',
// postLoginRedirectURL: 'https://:3000/dashboard',
}
})
大功告成！您现在可以在 Nuxt 应用中使用 Nuxt Kinde 了 ✨
可组合项
useAuth
返回当前的身份验证状态，包含以下属性。
loggedIn
一个布尔值，指示用户是否已登录。
user
当前已登录的用户状态；如果用户未登录，则为 null。
useKindeClient
仅限服务端。返回一个 Kinde 客户端；有关详细信息，请参阅 Kinde SDK 文档。
开发
# Install dependencies
pnpm install
# Generate type stubs
pnpm dev:prepare
# Develop with the playground
pnpm dev
# Build the playground
pnpm dev:build
# Run ESLint
pnpm lint
# Run Vitest
pnpm test
# Release new version
pnpm release