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.

The OAuth related instructions below are based on the 6.x version of the Simple OAuth module.

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
  • View all revisions

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 article = 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 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. For example a relative path like ../
  4. Click Generate
  5. Click Save configuration

You can also use openssl to generate keys in the directory you used above:

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

5. Create Scope

  1. Visit /admin/config/people/simple_oauth/oauth2_scope/dynamic/add
  2. Fill in the following values:
  • Machine-readable Name: nextjs_site
  • Description: Next.js Site
  • Grant Types: Client Credentials
  • Granularity: Role
  • Role: Next.js Site
  1. Click Save

6. Create Consumer

  1. Visit /admin/config/services/consumer/add
  2. Fill in the following values:
  • Label: Next.js site
  • Client ID: nextjs_site (or generate a UUID if preferred)
  • Secret: Your secret
  • Grant Types: Client Credentials
  • Scopes: nextjs_site
  • User: Select the user 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.

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

8. Update NextDrupal client.

Update the NextDrupal client to use the Bearer authentication header.

lib/drupal.ts

import { NextDrupal } from "next-drupal"


const baseUrl = process.env.NEXT_PUBLIC_DRUPAL_BASE_URL as string
const clientId = process.env.DRUPAL_CLIENT_ID as string
const clientSecret = process.env.DRUPAL_CLIENT_SECRET as string


export const drupal = new NextDrupal(process.env.NEXT_PUBLIC_DRUPAL_BASE_URL, {
  auth: {
    clientId,
    clientSecret,
  },
  withAuth: true,
})
Create Next.js siteConfigure Draft Routes