Strapi
Posted By Sebastian

Getting Started With Strapi EP3: Authentication


Subscribe On YouTube

Episodes

In the last episode we’ve created custom collection types by using Strapi’s admin panel. We’ve also added some sample data into the newly created collection types and we’ve started to use the REST API which is automatically provided for collection types.

So far we’ve used only unauthenticated access to retrieve data from Strapi by using HTTP GET requests in the browser. Therefore we’ve added corresponding collection types permissions to the Public role.

In this episode we’ll continue using the automatically generated REST API Strapi is providing for our custom collection types. This time we’ll not limit it to only retrieve data by using an HTTP GET request. We’ll also create new data by using an HTTP POST request. However, creating new data should not be possible for unauthenticated users. So we need to:

  • Add the corresponding permissions for the creation of data to the Authenticated role only
  • Create a new user which is assigned to the Authenticated role
  • Perform authentication by using JWT
  • Perform the HTTP POST request in an authenticated way

Using just the browser to send HTTP GET request to the Strapi API in the last episode is an approach which is very limiting when we want to have full control over our requests. Therefore we’ll switch to a tool which is called Postman. With Postman we’re able to take full control of our HTTP requests and responses.

Using Postman

If you have not installed Postman yet the first step is to go to https://www.postman.com/ and download and install Postman in your system.

10.png

Once you have installed Postman successfully you can open up the application and you should be able to see the main application screen:

20.png

Sending A HTTP GET Request With Postman

Now that Postman is available we’re able to execute the same HTTP GET request we’ve sent via browser in the last episode via Postman. Open up a new tab in Postman and insert URL http://localhost:1337/courses/ as you can see in the following screenshot. Hit button Send to retrieve the result:

25.png

Sending A HTTP POST Request With Postman

Now let’s use Postman to send a HTTP POST request in order to create a new course record to the same endpoint. Open a new tab, select POST from the selection list of available request types and insert the URL http://localhost:1337/courses once again.
Furthermore you need to add the data of the new course to the body section of the request. Select the option “raw” and choose “JSON” from the dropdown list:

30.png

When sending this request we’re getting back a response object with response code 403 – Forbidden. This should not be a surprise because in the last episode we’ve not added permissions to create, update, or delete data to the Public role. Because we’re still trying to send this request in an unauthorized way the permissions of the Public role apply and we’re not succeeding with the request.

To solve that issue we’ll go through the steps which are needed to perform the same HTTP POST request in an authenticated way.

Create A New User With Authenticated Role

First we need to create a new user, so that we’re able to assign the role Authenticated to this user. Open the Users collection type and use button Add New user to add a new user to the collection:

40.png

In the Create an entry dialog you need to input the details of the new user (username, email, passwort …) and at the same time you can assign the role Authenticated to this new user.

After having completed the data entry form you can create the new user by clicking on button Save.

50.png

Add Permissions To Authenticated Role

Now that we have a new user with the Authenticated role assigned we need to make sure that this role is containing the needed permissions. In the left-side menu click on Roles & Permissions and open the role Authenticated:

60.png

In the Permissions sections select all available actions for the Course and Author collection type and save those settings by clicking on button Save in the upper right corner. If we’re now authenticating with the previously created user (which is assigned to the role Authenticated) we should be able to create, update, and delete Courses and Authors as well by sending the corresponding HTTP requests.

Using JWT For Authentication

To perform the authentication prior to the HTTP POST request we’ve used before we need to send first a POST request to endpoint http://localhost:1337/auth/local to use JWT (JSON Web Tokens) for authentication. The POST request needs to contain the credentials (username and password) which should be used for authentication in JSON format. The username needs to be assigned to a property which is called identifier and the password needs to be assigned to a property which is called password:

80.png

When sending this request you’ll receive a JSON object in return. This object contains the jwt property which contains the JSON Web Token value which we we’ll need to include in the second request in order to execute this request in an authenticated way.

So let’s do so, by switching back to our original request and open up tab Authorization. In the Type dropdown list select entry Bearer Token and insert the JSON Web Token value into the Token input field.

90.png

Keep the rest (e.g. request body) and try to execute this POST request to create a new course record by hitting button Send.

Because we’ve provided the necessary authorization information we’re no longer receiving the

100.png

Advertisement: Top Online Courses

If you’d like to learn Strapi from the ground up you should take a look at the following great Strapi online course:

The Complete Strapi Course*
Build Apps at the speed of thought with the simplest most versatile open source headless CMS

Go To Course*

* Affiliate Link / Advertisement: This blog post contains affiliate links, which means that if you click on one of the product links and buy a product, we’ll receive a small commission. There are no additional costs for you. This helps support the channel and allows us to continue to make videos like this. Thank you for the support!


Using and writing about best practices and latest technologies in web design & development is my passion.