nuxt-modules / kinde Goto Github PK

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.

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• chore(deps): update devdependency nuxt to v3.12.4 [security]
• chore(deps): update devdependency vitest to v2.0.5
• chore(deps): update dependency cookie-es to v1.2.2
• chore(deps): update devdependency @nuxt/eslint-config to v0.5.0
• chore(deps): update devdependency eslint to v9.9.0
• chore(deps): update devdependency typescript to v5.5.4
• chore(deps): update devdependency vue-router to v4.4.3
• chore(deps): update pnpm to v9.7.0
• chore(deps): lock file maintenance

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• chore(deps): update devdependency @types/node to v20.14.15

Pending Status Checks

These updates await pending status checks. To force their creation now, click the checkbox below.

• chore(deps): update nuxt core (@nuxt/kit, @nuxt/module-builder, @nuxt/schema, @nuxt/test-utils, nuxt, vue)

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

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.

Build takes quite a while because of this. (I have quite a powerful PC)
(The screenshot only shows around 1/3 of the output)

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.

(According to this ^)

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

Type error in API:

No type error in page

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.

GitHub Issue: Internal Server Error with /api/login and /api/register Links in Production

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

Steps to Reproduce:

1. Develop a Nuxt.js application with the configurations mentioned below.
2. Use NuxtLink, LoginLink, or RegisterLink components to navigate to /api/login or /api/register.
3. In the development environment, these links work as expected without any issues.
4. Build the Nuxt application using npm run build.
5. Deploy and run the application.

Observed Behavior:

• In the development environment, navigating to /api/login and /api/register works correctly.
• In the production environment, clicking the login or register links results in an internal server error.
• A warning is logged in browser console during development:
  • No match found for location with path "/api/login"
  • No match found for location with path "/api/register"

Expected Behavior:

The login and register links should work seamlessly in both development and production environments without resulting in internal server errors.

Configuration Details:

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",
  },
});

Additional Information:

• The issue does not occur in the development environment but only in the production environment.
• The deployment process involves building the Nuxt application and deploying it using wrangler pages deploy.

Request for Assistance:

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.