Create OAuth Client

Setup an OAuth client to be used for authenticated content.

Before we can create an OAuth consumer, we need to create a new role and a user for OAuth scopes.

As from next-drupal 1.5, user roles are used for OAuth scopes. The scopes are automatically handled for the preview based on the currently logged in user.

1. Create Role

  1. Visit /admin/people/roles.
  2. Click on + Add role.
  3. Fill in the Role name. Example: Next.js Site.

2. Assign Permissions

Next, assign the following permissions to the newly created role.

  • Bypass content access control
  • Issue subrequests
  • View user information

We are assigning the Bypass content access control permission to allow Next.js to access unpublished content and revisions.

This scope is only going to be used when making authenticated requests from Next.js to Drupal.

const articles = await drupal.getResource(
  "node--article",
  "dad82fe9-f2b7-463e-8c5f-02f73018d6cb",
  {
    withAuth: true,
  }
)

3. Create User

Add a new user at /admin/people/create and assign them all the roles that are going to be used for scopes, including the administrator role and the role we created above.

4. Generate keys

Generate a pair of keys to encrypt the tokens. Store them outside of your document root (web directory) for security.

  1. Visit /admin/config/people/simple_oauth
  2. Click Generate keys to generate encryption keys for tokens
  3. Fill in Directory for the keys.
  4. Click Generate.

You can also use openssl to generate keys:

openssl genrsa -out private.key 2048
openssl rsa -in private.key -pubout > public.key

5. Create Consumer

  1. Visit /admin/config/services/consumer/add
  2. Fill in the following values:
  • Label: Next.js site
  • User: Select the user we created
  • Secret: Your secret
  • Scopes: Select the role we created
  1. Click Save

Important: note the client id (uuid) and the secret. These are going to be used as environment variables for the Next.js site.

6. Connect Drupal

To connect the Next.js project to Drupal, we use environment variables.

Fill in the following variables in your .env.local file.

.env.local

# Authentication (Bearer)
DRUPAL_CLIENT_ID=
DRUPAL_CLIENT_SECRET=

6. Update DrupalClient

Update the DrupalClient to use the Bearer authentication header.

lib/drupal.ts

import { DrupalClient } from "next-drupal"


export const drupal = new DrupalClient(
  process.env.NEXT_PUBLIC_DRUPAL_BASE_URL,
  {
    auth: {
      clientId: process.env.DRUPAL_CLIENT_ID,
      clientSecret: process.env.DRUPAL_CLIENT_SECRET,
    },
  }
)
Create Next.js siteConfigure Preview Routes