While working on a Flutter application, I used Drupal as a backend for storing all the users as well as the application data. I don’t know how many apps are using this stack but I was really happy how a lot of things could be done easily with Drupal without compromising on security and performance of the system. Most of the required functionality was achievable just by doing the right configuration, thanks to the API first approach of Drupal core and some useful contributed modules. After adding a stable release for my mobile application, I decided to write this blog post to share how easy and time-saving it is to go with Drupal as your data storage system.

Let’s assume a sample use case for our application, so that it is easier for you to understand what is already available even before you start your app development. In our app, users will be able to see a few static pages that can be edited by the administrators from Drupal, they will be able to login into the app using Email-Password or OTP on mobile or using Google/Facebook. After login, users will be able to see posts done by other logged-in users and post content themselves. Let’s look at the actual steps for setting up the back end for your mobile app.

Setup Drupal

You can either set up Drupal in local and then move it to the server or start with an already hosted Drupal instance on a VPS, public cloud, or managed hosting service provider. Just make sure you have CLI access to your Drupal instance so that you can install and enable modules and your app is able to access data from it via the REST APIs. In case you just want to try out things, go with a demo instance on a managed hosting service provider such as Pantheon, Acquia Cloud, or Platform.sh.

Creating static pages and exposing them over API 

Once you have completed the Drupal setup and also ensured that the app has access to it, you can now start configuring CMS as well as adding data that has to be displayed to the users of the mobile app. If you chose the “Standard” installation profile for installing Drupal, you would already have a “Basic Page” content type on your website. If not, then follow the instructions on this page to create a content type with a title and body field.

Since it is common (and mandatory) to have a privacy policy page, we will go ahead and create one. Make sure you are only adding text values in the body field as HTML data has no significance in a Flutter application. This will also save you from the step of filtering text data out of HTML content.

Now since we have added a page, we can move to the part where we would be exposing this page over an API. The very first step is to enable the core module ‘JSON:API’ and make sure it is configured to ‘Accept all JSON:API create, read, update, and delete operations.’ in the settings of the allowed operation on ‘/admin/config/services/jsonapi’. For authentication, I have also enabled the core module ‘HTTP Basic Authentication’ and also restricted the content access permission only to the authenticated users. You are free to configure content access as per your requirement. Check this to ensure best security practices are in place for using JSON API. The Drupal user credentials for accessing data can be stored as either environment variable or stored in the proxy server that would be making requests to Drupal.

Here is the request object for getting data from Drupal.

Key	Value
GET	https://{drupal-instance-URL}/jsonapi/node/page/{node-uuid}
Basic Authentication	Provide the username and password of the user with access to content.

Now you can start working on logic to fetch data from the API that we configured just now. You can follow this post in the official documentation for easy implementation in Flutter. The Flutter also has a JSON API package for easily accessing Drupal data.  And that’s a simple procedure of fetching static content from Drupal and displaying it in your Flutter application.

User login in the Flutter app

You can use Drupal for storing user data as well. The authentication of a user can also be handled via the APIs provided by Drupal. It should be your go-to system for everything related to users until and unless you are using a 3rd party app for SSO or something like Microsoft Active Directory. Since ‘User’ is also an entity in Drupal, all the user-related data can also be fetched just like node data. Make sure you have set appropriate permission related to access of user data via JSON:API. Here are some possible scenarios and solutions for authenticating users in your Flutter app.

Login using REST API

This method would require you to gather the username and password in your Flutter application and hit a set of APIs to generate a session. Steps to enable API endpoint in Drupal:

1. Install and enable the contributed module REST UI. It is recommended to use a composer for module installation and enabling this module will also enable the REST module in Drupal core.
2. Go to ‘/admin/config/services/rest’ and enable endpoints for the ‘User’ resource. Set granularity to resource, the method to GET, format to JSON, and authentication as basic auth respectively.
3. Fetch a CSRF token by making the following request:

Key	Value
GET	https://{drupal-instance-URL}/session/token

4. And this request for login. If successful you would get user details, a CSRF token, and a logout token.  

Key	Value
POST	https://{drupal-instance-URL}/​​user/login?_format=json
X-Csrf-Token	CSRF token attained in the #3
Data	{name: {username } pass: {password}} (The data entered by the user in the Flutter app)

Login using Email and Password

The process of login via email is similar to login using REST API once you install ‘REST Mail Login’ module. In this case, you would be collecting email and password from the app user and the minor changes in the API request can be noted from the modules page on Drupal.org.

Login using OTP

It is pretty common nowadays to have login via OTP in mobile apps. In my opinion, this is much better than traditional password authentication as users don’t have to memorize passwords and apps are automatically able to read OTP from the SMS. Let’s look at the exact steps to implement such a system with Drupal.

1. Install and enable the OTP Login module. Currently, the module has an issue of not installing dependencies when installed via composer. So you will have to manually install the SMS Framework module as well.
2. Configure the SMS module as per the official documentation. Here, you will have to do some basic settings and supply the credentials obtained from the SMS service provider. The user field including the ‘Phone Number’ and message text will also be configured via these settings.
3. Enable login via OTP from the settings available on ‘/admin/config/people/otp_login’ and REST endpoint for OTP login from ‘/admin/config/services/rest’. Enabling this endpoint will allow you to initiate a request of generating OTP for a mobile number.

Key	Value
POST	https://{drupal-instance-URL}/otp/generate
Basic Authentication	These could be credentials of your dummy user to access the REST API.
Data	{“mobile_number”: “USER NUMBER”}

Login using Google/Facebook

For enabling login via social websites, you will first have to implement the respective Flutter package and on successful authentication hit the required API endpoint in Drupal with information such as user’s email and token provided by the respective website. You can use the main “Social Auth” module along with other contributed modules that extend to set up the required endpoints in Drupal. “Social Auth Google API” and “Social Auth Facebook API” are specific modules for Facebook and Google respectively. 

Displaying content in the Flutter app

So we have already worked on showing static content in the app as well as handling user login in different ways. The next feature of our app is to display the listing of all the posts that are stored in Drupal. For this purpose, you can either use a generic JSON:API endpoint without any UUID or create a REST export view in Drupal to fetch content. The JSON:API has a fixed response and requires customization from code to alter the response. You can also explore the “JSON:API Extras” module for altering the response as per your requirement. On the other hand, a REST export view will allow you to have full control over response data, format, and access. This blog explains in detail the REST export views.

Posting data to Drupal

The last feature in our app allows users to submit data in the application to be displayed in the common listing. After, implementing the required form in Flutter you can use the POST endpoint provided by JSON API to save content in Drupal. Since we have already enabled CRUD operations, we don’t have to enable anything else for this feature in Drupal. The request structure would depend upon fields (and constraints) in your content type. You can follow this guide for posting content to Drupal.