Kinde•7mo ago

Nuxt useKindeClient not working properly

Hello, I'm trying to use Kinde with Nuxt, the module is quite barebones and doesnt seem to support all things, a few things I want to do: 1. Custom Sign In / Sign Up 2. useKindeClient does not work both on server/api/auth/login.ts as an api route, neither in any of the components on part of the tutorials I see:

const client = useKindeClient();

const {data: permissions} = await useAsyncData(async () => {
  const {permissions} = (await client?.getPermissions()) ?? {};
  return permissions;
});
// { orgCode: 'org_1234', permissions: ['create:todos', 'update:todos', 'read:todos'] }

const {data: hasAccess} = await useAsyncData(async () => {
  return (await client?.getPermission("create:todos")) ?? {};
});
// { orgCode: 'org_1234', isGranted: true }

const client = useKindeClient();

const {data: permissions} = await useAsyncData(async () => {
  const {permissions} = (await client?.getPermissions()) ?? {};
  return permissions;
});
// { orgCode: 'org_1234', permissions: ['create:todos', 'update:todos', 'read:todos'] }

const {data: hasAccess} = await useAsyncData(async () => {
  return (await client?.getPermission("create:todos")) ?? {};
});
// { orgCode: 'org_1234', isGranted: true }

but this code does not specify where this should run, backend or frontend, frontend wise does not run; and I cant try on the backend since it does not import useKindeClient (auto-imports any help appreciated.

3 Replies

puppy333•7mo ago

In server routes you can access the kinde client like this:

export default defineEventHandler(async (event) => {
    const kindeClient = event.context.kinde;

    // Or call a function directly
    const kindeAccessToken = await event.context.kinde.getToken();
}

export default defineEventHandler(async (event) => {
    const kindeClient = event.context.kinde;

    // Or call a function directly
    const kindeAccessToken = await event.context.kinde.getToken();
}

The useKindeClient() composable is server only according to this note on the module page, which means it will only run on the server when the components are being pre-rendered and not again in the browser: https://nuxt.com/modules/kinde#usekindeclient

Nuxt

Kinde · Nuxt Modules

Kinde authentication integration for Nuxt

puppy333•7mo ago

Also, here's an example of using the useKindeClient composable in a .vue file: https://github.com/nuxt-modules/kinde/blob/main/playground%2Fpages%2Fdashboard.vue

GitHub

kinde/playground/pages/dashboard.vue at main · nuxt-modules/kinde

Kinde integration for Nuxt. Contribute to nuxt-modules/kinde development by creating an account on GitHub.

9M6OP•7mo ago

got it, thank you, but would be nice to have both ClientSide and ServerSide instances, something like nuxt supabase has done.

Gaming

Programming

Nuxt useKindeClient not working properly