Seems like I found a solution.
I created a
/api/kinde/me
route that gets the data from the management api and a
useUser
composable that fetches the data from that route.
This was pretty easy thanks to the util @Daniel_Kinde helped me create in #Best way to access the management API from Nuxt server routes?
Here is the server route:
const { kinde } = useRuntimeConfig()
export default defineEventHandler(async (event) => {
const { client } = useKindeServerClient(event)
const clientUser = await client.getUserProfile()
const managementApi = await useKindeManagementApi()
try {
const user = await managementApi.users.getUserData({ id: clientUser.id })
const roles = (await managementApi.organizations.getOrganizationUserRoles({
orgCode: kinde.defaultOrg,
userId: clientUser.id,
})).roles || []
const permissions = (await managementApi.organizations.getOrganizationUserPermissions({
orgCode: kinde.defaultOrg,
userId: clientUser.id,
})).permissions || []
return {
profile: user,
roles,
permissions,
}
}
catch (error) {
console.error(error)
throw createError({ statusMessage: 'Failed to fetch user', statusCode: 500 })
}
})
And here is the composable:
export async function useUser() {
const { data: user, refresh: refreshUser } = await useFetch('/api/kinde/me')
const getHasPermission = async (permission: string) => {
await refreshUser()
if (!user.value)
return false
return user.value.permissions.some(p => p.key === permission) ?? false
}
const getHasRole = async (role: string) => {
await refreshUser()
if (!user.value)
return false
return user.value.roles.some(r => r.key === role) ?? false
}
return {
user,
refreshUser,
getHasPermission,
getHasRole,
}
}