nuxt-modules / kinde Goto Github PK

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

it cant detect/use the useAuth composable in pinia store.

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.

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)

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

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.

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?

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 @vue/test-utils to v2.4.6
• chore(deps): update devdependency vue-tsc to v2.0.19
• chore(deps): update dependency @kinde-oss/kinde-typescript-sdk to v2.9.1
• chore(deps): update devdependency @nuxt/devtools to v1.3.1
• chore(deps): update devdependency eslint to v9.3.0
• chore(deps): update nuxt core (@nuxt/module-builder, @nuxt/test-utils, vue)
• chore(deps): update test packages (happy-dom, vitest)
• chore(deps): lock file maintenance

Detected dependencies

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

need example .env file and also possibility of configuring directly in kinde object in nuxt config

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

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

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.

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.