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