@bg-dev/nuxt-directus-auth v2.0.13

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 composable
• Auto refresh of access token through useDirectusFetch composable
• Route middleware auth protection
• Typescript support

Demo

Follow this link

Installation

npm i @bg-dev/nuxt-directus-auth

Setup

Add @bg-dev/nuxt-directus-auth to your nuxt modules and set directusAuth options

export default defineNuxtConfig({
  //...
  modules: ["@bg-dev/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
      callback: "/auth/callback", // Path to redirect after login with provider
    },
  },
  //...
});

Usage

For protecting routes, 2 possible approachs 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

Notes

• In production, Directus and Nuxt applications SHOULD share the same domain name
• Refer to directus docs for configuration

Appendix

Development

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