https://github.com/nuxt-modules/kinde
Kinde integration for Nuxt
https://github.com/nuxt-modules/kinde
Last synced: 7 months ago
JSON representation
Kinde integration for Nuxt
- Host: GitHub
- URL: https://github.com/nuxt-modules/kinde
- Owner: nuxt-modules
- Created: 2023-09-06T14:42:28.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-08-16T22:36:55.000Z (7 months ago)
- Last Synced: 2025-08-17T00:18:21.754Z (7 months ago)
- Language: TypeScript
- Homepage:
- Size: 2.47 MB
- Stars: 84
- Watchers: 5
- Forks: 9
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- Codeowners: CODEOWNERS
- Security: SECURITY.md
Awesome Lists containing this project
README
# Nuxt Kinde
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
[![Nuxt][nuxt-src]][nuxt-href]
[Kinde](https://kinde.com/) integration for [Nuxt](https://nuxt.com).
- [✨ Release Notes](/CHANGELOG.md)
## Quick Setup
1. Add `@nuxtjs/kinde` dependency to your project
```bash
npx nuxi@latest module add kinde
```
2. Add `@nuxtjs/kinde` to the `modules` section of `nuxt.config.ts`
```js
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
```bash
NUXT_KINDE_AUDIENCE="https://.kinde.com/api" # if you want to use the Management API
NUXT_KINDE_AUTH_DOMAIN="https://.kinde.com"
NUXT_KINDE_CLIENT_ID=""
NUXT_KINDE_CLIENT_SECRET=""
NUXT_KINDE_LOGOUT_REDIRECT_URL="http://localhost:3000"
NUXT_KINDE_REDIRECT_URL="http://localhost:3000/api/callback"
NUXT_KINDE_PASSWORD=
NUXT_KINDE_POST_LOGIN_REDIRECT_URL="http://localhost:3000/dashboard"
```
You can alternatively set any of these values in your `nuxt.config` file:
```ts
export default defineNuxtConfig({
kinde: {
authDomain: 'https://.kinde.com',
clientId: '',
// 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: '',
// 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](https://kinde.com/docs/developer-tools/typescript-sdk/) for more details.
## Development
```bash
# 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
```
[npm-version-src]: https://img.shields.io/npm/v/@nuxtjs/kinde/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-version-href]: https://npmjs.com/package/@nuxtjs/kinde
[npm-downloads-src]: https://img.shields.io/npm/dm/@nuxtjs/kinde.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-downloads-href]: https://npm.chart.dev/@nuxtjs/kinde
[license-src]: https://img.shields.io/npm/l/@nuxtjs/kinde.svg?style=flat&colorA=18181B&colorB=28CF8D
[license-href]: https://npmjs.com/package/@nuxtjs/kinde
[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
[nuxt-href]: https://nuxt.com