!nuxt-kinde-social-card

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 integration for Nuxt.

- ✨  Release Notes

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

`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

$3

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.

$3

Server only. This returns a Kinde client; see Kinde SDK Documentation for more details.

Development

`bash


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

[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