•March 26th 2020
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 chat app with Stream Chat 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:
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.
Setting Up Your Environment
Now that we have our Stream information, let's set up our local environment by running the following command:
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
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:
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
models.js files. You can create all of these with the following commands:
yarn initwill 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.jsonfile 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:
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:
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:
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
SIGINTis received to prevent leakages. A
SIGINTis a shutdown event that is sent when you hit CMD+C or CTRL+C - depending on your operating system.
- It creates an
SMTPconnection, 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
passwordcombination and decides if the user should be let into the application or not. If the
usernamecan be found in the database,
passwordverification checks are run to make sure access is granted to the right person. If the
usernamedoes 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:
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:
.env file, paste the following configuration and edit it to use the credentials for your environment:
Please note that for the
SMTPconnection, 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_ADDRESSto 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:
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:
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 (
ChatView.js) and install some packages (
bootstrap) to create our app buildout successfully. The following command can be used to do this:
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:
STREAM_CHAT_API_KEYwith 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:
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:
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:
The app displayed when you run the above command should look a lot like this:
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.