The Better Nuxt Directus Authentication Middleware
Sep 26, 2023 · Nov 11, 2023 · 2min read
The Nuxt Directus docs give you a basic auth middleware, but it’s got some quirks. Here’s how to bulletproof it. [Edited Nov 11, 2023]
Why Nuxt and Directus are a Match Made in Dev Heaven ¶
Starting an app from scratch is like reinventing the wheel—unnecessary and time-consuming. That’s why we have killer frameworks like Nuxt (“The Intuitive Web Framework”) for frontend magic and Directus (“The backend to build anything or everything”) for backend wizardry. I’m currently using both to build PrioMind.
Edited Nov 11, 2023 ¶
In the meantime, I’ve switched to Supabase as backend for PrioMind. Supabase also comes with “batteries included”—i.e., authentication. When using the Nuxt Supabase module, the middleware comes built-in.
But here’s the kicker: There’s a package named Nuxt Directus that marries these two like peanut butter and jelly. Sweet, right?
The Good, the Bad, and the Ugly of Nuxt Directus ¶
Nuxt Directus is a lifesaver, no doubt. It lets you pull and push data from your Directus backend to your Nuxt frontend like a pro. User signup, login, you name it—it’s got you covered.
But let’s keep it real: the docs are kinda basic. They offer an example middleware to redirect unauthenticated users to a login page, which is crucial for any app with restricted access. Problem is, this middleware has a nasty habit of logging you out when you least expect it.
The Middleware You’ve Been Waiting For ¶
Enough talk. Here’s a middleware that’s not just a band-aid but a full-on cure. It’ll protect your routes and keep your login sessions intact:
// ~/middleware/auth.ts
export default defineNuxtRouteMiddleware(async (to, _from) => {
const { token_expired, checkAutoRefresh } = useDirectusToken()
// Check if the token's expired
if (token_expired.value) {
try {
// Attempt to refresh the token
await checkAutoRefresh()
// If still expired, off to the login page
if (token_expired.value) {
return navigateTo('/login')
}
} catch (error) {
// Handle any refresh errors here
console.error("Couldn't refresh token:", error)
}
}
// If the token's good, carry on
})
To use this gem, slap it onto any Nuxt page that needs authentication:
<script setup lang="ts">
definePageMeta({
middleware: ['auth']
})
</script>
That’s it, you’re good to go.
Summary ¶
So, there you have it—a rock-solid fix for the authentication middleware in Nuxt Directus. The out-of-the-box example might leave you scratching your head with random logouts, but this solution is your ticket to a hassle-free user experience. Implement this, and you can focus on building out the cool parts of your app without worrying about unexpected session timeouts.
Michael Schmidle
Founder of PrioMind. Start-up consultant, hobby music producer and blogger. Opinionated about strategy, leadership, and media. In love with Mexico. This blog reflects my personal views.
Jul 11, 2024 · 3min read
Integrating Termly With Nuxt 3
Integrating Termly’s consent management with Nuxt 3 turns out to be harder than just inserting a script tag. Here’s a solution that resolves hydration mismatches and UI glitches, ensuring smooth functionality and user experience. Continue…
Nov 15, 2023 · 2min read
Mastering Keyboard Interactions in Shadcn-Vue: A Fix for Complex UIs
In the intricate dance of UI components within Vue applications, a misstep can disrupt the rhythm. Discover how a straightforward tweak can harmonize your keyboard interactions in shadcn-vue in complex nested components. Continue…
Apr 18, 2020 · 6min read
Accelerate Your Website—With Your Logo
Most people who care about their website’s performance probably use a website logo created by vector graphics software. Here’s how to take advantage of vectorized logos to speed up your website. Seriously. Continue…
Aug 18, 2019 · May 14, 2020 · 6min read
Unhide Virtual Network Adapters in Windows 10
In Windows’ latest releases, Microsoft hides virtual adapters and networks by default. In some cases though, you need them to be available just like regular adapters and networks. Continue…