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.