# Authenticated request
✋ CAUTION
This guide might not be up-to-date with Strapi v4. We are currently reworking the "Guides" section as most of the features they cover are now part of Strapi's core.
In this guide you will see how you can request the API as an authenticated user.
# Introduction
To show you many of the concepts on the roles and permissions part, we will use many users and roles.
After that we will see the authentication workflow to get a JWT
and use it for an API request.
We will have one group of users that will be able to only fetch Articles and an other group that will be able to fetch, create and update Articles.
# Setup
# Create Content Type
Lets create a new Content Type Article
- Click on
Content-Type Builder
in the left menu - Then
+ Create new content-type
- Fill
Display name
witharticle
- Create 2 fields
- Text short named
title
- Rich text named
content
- Text short named
- And save this new Content Type
Then create some Articles from the Content Manager.
# Create Roles & Permissions
We will create 2 new groups to manage available actions for different kind of users.
- Click on
Settings
in the left menu - Select the
Roles
underUSERS & PERMISSIONS PLUGIN
section - Then
+ Add New Role
- Fill
name
withAuthor
- Check
Select All
for the Application Article Content Type. - And save the new role
And repeat the operation for the Reader
group and check find
, findOne
and count
.
# Create users
Finally create 2 users with the following data.
User 1
- username: author
- email: author@strapi.io
- password: strapi
- role: Author
User 2
- username: reader
- email: reader@strapi.io
- password: strapi
- role: Reader
# Login as a Reader
To login as a user your will have to follow the login documentation.
Here is the API route for the authentication /api/auth/local
.
You have to request it in POST.
The API response contains the user's JWT in the jwt
key.
{
"jwt": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwiaWF0IjoxNTc2OTM4MTUwLCJleHAiOjE1Nzk1MzAxNTB9.UgsjjXkAZ-anD257BF7y1hbjuY3ogNceKfTAQtzDEsU",
"user": {
"id": 1,
"username": "reader",
...
}
}
You will have to store this JWT
in your application, it's important because you will have to use it the next requests.
# Fetch articles
Let's fetch Articles you created.
To do so, you will have to fetch /articles
route in GET.
import axios from 'axios';
const { data } = await axios.get('http://localhost:1337/articles');
console.log(data);
Here you should receive a 403 error because you are not allowed, as Public user, to access to the articles.
You should use the JWT
in the request to say that you can access to this data as Reader user.
import axios from 'axios';
const { data } = await axios.get('http://localhost:1337/articles', {
headers: {
Authorization:
'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwiaWF0IjoxNTc2OTM4MTUwLCJleHAiOjE1Nzk1MzAxNTB9.UgsjjXkAZ-anD257BF7y1hbjuY3ogNceKfTAQtzDEsU',
},
});
console.log(data);
And tada you have access to the data.
# Create an Article
To do so, you will have to request the /articles
route in POST.
import axios from 'axios';
const { data } = await axios.post(
'http://localhost:1337/articles',
{
title: 'my article',
content: 'my super article content',
},
{
headers: {
Authorization:
'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwiaWF0IjoxNTc2OTM4MTUwLCJleHAiOjE1Nzk1MzAxNTB9.UgsjjXkAZ-anD257BF7y1hbjuY3ogNceKfTAQtzDEsU',
},
}
);
console.log(data);
If you request this as a Reader user, you will receive a 403 error. It's because the Reader role does not have access to the create function of the Article Content Type.
To fix that you will have to login with the Author user and use its JWT
into the request to create an Article.
With that done, you will be able to create an Article.