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