Nuxt Kinde
Quick Setup
- Add
@nuxtjs/kinde
dependency to your project
# Using pnpmpnpm add -D @nuxtjs/kinde# Using yarnyarn add --dev @nuxtjs/kinde# Using npmnpm 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.
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 dependenciesnpm install# Generate type stubsnpm run dev:prepare# Develop with the playgroundnpm run dev# Build the playgroundnpm run dev:build# Run ESLintnpm run lint# Run Vitestnpm run testnpm run test:watch# Release new versionnpm run release