feat: protected routes defined from nuxt config

playground/nuxt.config.ts

@@ -2,4 +2,22 @@ export default defineNuxtConfig({
   compatibilityDate: '2024-08-19',
   modules: ['@nuxtjs/kinde'],
   devtools: { enabled: true },
+  routeRules: {
+    '/protected': {
+      appMiddleware: ['auth-logged-in'],
+      kinde: {
+        permissions: ['example_permission'],
+        redirectUrl: '/',
+      },
+    },
+    '/dashboard': {
+      appMiddleware: ['auth-logged-in'],
+      kinde: {
+        redirectUrl: '/',
+      },
+    },
+  },
+  experimental: {
+    inlineRouteRules: true,
+  },
 })

playground/pages/dashboard.vue

@@ -23,10 +23,6 @@
 </template>
 
 <script setup lang="ts">
-definePageMeta({
-  middleware: ['auth-logged-in'],
-})
-
 const client = useKindeClient()
 
 const { data: permissions } = await useAsyncData(async () => {

playground/pages/protected.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="container">
+    <div class="card start-hero">
+      <p class="text-body-2 start-hero-intro">
+        Protected Route!
+      </p>
+      <p>Congratulations you have the correct permissions to see this page</p>
+    </div>
+
+    <section class="next-steps-section">
+      <h2 class="text-heading-1">
+        Next steps for you
+      </h2>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>

playground/server/api/test.ts

@@ -0,0 +1,6 @@
+export default defineEventHandler((event) => {
+  console.log(event.context.kinde)
+  return {
+    hello: 'world',
+  }
+})

src/module.ts

@@ -1,7 +1,7 @@
 import { randomUUID } from 'node:crypto'
 import { readFile, writeFile } from 'node:fs/promises'
 
-import { addServerHandler, defineNuxtModule, addPlugin, createResolver, addRouteMiddleware, addImports, addComponent, addTemplate } from '@nuxt/kit'
+import { addServerHandler, defineNuxtModule, addPlugin, createResolver, addRouteMiddleware, addImports, addComponent, addTemplate, addTypeTemplate } from '@nuxt/kit'
 import { defu } from 'defu'
 import type { CookieSerializeOptions } from 'cookie-es'
 import { join } from 'pathe'
@@ -26,6 +26,7 @@ export interface ModuleOptions {
     logout?: string
     register?: string
     health?: string
+    access?: string
   }
   authDomain?: string
   clientId?: string
@@ -146,6 +147,13 @@ export default defineNuxtModule<ModuleOptions>({
         || resolver.resolve('./runtime/server/api/logout.get'),
     })
 
+    addServerHandler({
+      route: '/api/access',
+      handler:
+        options.handlers?.access
+        || resolver.resolve('./runtime/server/api/access.post'),
+    })
+
     // Composables
     addImports({ name: 'useAuth', as: 'useAuth', from: resolver.resolve('./runtime/composables') })
     addImports({ name: 'useKindeClient', as: 'useKindeClient', from: resolver.resolve('./runtime/composables') })
@@ -171,5 +179,27 @@ export default defineNuxtModule<ModuleOptions>({
       name: 'RegisterLink',
       filePath: resolver.resolve('./runtime/components/RegisterLink'),
     })
+
+    addTypeTemplate({
+      filename: `types/nuxt-kinde.d.ts`,
+      getContents: () => {
+        return `
+interface KindeRouteRules {
+  permissions: string[]
+  redirectUrl: string
+}
+
+declare module 'nitropack' {
+  interface NitroRouteRules {
+    kinde?: KindeRouteRules
+  }
+  interface NitroRouteConfig {
+    kinde?: KindeRouteRules
+  }
+}
+export {}
+`
+      },
+    })
   },
 })

src/runtime/middleware/auth-logged-in.ts

