{"id":16801,"library":"druxt-auth","title":"Druxt Authentication Module","description":"DruxtAuth is a Nuxt.js module designed to streamline authentication for Druxt sites by integrating with Drupal's Simple OAuth2 module and the popular `@nuxtjs/auth` module. It abstracts away much of the boilerplate required for connecting a Nuxt frontend to a Drupal backend using OAuth2. The current stable version is 0.4.0, indicating a pre-1.0 release, with updates and patches released as needed. Its key differentiator is its specific focus on the Druxt ecosystem, providing pre-configured strategies for both Drupal Authorization Code and Password grants, significantly simplifying the setup process for developers building headless Drupal applications with Nuxt. It extends the core functionalities of `@nuxtjs/auth` by providing Drupal-specific endpoints and configurations, making it a go-to solution for authentication within the Druxt project framework.","status":"active","version":"0.4.0","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","auth","authentication","drupal","druxt","module","nuxt","oauth"],"install":[{"cmd":"npm install druxt-auth","lang":"bash","label":"npm"},{"cmd":"yarn add druxt-auth","lang":"bash","label":"yarn"},{"cmd":"pnpm add druxt-auth","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency, likely used for HTTP requests to the Drupal API and OAuth endpoints.","package":"axios","optional":false},{"reason":"Peer dependency, typically used in Node.js environments for parsing request bodies, especially relevant for server-side operations or callback routes.","package":"body-parser","optional":false}],"imports":[{"note":"DruxtAuth is a Nuxt module and is configured in `nuxt.config.js` via the `buildModules` array, not imported as a JavaScript module directly into application code. Options are passed as the second array element.","wrong":"import DruxtAuth from 'druxt-auth'","symbol":"module registration","correct":"export default { buildModules: [ ['druxt-auth', { clientId: '...' }] ] }"},{"note":"The `$auth` object is a plugin injected by `@nuxtjs/auth` (which DruxtAuth configures). It is globally available within Vue components and Nuxt context, not directly imported.","wrong":"import { $auth } from 'druxt-auth'","symbol":"$auth plugin","correct":"this.$auth.loginWith('drupal-authorization_code')"},{"note":"DruxtAuth registers specific strategies: `drupal-authorization_code` and `drupal-password`. Using generic strategy names or non-existent ones will fail.","wrong":"this.$auth.loginWith('oauth2')","symbol":"Drupal Strategies","correct":"this.$auth.loginWith('drupal-password', { data: { username: 'user', password: 'pwd' } })"}],"quickstart":{"code":"module.exports = {\n  // Required for Druxt\n  modules: [\n    'druxt'\n  ],\n  buildModules: [\n    ['druxt-auth', {\n      clientId: process.env.DRUPAL_CONSUMER_UUID ?? 'YOUR_DRUPAL_CONSUMER_UUID',\n      clientSecret: process.env.DRUPAL_CONSUMER_SECRET ?? '', // Required for password grant, keep empty for authorization code\n      scope: ['default'],\n    }]\n  ],\n  druxt: {\n    baseUrl: process.env.DRUPAL_BASE_URL ?? 'https://demo-api.druxtjs.org'\n  },\n  // For password grant, Nuxt must be in SSR mode.\n  // This setting is typically in a server-side context or specific environment configuration.\n  // Example of usage in a Vue component (e.g., pages/login.vue)\n  // <template>\n  //   <button @click=\"login\">Login with Authorization Code</button>\n  // </template>\n  // <script>\n  // export default {\n  //   methods: {\n  //     async login() {\n  //       try {\n  //         await this.$auth.loginWith('drupal-authorization_code');\n  //         console.log('Initiated Authorization Code Flow');\n  //       } catch (error) {\n  //         console.error('Login failed:', error);\n  //       }\n  //     }\n  //   }\n  // }\n  // </script>\n}","lang":"javascript","description":"This quickstart demonstrates how to configure the `druxt-auth` module in your `nuxt.config.js`, including setting up `clientId`, `clientSecret`, and `baseUrl`. It also shows a basic `loginWith` example for the `drupal-authorization_code` strategy within a Vue component, illustrating the client-side interaction."},"warnings":[{"fix":"Ensure `clientId` is set in the `druxt-auth` module options in `nuxt.config.js`, using the UUID of your Drupal OAuth consumer.","message":"The `clientId` option is mandatory for `druxt-auth` to function correctly. Without it, the module cannot identify the Drupal OAuth consumer.","severity":"breaking","affected_versions":">=0.1.0"},{"fix":"Provide `clientSecret` in your `druxt-auth` module options and ensure `target: 'server'` or equivalent SSR setup for your Nuxt project.","message":"When using the `drupal-password` grant, the `clientSecret` option is required and your Nuxt application must be running in SSR (Server-Side Rendering) mode. Client-side-only applications cannot securely use the password grant type with a confidential client.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Carefully follow the Drupal setup instructions for Simple OAuth, ensuring the consumer matches the grant type (Authorization Code with PKCE, or Password with client secret) and the redirect URI is correct.","message":"Incorrect configuration of the Drupal Simple OAuth module (e.g., wrong grant types, redirect URIs, or PKCE settings) will lead to authentication failures.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Consult the official `@nuxtjs/auth` documentation (https://auth.nuxtjs.org/) for detailed information on the `$auth` plugin, strategies, and lifecycle hooks.","message":"The `druxt-auth` module depends on the `@nuxtjs/auth` module. While `druxt-auth` configures it, understanding the underlying `@nuxtjs/auth` documentation can be crucial for advanced use cases or troubleshooting.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"fix":"Ensure `druxt-auth` is listed in `buildModules` in `nuxt.config.js` and `$auth` is accessed within a Vue component method or Nuxt context (e.g., `this.$auth` or `context.$auth`).","cause":"The `$auth` plugin is not properly initialized or accessed outside a Nuxt/Vue component context, or `druxt-auth` module is not correctly registered in `nuxt.config.js`.","error":"TypeError: Cannot read properties of undefined (reading 'loginWith')"},{"fix":"Verify that `clientId` and `clientSecret` (if used) are exact matches to the Drupal OAuth consumer settings. Check the Drupal consumer's UUID and secret, and ensure it's enabled.","cause":"The `clientId` or `clientSecret` provided in `nuxt.config.js` does not match the configured Drupal OAuth consumer, or the consumer itself is misconfigured.","error":"OAuth Error: invalid_client / Invalid client credentials."},{"fix":"Review your Drupal OAuth consumer settings. For 'Authorization Code' grant, ensure 'Use PKCE?' is checked and 'Is Confidential' is unchecked. For 'Password' grant, ensure 'Is Confidential' is checked and a 'New Secret' is provided.","cause":"The Drupal OAuth consumer is not configured for the requested grant type (e.g., trying to use password grant on a consumer configured only for authorization code, or missing PKCE for authorization code).","error":"OAuth Error: unauthorized_client / The client is not authorized to request an authorization code using this method."}],"ecosystem":"npm","meta_description":null}