ACL Challenges with Nuxt 3 and Supabase in Server-Rendered Context
Issue Overview
When using Nuxt 3 with Supabase, implementing Access Control List (ACL) checks in a server-rendered context presents significant challenges:
1. Server-Side Rendering (SSR) Limitations:
- Cannot reliably perform ACL checks during SSR as the JWT (stored client-side) is not available.
- Example:
if (!canCreate('asset')) throw createError('Access Denied') doesn't work in server-side setup.
2. Inconsistent Behavior:
- ACL works fine with client-side navigation.
- Issues arise on full page reloads of ACL-gated pages.
3. Security Concerns:
- Relying solely on client-side checks is insufficient.
- Users could potentially bypass by directly accessing URLs or forcing page reloads.
4. RLS Limitations:
- Supabase Row Level Security (RLS) effectively blocks direct DB access.
- However, RLS doesn't directly expose itself to the client UI for ACL purposes.
A teammate summed it up by: Yeah but it’s flaky at best. Stuff works fine so long as you navigate to ACL gated pages 100% in client context. If you do something like a full page reload on an ACL gated page, it acts up.
I can’t do a if (!canCreate('asset')) throw createError('Access Denied') type of check in the /asset/upload page setup context because the data to do that isn’t available in server rendering context.
Question for the Community
How are others handling ACL in Nuxt 3 applications with Supabase while maintaining SSR? Are there any recommended patterns or best practices emerging to address this issue?1 Reply
I haven't worked with supabase yet or jwt tokens but the concept I believe is the same, set a cookie during login procedures (your JWT token perhaps) and use that cookie server side to authenticate.
You can access the request object with the cookie headers in a nuxt server side plugin
Nuxt
plugins/ · Nuxt Directory Structure
Nuxt has a plugins system to use Vue plugins and more at the creation of your Vue application.