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'
// }
}
})
将以下配置添加到您的 .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://127.0.0.1:3000"
NUXT_KINDE_REDIRECT_URL="https://127.0.0.1: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://127.0.0.1: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://127.0.0.1:3000/api/callback',
// logoutRedirectURL: 'https://127.0.0.1:3000',
// postLoginRedirectURL: 'https://127.0.0.1:3000/dashboard',
}
})
就是这样!您现在可以在您的 Nuxt 应用程序中使用 Nuxt Kinde ✨
可组合函数
useAuth
这将返回当前的身份验证状态,并具有以下属性。
loggedIn
一个布尔值,指示用户是否已登录。
user
当前登录的用户状态,如果用户未登录则为 null。
useKindeClient
**仅限服务器端**。这将返回一个 Kinde 客户端;有关更多详细信息,请参阅 Kinde SDK 文档。
开发
# Install dependencies
npm install
# Generate type stubs
npm run dev:prepare
# Develop with the playground
npm run dev
# Build the playground
npm run dev:build
# Run ESLint
npm run lint
# Run Vitest
npm run test
npm run test:watch
# Release new version
npm run release