nuxt-directus-auth v1.2.16

Nuxt Directus Auth

A Nuxt 3 module to handle Directus authentication

Features

• Support for Universal and SPA Nuxt 3 applications
• Implements Directus authentication through useDirectusAuth
• Auto refresh of access token through useDirectusFetch
• Route middleware auth protection
• Typescript support
• Lightweight only 14kb

Installation

npm i nuxt-directus-auth

Setup

Add nuxt-directus-auth to your nuxt modules and set directusAuth options

export default defineNuxtConfig({
//...
  modules: ["nuxt-directus-auth"],
  
  directusAuth: {
    baseUrl: "http://localhost:8055", // Directus API base url
    nuxtBaseUrl: "http://localhost:3000", // Nuxt app base url
    enableGlobalAuthMiddleware: false, // Enable auth middleware on every page
    refreshTokenCookieName: "directus_refresh_token", // Directus refresh token cookie name (optional)
    defaultRoleId: "", // Role id assigned for registered users
    redirect: {
      login: "/auth/login", // Path to redirect when login is required
      logout: "/auth/login", // Path to redirect after logout
      home: "/home", // Path to redirect after successful login
      resetPassword: "/auth/reset-password", // Path to redirect for password reset
    },
  },
//...
});

Usage

For protecting routes, 2 possible configuration can be used

• Globally enable and locally disable

enableGlobalAuthMiddleware: true;

definePageMeta({ auth: false })

• Locally enable

definePageMeta({ middleware: "auth" }) // Redirects to login path when not loggedIn 

definePageMeta({ middleware: "guest" }) // Redirects to home path when loggedIn 

Appendix

Development

• Run npm run dev:prepare to generate type stubs.
• Use npm run dev to start playground in development mode.