Nuxt Kinde

Kinde integration for Nuxt.

• ✨  Release Notes

Quick Setup

1. Add @nuxtjs/kinde dependency to your project

npx nuxi@latest module add kinde

2. Add @nuxtjs/kinde to the modules section of nuxt.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'
    // }
  }
})

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
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