Authenticated access to content

[oripka]

I'm using Nuxt Content as a tutorial / lab guide system for some courses. It's really nice to be able to do little quizes by implementing them as MDC.

I also implemented a way to convert the the markdown content to PDF, as students of courses often want to have a definitive PDF to take home with them (in the fear that the website will not be around forever). This is based upon pandoc, eisvogel.tex, some python scripting and Docker, CI/CD.

Back to my original question. I found this issue #520 for v1. There is some talk about implementing authenticated access to content in v2. Is that actually possible now? It would be really nice to not have to put the markdown into a database in order to protect it.

Until now I figured that I can just use the authentication in the Vue Components but I am not sure how to properly prevent access to the markdown content.

All the best

[oripka]

I now solved this by overwriting pages/document-driven.vue from vue content, adding a middleware:

definePageMeta({
    middleware: 'auth'
})

The middleware is using supabase

export default defineNuxtRouteMiddleware((to, _from) => {
    const user = useSupabaseUser()
    if (!user.value) {
        return navigateTo('/')
    }
})

Additionally overwriting the navigation of Docus in components/content/NavbarCenter.vue

<script setup lang="ts">
[...]
const { hasPermissionToCourse, getCourseName } = useCourses();

const tree = computed(() => {
  return (navigation.value || []).filter((item) => {
    let hasPermission = hasPermissionToCourse(item.title)
    if (filtered.value.includes(item._path) || !hasPermission) { return false }
    return true
  })
})
[...]
</script>

<template>
  <nav v-if="hasNavigation"
    class="flex items-center justify-center flex-1 max-w-full space-x-2 overflow-hidden font-medium truncate">
    <template v-for="link in tree" :key="link._path">
      <NuxtLink :to="navBottomLink(link)" class="link"
        :class="{ active: isActive(link) }">
        <Icon v-if="link.icon && docus.header.showLinksIcons" :name="link.icon" class="w-4 h-4" />
        {{getCourseName(link.title)}}
      </NuxtLink>
    </template>
  </nav>
</template>
[...]

[oripka]

I just realized that this still leaves server/api/query.ts unprotected.

[sudomk]

Hi @oripka,
did you get any further with this 'problem'?

[oripka]

Additionally to what I mentioned above. I found out that one can protect server/api/query.ts by implementing a server middleware.

But I also noted that it doesn't fully protect the content e.g. somebody can still just download api/_content/cache.json to get all the content.

I read through some of the Content and Docus code but my I still feel that I don't understand exactly how to do this with the least amount of friction.

middlware/auth.ts

export default defineNuxtRouteMiddleware( async (to, _from) => {

    const { authentication } = useRuntimeConfig()

    if(!authentication.required){
        return 
    }
    
    const user = useSupabaseUser()
    const { hasPermissionToCoursePath, getCoursePermissions } = useCourses();
    
    if (!user.value) {
        return navigateTo('/')
    }

    await getCoursePermissions()
    
    if(to.meta.page !== false && !hasPermissionToCoursePath(to.fullPath) ){
        return navigateTo('/')
    }
})

pages/document-driven.vue

<script setup lang="ts">
import { useContent, useContentHead, useRequestEvent } from '#imports'

const { page, layout } = useContent()

// Page not found, set correct status code on SSR

if (!page.value && process.server) {
    const event = useRequestEvent()
    event.res.statusCode = 404
}

definePageMeta({
    middleware: 'auth'
})

useContentHead(page)
</script>
    
<template>
    <div class="document-driven-page">
        <NuxtLayout :name="layout || 'default'">
            <ContentRenderer v-if="page" :key="page._id" :value="page">
                <template #empty="{ value }">
                    <DocumentDrivenEmpty :value="value" />
                </template>
            </ContentRenderer>
            <DocumentDrivenNotFound v-else />
        </NuxtLayout>
    </div>
</template>

Here the server middleware (code is bit rough right now, but you should get the idea.)
server/middleware/auth.ts

import { serverSupabaseClient } from '#supabase/server'
import { serverSupabaseUser } from '#supabase/server'


function isActiveExercise(path, allowlist) {

    var isMatch = allowlist.some(
        function (rx) {
            return new RegExp(rx).test(path);
        }
    );
    return isMatch
}

export default defineEventHandler(async (event) => {
    return
    const query = useQuery(event)

    if (!event.req?.url) return

    let url = event.req?.url
    // let user = await serverSupabaseUser(event)

    if (query && url.includes("/api/_content/query")) {

        // console.log(user)
        // if (!user) {
        //     throw createError({
        //         statusCode: 403,
        //         statusMessage: 'Unauthorized'
        //     })
        // }

        const client = serverSupabaseClient(event)

        const { data: myCourses, error } = await client.from('user_courses').select(`courseid, show, courses (name)`)


        // const activeExercises = [
        //     "^/.*/intro",
        //     "^/.*/bsi",
        //     "^/.*/info",
        //     //"^.*" //everything
        //     //"^/.*/pads",
        //     //"^/cysecde/windows$",
        //     //"^/cysecde/windows/pivot-to-windows$"
        // ]
        let activeExercisesTmp = []
        for (let c of myCourses) {
            if (c.show) {
                activeExercisesTmp.push(...c.show)
            }
        }
        let activeExercises = [...new Set(activeExercisesTmp)]
        
        let p = JSON.parse(query._params)
        let path

        if (p.surround) {
            path = p.surround.query
        } else if (p.where) {
            path = p.where[0]._path
        }

        if (!isActiveExercise(path, activeExercises)) {
            throw createError({
                statusCode: 403,
                statusMessage: 'Unauthorized'
            })
        }
    }


})

