Modules
Nuxt Kinde
Quick Setup
- Add
@nuxtjs/kinde
dependency to your project
# Using pnpm
pnpm add -D @nuxtjs/kinde
# Using yarn
yarn add --dev @nuxtjs/kinde
# Using npm
npm install --save-dev @nuxtjs/kinde
- Add
@nuxtjs/kinde
to themodules
section ofnuxt.config.ts
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,
//
}
})
Add the following configuration to your .env
file replacing the values in < >
with your Kinde credentials.
NOTE: The Nuxt Kinde module requires the back-end web API keys
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_REDIRECT_URL="http://localhost:3000/api/callback"
NUXT_KINDE_LOGOUT_REDIRECT_URL="http://localhost:3000"
NUXT_KINDE_POST_LOGIN_REDIRECT_URL="http://localhost:3000/dashboard"
You can alternatively set any of these values in your nuxt.config
file:
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: 'http://localhost:3000/api/callback',
// logoutRedirectURL: 'http://localhost:3000',
// postLoginRedirectURL: 'http://localhost:3000/dashboard',
}
})
That's it! You can now use Nuxt Kinde in your Nuxt app ✨
Development
# 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