Skip to main content

Authentication

This guide will show you how to connect your front end to a Drupal CMS.

Drupal Setup​

Consumers​

A Consumer is used to represent a client that "consumes" an API interface which inherits a set of permissions and access control rules via scopes. Used in tandem with the Simple OAuth module to secure the communication between the front end and the backend by generating client credentials and access tokens.

To create these consumers, we provide you a script that takes care of this task in your drupal installation.

info

This script assumes that you have the configuration provided by the starter recipe

Download the script using the following command and download it to your Drupal root directory temporarily.

curl -s https://raw.githubusercontent.com/octahedroid/drupal-decoupled/main/drupal/scripts/consumers.php > consumers.php

Run the script using drush with the following command.

ddev drush php:script consumers.php

This script will show the necessary information to configure the frontend, make sure to save this information.

Consumers created successfully. Please save the following credentials.
--- Previewer ---
DRUPAL_CLIENT_ID=[previewer-client-id]
DRUPAL_CLIENT_SECRET=[previewer-client-secret]
--- Viewer ---
DRUPAL_CLIENT_ID=[viewer-client-id]
DRUPAL_CLIENT_SECRET=[viewer-client-secret]

Use the previously generated DRUPAL_CLIENT_ID and DRUPAL_CLIENT_SECRET values shown on the CLI according to the scope you want to use, take a look to the concepts section to know more about them.

Clear cache and rebuild permissions​

After creating the consumers, you need to clear the cache to rebuild new routing information, and rebuild the permissions.

ddev drush php-eval 'node_access_rebuild();'
ddev drush cr

Frontend Setup​

Configure the environment variables​

First, we need to copy the .env.example file to a .env file:

cp .env.example .env

Then, open the .env file and update the following variables:

  • DRUPAL_AUTH_URI: The base URL of your Drupal site, e.g.: http://drupal-decoupled.ddev.site.
  • DRUPAL_CLIENT_ID: The client ID of the OAuth client. It can be found in the Drupal admin UI (/admin/config/services/consumer).
  • DRUPAL_CLIENT_SECRET: The client secret of the OAuth client. It can't be read after creation, so you will need to create a new one if you don't have it, to do so go to the Drupal admin UI (/admin/config/services/consumer) and click on the Edit button of the OAuth client you want to use.
  • DRUPAL_GRAPHQL_URI: The GraphQL endpoint of your Drupal site, e.g.: http://drupal-decoupled.ddev.site/graphql.

Test it out​

Now you can run your app:

npm run dev -- --port 8080
tip

The Decoupled Preview Iframe module by default uses the port 8080 to display the preview of the decoupled front end. Update the module configuration to use a different port if needed.

Navigate to http://localhost:8080 to see the Remix app running, you will see the default new Remix index page. If you already added some content to your Drupal site, you can navigate to http://localhost:8080/[node-path] to see the content of the article.

And that's it! You have a front end app connected to your Drupal CMS using GraphQL.