kinde
@nuxtjs/kinde

NuxtのためのKinde認証連携

nuxt-kinde-social-card

Nuxt Kinde

npm versionnpm downloadsLicenseNuxt

KindeNuxt の連携。

クイックセットアップ

  1. プロジェクトに @nuxtjs/kinde の依存関係を追加します。
npx nuxi@latest module add kinde
  1. @nuxtjs/kindenuxt.config.tsmodules セクションに追加します。
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