Build a GDPR-Compliant Chat/Messaging App

The General Data Protection Regulation (GDPR) is an EU data protection law (passed into law in 2018) that determines how companies use and protect EU citizens’ data. While you might feel this doesn’t concern you, it very likely does! As long as you have EU residents making use of your app, you need to follow the regulations on how the EU mandates that its residents’ data is stored.

GDPR is to be taken seriously; non-compliance will lead to a fine of 4% of global annual revenue, or EUR 20 million!

In this tutorial, I will be describing how to build a messaging app with the Stream Messaging API that allows users to export their chat history for a particular chat room. When requesting the chat data, an email address will be requested, and the data will be sent to the provided email, as an attachment that can be downloaded by the user:

Completed-App

Prerequisites

The application will consist of two parts:

  • A server (the backend): We need a backend server to process authentication for the user and to send emails.
  • A client (the frontend): The frontend will be built as a React.js application.

Creating a Stream Application

Before proceeding with the tutorial, you will need to get your credentials from Stream Chat. Once you’ve created your account, you will need to copy the credentials as depicted in the image below and save them somewhere safe, as they will be used to build the server.

  • Go to the Stream Dashboard
  • Create a new application
  • Click on Chat in the top navigation
  • Scroll down to "App Access Keys" to view your credentials.

Stream-Dashboard

Setting Up Your Environment

Now that we have our Stream information, let's set up our local environment by running the following command:

https://gist.github.com/adelowo/7ec469963a153eed42d6e65b3aae3d19

We've just created a directory for our project and moved into it, then made directories (inside our main directory) for our server and client (using create-react-app).

Now that we have the framework for our app let's get to populating it!

Building the Server

To begin building out the server, navigate to the server directory that we just created, by running the following command:

https://gist.github.com/adelowo/cfee138ebee1e91aa1de5e04f01cfaaa

Once the above has been done, the next step is to create the files required to build out the application. We'll do so using a mix of automatic and manual processes. You will need a package.json file, in addition to index.js and models.js files. You can create all of these with the following commands:

https://gist.github.com/adelowo/d5e7d95d9990dadbab764905c2e5fefe

yarn init will prompt some questions to configure the file it will output. You can hit the enter key for it to select defaults. At the end of the process, a package.json file is going to be created.

The next step is to add the packages we'll be using by employing yarn. The following command will take care of all of those installations:

https://gist.github.com/adelowo/a7e77bd0fa0ef2c2124879f472b52171

Depending on your internet connection, installing these packages might take some time. Once it all succeeds, the next step is to open the models.js file in your editor and paste the following code in it:

https://gist.github.com/adelowo/423335826024a85a88542b11ed9a1183

In the above, we define a User model, as we will need to store users’ username and their password, to make it easy for them to return to the application at any given time.

Setting Up Routes and Handlers

The next step is to define HTTP routes and handlers. You will need to open up the index.js file in an editor and paste the following code:

https://gist.github.com/adelowo/7282cbc1521045a79271ecb3a57609da

There is quite a lot going on in the above code; let's do a breakdown of what it does:

  • Creates and maintains a connection to MongoDB. We close the connection from when a SIGINT is received to prevent leakages. A SIGINT is a shutdown event that is sent when you hit CMD+C or CTRL+C - depending on your operating system.
  • It creates an SMTP connection, which will allow us to send the user their chat history.
  • Establishes a connection to Stream Chat.
  • Creates an API endpoint, users/auth. This acts as the authentication resource. It takes a username and password combination and decides if the user should be let into the application or not. If the username can be found in the database, password verification checks are run to make sure access is granted to the right person. If the username does not exist yet, a new account is created, and the user can proceed to make use of the app.

We still need a second API endpoint, to act as the resource for exporting a user’s chat history, and also sending it out to their email. That can be done with the following code:

https://gist.github.com/adelowo/63b0e3458fd6f639f18fd7332fc39eb5

With the above, the server functionality has been built out, but we need to set up the environment variables, to make sure it has access to the right credentials to run correctly. You will need to create a .env file, which you can do using the following command:

https://gist.github.com/adelowo/beb9aa4050e7be5d742b2dbb0252cf53

In the .env file, paste the following configuration and edit it to use the credentials for your environment:

https://gist.github.com/adelowo/6f0e653dc34dae3a044a0df63353a4eb

Please note that for the SMTP connection, you have a few options. If you have docker installed on your computer, you can run docker run -d -p 1025:1025 -p 8025:8025 mailhog/mailhog, and leave the configuration as it is, except for changing SMTP_FROM_ADDRESS to an address of your choice. If you don’t have docker installed, you can make use of Gmail’s SMTP information or Mailtrap.

As a final step, you need to start the server:

https://gist.github.com/adelowo/7ca5720bafcfb171af76527f8a1c3d6f

Building the Client

The first step here will be to return to the client directory we created when we ran npx create-react-app client:

https://gist.github.com/adelowo/7d013f075f612c2ff7b7437f2538d53b

The command we ran to initiate the client directory created many files we'll need. Still, we’ll also need to create two more files (Login.js and ChatView.js) and install some packages (stream-chat-react, stream-chat, axios, and bootstrap) to create our app buildout successfully. The following command can be used to do this:

https://gist.github.com/adelowo/0309315284dbcf3cda4d2f435c7ed4d8

Depending on your internet connection, this might take a minute.

Let's Get Coding

Our application is going to consist of two pages:

  • The authentication page: This doubles as the homepage. The user will be required to provide their password to gain access to the application.
  • The chat page: This is where the user will be able to chat with other users and export their chat history.

The first step in building these out is to update your App.js file with the following code, replacing its existing contents:

https://gist.github.com/adelowo/a540f034ea69f2e24c2e23020cd32d71

Please replace STREAM_CHAT_API_KEY with the unique key you grabbed from your Stream dashboard.

Next in line is going to be the newly created Login.js file! This file is going to contain the component that will render the authentication page. In App.js, there is a check that says "show Login page if the user is not authenticated". In the Login.js file, you will need to paste the following code:

https://gist.github.com/adelowo/98d328f9ecb3cf9a14d85b5682593b64

With that done, the last required change will be to ChatView.js; this is the page where the chatting experience happens, and also where the user will have the opportunity to export their chat history. In ChatView.js, paste the following code:

https://gist.github.com/adelowo/409101aa003955910f50e25905dd5f41

One thing to note here is that this also describes how to extend the chat UI with a custom made component. In the example above, we have created a button which, when clicked, will open a modal to collect the user’s email address, where the chat data will be sent.

Seeing the App in Action

Finally, you will need to run the client app as a whole. That can be done using:

https://gist.github.com/adelowo/043137f1e5bf16b186195d2c0f609ccb

The app displayed when you run the above command should look a lot like this:
Gif-of-Functioning-GDPR-App

Wrapping Up

In this tutorial, we made use of Stream Chat to build a fully functional chat application that allows users to communicate, while also allowing them to export their chat data, whenever needed. You can improve on this by making the user request for data deletion.

You can find the full source code on GitHub.

Happy Coding!

TutorialsChat