Druxt Authentication Module

Common errors

• TypeError: Cannot read properties of undefined (reading 'loginWith')

  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`.
  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`).

• OAuth Error: invalid_client / Invalid client credentials.

  cause The `clientId` or `clientSecret` provided in `nuxt.config.js` does not match the configured Drupal OAuth consumer, or the consumer itself is misconfigured.
  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.

• OAuth Error: unauthorized_client / The client is not authorized to request an authorization code using this method.

  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).
  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.

Warnings

• breaking The `clientId` option is mandatory for `druxt-auth` to function correctly. Without it, the module cannot identify the Drupal OAuth consumer.
  Fix: Ensure `clientId` is set in the `druxt-auth` module options in `nuxt.config.js`, using the UUID of your Drupal OAuth consumer.
• gotcha 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.
  Fix: Provide `clientSecret` in your `druxt-auth` module options and ensure `target: 'server'` or equivalent SSR setup for your Nuxt project.
• gotcha Incorrect configuration of the Drupal Simple OAuth module (e.g., wrong grant types, redirect URIs, or PKCE settings) will lead to authentication failures.
  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.
• gotcha 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.
  Fix: Consult the official `@nuxtjs/auth` documentation (https://auth.nuxtjs.org/) for detailed information on the `$auth` plugin, strategies, and lifecycle hooks.

Install

• npm install druxt-auth npm
• yarn add druxt-auth yarn
• pnpm add druxt-auth pnpm

Imports

• module registration
  wrong:

  import DruxtAuth from 'druxt-auth'

  correct:

  export default { buildModules: [ ['druxt-auth', { clientId: '...' }] ] }

  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.
• $auth plugin
  wrong:

  import { $auth } from 'druxt-auth'

  correct:

  this.$auth.loginWith('drupal-authorization_code')

  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.
• Drupal Strategies
  wrong:

  this.$auth.loginWith('oauth2')

  correct:

  this.$auth.loginWith('drupal-password', { data: { username: 'user', password: 'pwd' } })

  DruxtAuth registers specific strategies: `drupal-authorization_code` and `drupal-password`. Using generic strategy names or non-existent ones will fail.

Quickstart

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.

module.exports = {
  // Required for Druxt
  modules: [
    'druxt'
  ],
  buildModules: [
    ['druxt-auth', {
      clientId: process.env.DRUPAL_CONSUMER_UUID ?? 'YOUR_DRUPAL_CONSUMER_UUID',
      clientSecret: process.env.DRUPAL_CONSUMER_SECRET ?? '', // Required for password grant, keep empty for authorization code
      scope: ['default'],
    }]
  ],
  druxt: {
    baseUrl: process.env.DRUPAL_BASE_URL ?? 'https://demo-api.druxtjs.org'
  },
  // For password grant, Nuxt must be in SSR mode.
  // This setting is typically in a server-side context or specific environment configuration.
  // Example of usage in a Vue component (e.g., pages/login.vue)
  // <template>
  //   <button @click="login">Login with Authorization Code</button>
  // </template>
  // <script>
  // export default {
  //   methods: {
  //     async login() {
  //       try {
  //         await this.$auth.loginWith('drupal-authorization_code');
  //         console.log('Initiated Authorization Code Flow');
  //       } catch (error) {
  //         console.error('Login failed:', error);
  //       }
  //     }
  //   }
  // }
  // </script>
}