With the server middleware I ran into performance problems and also the issue that let user = await serverSupabaseUser(event) is undefined if one directly browses to a certain nuxt content page (nuxt-modules/supabase#104)

[onpix]

Hi! Thanks for your contribution! Have you solved this problem now? I'm also working on this problem, but I still have no solutions... I'm wondering, does your solution (superbase + nuxt content) works well now?

[sudomk]

I just thought about this conversation again and wrote the following simple middleware.

export default defineEventHandler((event) => {
    const url = event.req.url
    
    if(url.includes('/api/_content')) {
        return sendError(event, createError({
            statusCode: 401,
            statusMessage: 'Unauthorized'
        }))
})

Now when I make a request to /api/_content/* I get a 401. Even with /api/_content/cache.json. Or am I missing something?

[oripka]

Yes, of course. That seems to solve the open access to the content route.

[oripka]

I had a lot of performance issues with my solution above. It turned out that this part of the solution was the issue:

I now solved this by overwriting pages/document-driven.vue from vue content, adding a middleware:

definePageMeta({
middleware: 'auth'
})

Not sure how to protect the document driven pages without using an auth middleware and running into these performance issues

[sudomk]

A completely different solution could be to relocate your content to supabase storage and use their authentication.

[TheAnachronism]

Has anyone ever come up with a proper solution to this? Considering Nuxt and Nuxt Content have quite evolved in the past two years...

[BenjaminOddou]

Hello @oripka, your solution seems very promising ! Did you notice any performance degradation when decrypting large amount of data ? Do you think that your modifications to nuxt content could be added in a separate module while waiting the merge of your pr (if you have some recommandation on how to handle it).

Also, do you think it would be possible to have a per page decryption ? If i understand correctly, you are encryping /decrypting the full collections but if i'd like to give the access to some part of the collection it's seems not possible.

Many thanks in advance and thanks for the great work. 👏

[oripka]

Hello @BenjaminOddou ,

That’s a good idea. I’ll go ahead and publish a module on npm — I was hesitant at first since I’d prefer not to maintain a fork.

Regarding decryption, I haven’t tested with very large datasets yet, but here’s how it currently works:
• Decryption only runs during the initial hydration of a collection when its checksum is missing or has changed.
• The process (AES-GCM decrypt + gzip decompress) happens once per collection load, not per query.
• Keys and dumps are cached in localStorage, so reloads usually avoid extra server calls and only rehydrate the database in memory.
• After hydration, all queries run directly against an in-memory SQLite database without triggering decryption again.

The performance cost is therefore limited to this one-time hydration step, which scales with dump size. On low-powered devices, hydration may feel slower, but once complete, navigation and queries are as fast as with plain text.

As for per-page decryption: in theory it could be done, but with Nuxt Content the API is structured around collections (they’re part of the query parameters). It feels natural to treat a collection as the security boundary (that you can also incept in middlewares, see the example in the docs) rather than working against that model. If you need finer separation, you can always create additional collections.

[oripka]

Here is a package that is based upon the fork: https://www.npmjs.com/package/@ripka/content

To test drive one needs to adjust he package.json to override @nuxt/content

...
  "pnpm": {
    "onlyBuiltDependencies": [
      "better-sqlite3"
    ],
    "overrides": {
      "vite": "npm:rolldown-vite@latest",
      "@nuxt/content": "npm:@ripka/content@latest"
    }
  },
...

Run pnpm install

And enable the encryption via the nuxt.config.ts

export default defineNuxtConfig({
---
  content: {
    encryption: {
      enabled: true
    },
...

[BenjaminOddou]

As for per-page decryption: in theory it could be done, but with Nuxt Content the API is structured around collections (they’re part of the query parameters). It feels natural to treat a collection as the security boundary (that you can also incept in middlewares, see the example in the docs) rather than working against that model. If you need finer separation, you can always create additional collections.

That's what I thought. In my app, each user can is assigned to groups that are then used in the frontmatter of pages to control the visibility. I would have prefer decrypting pages instead of full collection but indeed it doesn't seems to be aligned with the nuxt content philosophy.

Do you know what are the routes that lead to the database / dumps in production ?

[oripka]

If you are okay with losing the ability to have offline access and downloading the dump to the client side, you can always take the approach of @TheAnachronism, block the dump download, and only allow access via API on the server-side. You lose some benefits, but then you can do whatever in the middleware to check parameters.