nuxt-modules / kinde Goto Github PK
View Code? Open in Web Editor NEWKinde integration for Nuxt
Kinde integration for Nuxt
Error: Could not load /Users/petr/www/handbook/node_modules/@kinde-oss/kinde-typescript-sdk/dist/index.js: ENOENT: no such file or directory, open '/Users/petr/www/handbook/node_modules/@kinde-oss/kinde-typescript-sdk/dist/index.js'
"dependencies": {
"@iconify-json/heroicons": "^1.1.20",
"@iconify-json/simple-icons": "^1.1.94",
"@nuxt/content": "^2.12.0",
"@nuxt/ui-pro": "^1.0.2",
"@nuxtjs/fontaine": "^0.4.1",
"@nuxtjs/google-fonts": "^3.1.0",
"@nuxtjs/mdc": "^0.2.8",
"nuxt": "^3.10.3",
"nuxt-og-image": "^2.2.4",
"yup": "^1.3.2"
},
"devDependencies": {
"@nuxt/devtools": "1.0.4",
"@nuxt/eslint-config": "^0.2.0",
"@nuxthq/studio": "^1.0.12",
"@nuxtjs/kinde": "^0.1.9",
"eslint": "^8.57.0",
"standard-version": "^9.5.0",
"typescript": "^5.3.2",
"vue-tsc": "^2.0.5"
}
}```
Just following the documentation (here)[https://kinde.com/docs/developer-tools/nuxt-module/] to implement a simple authentication page. When logging in, upon loading the http://localhost:3001/api/callback?code=xxx.xxx&scope=openid+profile+email+offline&state=xxx
URL, I get 500 Error "user must be a string."
[nuxt] [request error] [unhandled] [500] user must be a string.
at Object.setSessionItem (C:\Users\Declan\my-web-app\node_modules\@nuxtjs\kinde\dist\runtime\server\middleware\kinde.mjs:34:17)
at /C:/Users/Declan/my-web-app/node_modules/@kinde-oss/kinde-typescript-sdk/dist/sdk/utilities/token-utils.js:59:53
at step (/C:/Users/Declan/my-web-app/node_modules/@kinde-oss/kinde-typescript-sdk/dist/sdk/utilities/token-utils.js:32:23)
at Object.next (/C:/Users/Declan/my-web-app/node_modules/@kinde-oss/kinde-typescript-sdk/dist/sdk/utilities/token-utils.js:13:53)
at /C:/Users/Declan/my-web-app/node_modules/@kinde-oss/kinde-typescript-sdk/dist/sdk/utilities/token-utils.js:7:71
at new Promise (<anonymous>)
at __awaiter (/C:/Users/Declan/my-web-app/node_modules/@kinde-oss/kinde-typescript-sdk/dist/sdk/utilities/token-utils.js:3:12)
at commitUserToMemoryFromToken (/C:/Users/Declan/my-web-app/node_modules/@kinde-oss/kinde-typescript-sdk/dist/sdk/utilities/token-utils.js:45:79)
at /C:/Users/Declan/my-web-app/node_modules/@kinde-oss/kinde-typescript-sdk/dist/sdk/utilities/token-utils.js:79:38
at step (/C:/Users/Declan/my-web-app/node_modules/@kinde-oss/kinde-typescript-sdk/dist/sdk/utilities/token-utils.js:32:23)
[Vue Router warn]: No match found for location with path "/api/callback?code=FjCO4AtQy-xxx"
[Vue Router warn]: No match found for location with path "/api/callback?code=FjCO4AtQy-xxx
[Vue Router warn]: No match found for location with path "/api/callback?code=FjCO4AtQy-xxx"
Not sure what is going on, it's an extremely simple implementation using minimal code.
Version details:
Windows 11 Pro
NPM: v9.6.7
Node: v18.17.0
Nuxt 3.9.0 with Nitro 2.8.1
vue-router: "^4.2.5"
Edge: Version 120.0.2210.91 (Official build) (64-bit)
hello kinde team,
I would like to ask if I need to hard coded the api callback on my server like react-kinde do?
I tried using it without api/callback on my server but i received an error.
Invalid callback URL
The callback URL provided is invalid.
You provided: http://localhost:3000/api/callback
If you are the application developer, please register the callback URL in the Kinde admin area.
PS: i dont use nuxt-ui, is it required to depend to nuxt ui?
Hello
Looking at using the Managment api, but it would be really useful to have the user information(mainly ID) available in event.context.kinde. It is possible to send it as a param, but just having it there would be nice
This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.
These updates are awaiting their schedule. Click on a checkbox to get an update now.
These updates are currently rate-limited. Click on a checkbox below to force their creation now.
These updates await pending status checks. To force their creation now, click the checkbox below.
@nuxt/kit
, @nuxt/module-builder
, @nuxt/schema
, @nuxt/test-utils
, nuxt
, vue
).github/workflows/ci.yml
actions/checkout v4
actions/setup-node v4
package.json
@kinde-oss/kinde-typescript-sdk ^2.8.0
@nuxt/kit ^3.11.2
cookie-es ^1.1.0
defu ^6.1.4
pathe ^1.1.2
@nuxt/devtools 1.3.9
@nuxt/eslint-config 0.3.13
@nuxt/module-builder 0.7.1
@nuxt/schema 3.12.1
@nuxt/test-utils 3.13.1
@types/node 20.14.14
@vue/test-utils 2.4.6
changelogen 0.5.5
eslint 9.4.0
happy-dom 14.12.3
nuxt 3.12.1
typescript 5.4.5
vitest 2.0.4
vue-tsc 2.0.29
@nuxt/schema 3.12.1
pnpm 9.3.0
playground/package.json
@nuxt/devtools 1.3.9
nuxt 3.12.1
vue 3.4.27
vue-router 4.3.2
Hey,
I was browsing the code and stumbled upon a hardcoded password, so I thought I'd let you know in case you missed it.
Looking at the logout route, there doesn't seem to be handling of the value from runtimeConfig like it is done in callback-route.
If I use the logout route, I do not get redirected to the configured route in NUXT_KINDE_LOGOUT_REDIRECT_URL, but to a post-logout-page of Kinde.
need example .env
file and also possibility of configuring directly in kinde
object in nuxt config
Is there a way to use Kinde to protect Nuxt API routes in the "/server/api" folder? I was able to do this with sidebase next-auth like this:
import { getServerSession } from "#auth";
export default defineEventHandler(async (event) => {
const session = await getServerSession(event);
if (!session) {
return { status: "unauthenticated" };
}
return {status: "authenticated"};
});
But I am trying to get away from using sidebase and checking out a hosted solution like Kinde instead. The only thing I could find so far is the "useKindeClient" composable which mentions "Server Only" in description but I could not find any further documentation on how to actually use it. Am I on the right track with that...or is that something completely different and would not be used for api route protection?
I am pretty new at this, so my apologies if I am not using all the correct terminology.
Thanks.
Hi, I'm hoping to get some guidance on how I might configure my auth flow to get audiences assigning to my tokens. When I get my access tokens, they do not have an audience assigned, and I need this to authenticate in my asp.net backend.
I have also posted a question about it here:
https://discord.com/channels/1070212618549219328/1246729027386085376
I'm using the starter kit repo - https://github.com/kinde-starter-kits/nuxt-starter-kit.
I'm able to log in using Twitter within Chrome, but when I attempt the same within Safari 17.1, I get the following error log:
[nuxt] [request error] [unhandled] [500] Authentication flow state not found
at AuthorizationCode.exchangeAuthCodeForTokens (./node_modules/@kinde-oss/kinde-typescript-sdk/dist/sdk/oauth2-flows/AuthorizationCode.js:66:19)
at async AuthorizationCode.handleRedirectFromAuthDomain (./node_modules/@kinde-oss/kinde-typescript-sdk/dist/sdk/oauth2-flows/AuthCodeAbstract.js:36:24)
at async Object.handleRedirectToApp (./node_modules/@kinde-oss/kinde-typescript-sdk/dist/sdk/clients/server/authorization-code.js:55:9)
at <anonymous> (./node_modules/@nuxtjs/kinde/dist/runtime/server/api/callback.get.mjs:6:3)
at async Object.handler (./node_modules/h3/dist/index.mjs:1675:19)
at async Server.toNodeHandle (./node_modules/h3/dist/index.mjs:1885:7)
[Vue Router warn]: No match found for location with path "/api/callback?code=pLDcjhUcpDXsnXm6ku_MpU_T19uvulrPsECH3gd_Xsg.7zOhxW10by-5pZJcexPsJpR6WDKF7cQwY2wvZAbi2vs&scope=openid+profile+email+offline&state=248f9ae441f9103afa93ec09cf0f5ef01f12549a4c87f4680a16665f"
[Vue Router warn]: No match found for location with path "/api/callback?code=pLDcjhUcpDXsnXm6ku_MpU_T19uvulrPsECH3gd_Xsg.7zOhxW10by-5pZJcexPsJpR6WDKF7cQwY2wvZAbi2vs&scope=openid+profile+email+offline&state=248f9ae441f9103afa93ec09cf0f5ef01f12549a4c87f4680a16665f"
[Vue Router warn]: No match found for location with path "/api/callback?code=pLDcjhUcpDXsnXm6ku_MpU_T19uvulrPsECH3gd_Xsg.7zOhxW10by-5pZJcexPsJpR6WDKF7cQwY2wvZAbi2vs&scope=openid+profile+email+offline&state=248f9ae441f9103afa93ec09cf0f5ef01f12549a4c87f4680a16665f"
[Vue Router warn]: No match found for location with path "/api/callback"
[nuxt] [request error] [unhandled] [500] Authentication flow state not found
at AuthorizationCode.exchangeAuthCodeForTokens (./node_modules/@kinde-oss/kinde-typescript-sdk/dist/sdk/oauth2-flows/AuthorizationCode.js:66:19)
at async AuthorizationCode.handleRedirectFromAuthDomain (./node_modules/@kinde-oss/kinde-typescript-sdk/dist/sdk/oauth2-flows/AuthCodeAbstract.js:36:24)
at async Object.handleRedirectToApp (./node_modules/@kinde-oss/kinde-typescript-sdk/dist/sdk/clients/server/authorization-code.js:55:9)
at <anonymous> (./node_modules/@nuxtjs/kinde/dist/runtime/server/api/callback.get.mjs:6:3)
at async Object.handler (./node_modules/h3/dist/index.mjs:1675:19)
at async Server.toNodeHandle (./node_modules/h3/dist/index.mjs:1885:7)
[Vue Router warn]: No match found for location with path "/api/callback?code=qdnf3pgTdr3_xYmTeELOybGJqZ2TW7ZeX0Uiw0ZHaTs.K4m8TO5SyMvbSnSqq3f-IgFdY5nzA9seZOKIy_bFGeE&scope=openid%20profile%20email%20offline&state=d504a762a31e534249e814538d6fbf9f0896028bc44b6044b214c6a5"
[Vue Router warn]: No match found for location with path "/api/callback?code=qdnf3pgTdr3_xYmTeELOybGJqZ2TW7ZeX0Uiw0ZHaTs.K4m8TO5SyMvbSnSqq3f-IgFdY5nzA9seZOKIy_bFGeE&scope=openid%20profile%20email%20offline&state=d504a762a31e534249e814538d6fbf9f0896028bc44b6044b214c6a5"
[Vue Router warn]: No match found for location with path "/api/callback?code=qdnf3pgTdr3_xYmTeELOybGJqZ2TW7ZeX0Uiw0ZHaTs.K4m8TO5SyMvbSnSqq3f-IgFdY5nzA9seZOKIy_bFGeE&scope=openid%20profile%20email%20offline&state=d504a762a31e534249e814538d6fbf9f0896028bc44b6044b214c6a5"
[Vue Router warn]: No match found for location with path "/api/callback"
I've been attempting to access the user login state in the script tag, rather than relying on $auth
which is only available in the template tag.
ISSUE
When importing useKindeClient and attempting to use it in the script tag, it produces a warning that it is an any
tag.
(Nuxt Auto imports useKindeClient)
Additionally, assigning useKindeClient to a variable named client
and using it to access the isloggedin
method returns an any
type.
SOLUTION
After researching with the assistance of @DanielRivers from the Kinde Discord Server, I concluded that importing useAuth
instead of useKindeClient
is the correct approach. This has the appropriate type and enables you to utilize the loggedIn
method to verify whether the user is logged in.
REQUEST
Please add a type to the useKindeClient
function. ๐
I directly cloned the template into my own repository. The only thing I've changed is removing the package lock and using pnpm to install the packages instead. Adding my own env variables to the .env file and attempting pnpm run dev
renders the following issue:
[nuxt] [request error] [unhandled] [500] useRuntimeConfig is not defined
at createSessionManager (C:\Development\maintenance\node_modules\.pnpm\@[email protected]\node_modules\@nuxtjs\kinde\dist\runtime\server\middleware\kinde.mjs:17:18)
at Object.handler (C:\Development\maintenance\node_modules\.pnpm\@[email protected]\node_modules\@nuxtjs\kinde\dist\runtime\server\middleware\kinde.mjs:5:32)
at Object.handler (/C:/Development/maintenance/node_modules/.pnpm/[email protected]/node_modules/h3/dist/index.mjs:1962:31)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Server.toNodeHandle (/C:/Development/maintenance/node_modules/.pnpm/[email protected]/node_modules/h3/dist/index.mjs:2249:7)
[nuxt] [request error] [unhandled] [500] useRuntimeConfig is not defined
at createSessionManager (C:\Development\maintenance\node_modules\.pnpm\@[email protected]\node_modules\@nuxtjs\kinde\dist\runtime\server\middleware\kinde.mjs:17:18)
at Object.handler (C:\Development\maintenance\node_modules\.pnpm\@[email protected]\node_modules\@nuxtjs\kinde\dist\runtime\server\middleware\kinde.mjs:5:32)
at Object.handler (/C:/Development/maintenance/node_modules/.pnpm/[email protected]/node_modules/h3/dist/index.mjs:1962:31)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async toNodeHandle (/C:/Development/maintenance/node_modules/.pnpm/[email protected]/node_modules/h3/dist/index.mjs:2249:7)
at async ufetch (/C:/Development/maintenance/node_modules/.pnpm/[email protected]/node_modules/unenv/runtime/fetch/index.mjs:9:17)
at errorhandler (C:\Development\maintenance\node_modules\.pnpm\[email protected][email protected]\node_modules\nuxt\dist\core\runtime\nitro\error.js:37:41)
at async Server.toNodeHandle (/C:/Development/maintenance/node_modules/.pnpm/[email protected]/node_modules/h3/dist/index.mjs:2256:9)
This is directly from the nuxt-kinde template available on the Kinde + Nuxt starter on GitHub, linked to by the Kinde website.
https://github.com/kinde-starter-kits/nuxt-starter-kit
I am having some difficulty handling unauthenticated users. I attempted to use another global middleware, but encountered an infinite redirect error. Is there a redirect URL available for unauthenticated users similar to Clerk auth?
useKindeClinet
error added to nuxt client composables.
Using addServerImports
or [addServerImportsDir](https://nuxt.com/docs/api/kit/nitro#addserverimportsdir)
maybe fix it
error code: module.ts:132
Just follow the instructions to add the kinde module to a Nuxt Hub template. After deployed to the cloudflare, calling the '/api/login' ended up wit the the following error:
GET 500 /api/login
[nuxt] [request error] [unhandled] [500],Invalid URL string.
at AuthorizationCode.<anonymous> (chunks/runtime.mjs:1:168189)
at chunks/runtime.mjs:1:167114
at Object.next (chunks/runtime.mjs:1:167219)
at fulfilled (chunks/runtime.mjs:1:165881)
It worked completely fine with dev server. Have been trying with build configurations, but no luck. I couldn't figure out if this is the module issue or the nitro server issue.
Package details:
"@nuxt/eslint": "^0.3.13",
"@nuxthub/core": "^0.6.11",
"@nuxtjs/kinde": "^0.1.10",
"h3-zod": "^0.5.3",
"nuxt": "^3.12.1",
"zod": "^3.23.8",
"typescript": "5.4.5"
I have a brand new Nuxt 3 app and a /api/me
nuxt server handler which will attach a few extra things stored in a database. I'm getting this error: ERROR [nitro] [unhandledRejection] Compact JWS must be a string or Uint8Array
and this is the code:
export default defineEventHandler(async (event) => {
const kinde = event.context.kinde
const user = await kinde.getUser()
return {
doesnt: 'matter'
}
})
Full stack trace:
ERROR [nitro] [unhandledRejection] Compact JWS must be a string or Uint8Array
at compactVerify (node_modules/jose/dist/node/esm/jws/compact/verify.js:9:15)
at jwtVerify (node_modules/jose/dist/node/esm/jwt/verify.js:5:28)
at node_modules/@kinde-oss/kinde-typescript-sdk/dist/sdk/utilities/token-utils.js:142:45
at step (node_modules/@kinde-oss/kinde-typescript-sdk/dist/sdk/utilities/token-utils.js:32:23)
at Object.next (node_modules/@kinde-oss/kinde-typescript-sdk/dist/sdk/utilities/token-utils.js:13:53)
at fulfilled (node_modules/@kinde-oss/kinde-typescript-sdk/dist/sdk/utilities/token-utils.js:4:58)
FWIW, await kinde.isAuthenticated()
returns true, so I'm not sure how it would know if someone is authenticated or not if some cookie/jwt/etc. wasn't being passed and successfully verified.
My .env is very barebones and I basically followed your quick start when I selected Nuxt as my existing application:
NUXT_KINDE_PASSWORD=nope
NUXT_KINDE_CLIENT_ID=nope
NUXT_KINDE_CLIENT_SECRET=nope
NUXT_KINDE_AUTH_DOMAIN=https://mydomain.kinde.com
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
Do you have any suggestions?
can we use other routes than /api/login
and /api/register
for the internal routes?
These conflict with routes that my app is using for other purposes.
/api/login
and /api/register
Links in ProductionIssue Description:
I am encountering an issue with the /api/login
and /api/register
endpoints in my Nuxt.js application. The problem arises when using the NuxtLink
, LoginLink
, or RegisterLink
components with the paths specified in the @nuxt/kinde documentation.
NuxtLink
, LoginLink
, or RegisterLink
components to navigate to /api/login
or /api/register
.npm run build
./api/login
and /api/register
works correctly.No match found for location with path "/api/login"
No match found for location with path "/api/register"
The login and register links should work seamlessly in both development and production environments without resulting in internal server errors.
package.json
:
{
"name": "nuxt-app",
"private": true,
"type": "module",
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "npm run build && wrangler pages dev",
"postinstall": "nuxt prepare",
"deploy": "npm run build && wrangler pages deploy",
"cf-typegen": "wrangler types"
},
"dependencies": {
"nuxt": "^3.11.2",
"vue": "^3.4.27",
"vue-router": "^4.3.2"
},
"devDependencies": {
"@cloudflare/workers-types": "^4.20240512.0",
"@formkit/auto-animate": "^0.8.2",
"@nuxtjs/color-mode": "^3.4.1",
"@nuxtjs/kinde": "^0.1.10",
"@nuxtjs/tailwindcss": "^6.12.0",
"@vueuse/nuxt": "^10.9.0",
"dayjs-nuxt": "^2.1.9",
"nitro-cloudflare-dev": "^0.1.4",
"nuxt-icon": "^0.6.10",
"nuxt-typed-router": "^3.6.3",
"typescript": "^5.4.5",
"wrangler": "^3.57.1"
}
}
nuxt.config.ts
:
export default defineNuxtConfig({
devtools: { enabled: true },
nitro: {
preset: "cloudflare-pages",
},
kinde: {
debug: true,
},
modules: [
"nitro-cloudflare-dev",
"@nuxtjs/kinde",
"nuxt-typed-router",
"@nuxtjs/tailwindcss",
"@vueuse/nuxt",
"@formkit/auto-animate",
"@nuxtjs/color-mode",
"dayjs-nuxt",
"nuxt-icon",
],
colorMode: {
classSuffix: "",
preference: "light",
fallback: "light",
},
});
wrangler pages deploy
.I would appreciate any insights or suggestions on how to resolve this issue. Specifically, I need help understanding why the login and register links result in an internal server error in production and how to fix this.
Thank you for your assistance!
it cant detect/use the useAuth composable in pinia store.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.