Authenticating with Drupal Using Nuxt 3 and @sidebase/nuxt-auth
Overview This describes how to authenticate with Drupal using Nuxt 3 and @sidebase/nuxt-auth. Background The following article introduced a method for authenticating with GakuNin RDM. The following article introduced a method for using Drupal OAuth from Next.js. Using these as reference, we use Drupal OAuth from Nuxt 3. Method The source code can be found in the following repository. https://github.com/nakamura196/nuxt-rdm Specifically, the implementation is here. https://github.com/nakamura196/nuxt-rdm/blob/main/server/api/auth/[…].ts { id: "drupal", name: "Drupal", type: "oauth", clientId: useRuntimeConfig().drupalClientId, clientSecret: useRuntimeConfig().drupalClientSecret, authorization: { url: process.env.DRUPAL_AUTH_URL, params: { scope: process.env.DRUPAL_SCOPE, response_type: "code", redirect_uri: `${ useRuntimeConfig().nextAuthUrl }/api/auth/callback/drupal`, }, }, token: { async request(context) { const body = new URLSearchParams({ client_id: useRuntimeConfig().drupalClientId, client_secret: useRuntimeConfig().drupalClientSecret, code: context.params.code || "", grant_type: "authorization_code", redirect_uri: `${ useRuntimeConfig().nextAuthUrl }/api/auth/callback/drupal`, }); const res = await fetch(process.env.DRUPAL_TOKEN_URL || "", { method: "POST", headers: { "Content-Type": "application/x-www-form-urlencoded", }, body, }); const json = await res.json(); // Parse the response body once if (!res.ok) { throw new Error(`Token request failed: ${res.statusText}`); } return { tokens: json }; }, }, profile(profile) { return { id: profile.sub, // Use "sub" as the user's unique ID name: profile.name || profile.preferred_username || "Unknown User", // Set name priority email: profile.email || "No Email Provided", // Fallback when no email image: profile.profile || null, // Use profile URL as image (adjust as needed) }; }, }, Summary There may be some errors, but I hope this serves as a helpful reference. ...
