@nuxtjs/kinde

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