@@ -1,14 +1,58 @@
-import { abortNavigation, createError, defineNuxtRouteMiddleware, useNuxtApp } from '#imports'
+import type { NitroRouteRules } from 'nitropack'
+import type { AccessResponse } from '../types'
+import {
+  abortNavigation,
+  createError,
+  defineNuxtRouteMiddleware,
+  navigateTo,
+  useNuxtApp,
+  getRouteRules,
+} from '#imports'
+
+function rejectNavigation(statusCode: number, message: string) {
+  if (import.meta.server) {
+    return createError({
+      statusCode,
+      message,
+    })
+  }
+  return abortNavigation()
+}
+
+export default defineNuxtRouteMiddleware(async (to, from) => {
+  if (to.path === from.path && import.meta.client) {
+    return
+  }
+  const nuxt = useNuxtApp()
+  const kindeConfig: NitroRouteRules['kinde'] = (await getRouteRules(nuxt.ssrContext?.event.path ?? '')).kinde
+
+  function denyAccess() {
+    if (kindeConfig?.redirectUrl) {
+      return navigateTo(kindeConfig.redirectUrl)
+    }
+    return rejectNavigation(401, 'You must be logged in to access this page')
+  }
+
+  if (import.meta.client) {
+    const fetchResult = await $fetch<AccessResponse>('/api/access', { method: 'POST', body: JSON.stringify({
+      path: to.path,
+    }) })
+    if (!fetchResult.access && fetchResult.redirectUrl) {
+      window.location.href = fetchResult.redirectUrl
+    }
+    return
+  }
 
-export default defineNuxtRouteMiddleware(() => {
   // @ts-expect-error will be fixed in Nuxt v3.13
-  if (!useNuxtApp().$auth.loggedIn) {
-    if (import.meta.server) {
-      return createError({
-        statusCode: 401,
-        message: 'You must be logged in to access this page',
-      })
+  if (!nuxt.$auth.loggedIn) {
+    return denyAccess()
+  }
+
+  if (kindeConfig?.permissions) {
+    const usersPermissions = await nuxt.ssrContext!.event.context.kinde.getPermissions()
+
+    if (!kindeConfig.permissions.some(item => usersPermissions.permissions.includes(item))) {
+      return denyAccess()
     }
-    return abortNavigation()
   }
 })

src/runtime/server/api/access.post.ts

@@ -0,0 +1,38 @@
+import { defineEventHandler, readBody } from 'h3'
+import type { NitroRouteRules } from 'nitropack'
+import type { AccessResponse } from '../../types'
+import { useRuntimeConfig } from '#imports'
+
+export default defineEventHandler(async (event): Promise<AccessResponse> => {
+  const { kinde: kindeSettings, ...rest } = useRuntimeConfig()
+  const body = await readBody(event)
+
+  const routeRules: NitroRouteRules['kinde'] = rest.nitro?.routeRules?.[body.path]?.kinde
+
+  if (!routeRules) {
+    return {
+      access: true,
+    }
+  }
+
+  const usersPermissions = await event.context.kinde.getPermissions()
+  const isAuthenticaded = await event.context.kinde.isAuthenticated()
+
+  if (!isAuthenticaded || (routeRules.permissions && !usersPermissions.permissions)) {
+    return {
+      access: false,
+      redirectUrl: routeRules.redirectUrl,
+    }
+  }
+
+  if (!routeRules.permissions?.some((item: string) => usersPermissions.permissions.includes(item))) {
+    return {
+      access: false,
+      redirectUrl: routeRules.redirectUrl,
+    }
+  }
+
+  return {
+    access: true,
+  }
+})

src/runtime/types.ts

@@ -4,6 +4,11 @@ export type AuthState =
   { loggedIn: true, user: UserType } |
   { loggedIn: false, user: null }
 
+export type AccessResponse = {
+  access: boolean
+  redirectUrl?: string
+}
+
 type Slice<T extends Array<unknown>> = T extends [infer _A, ...infer B] ? B : never
 
 export type KindeContext = {