colinespinas / kinde-nuxt

Kinde integration for Nuxt

Nuxt Kinde

Kinde integration for Nuxt.

• ✨  Release Notes

Quick Setup

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

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,
    // 
  }
})

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 ✨

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