Nuxt Kinde
Quick Setup
- Add
@nuxtjs/kinde
dependency to your project
npx nuxi@latest module add 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,
//
// 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'
// }
}
})
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_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="http://localhost:3000"
NUXT_KINDE_REDIRECT_URL="http://localhost:3000/api/callback"
NUXT_KINDE_PASSWORD=<a random password which will be used to encrypt the session cookie>
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 ✨
Composables
useAuth
This returns the current auth state, with the following properties.
loggedIn
A boolean that indicates if the user is logged in or not.
user
The current logged in user state, or null if the user is not logged in.
useKindeClient
Server only. This returns a Kinde client; see Kinde SDK Documentation for more details.
Development
# 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