Headless CMS

Definitions & benefits

Tools & Concepts

Open source

Features

Authentication

Custom plugins & Marketplace

Webhooks

Multilingual CMS

APIs

Dynamic Zones

User roles & permissions

Content Modeling

Security & Privacy

Use Cases

Ecommerce

Blog

Forum

About Strapi

Life at Strapi

Releases & Roadmap

Events

Community

News

The Tutorials section covers an introduction to Strapi, some advanced technical content, product updates and releases. From basic workaround to in-depth development guides. 

Tutorials

How tos

Get all the latest updates, news and events.

Subscribe to the newsletter 📣

## Introduction

In web development, knowing authorization and authentication mechanisms is essential for developers to understand. The popular methods to handle this procedure are JSON Web Tokens (JWT) and cookie storage.

This post will review the definitions, structures, advantages, and disadvantages of JWT and cookie storage. Finally, we will compare the two to help you decide which is best for your project.

## What is a JWT?

A [JWT](https://jwt.io/introduction) is a proposed standard for making data with a signature and/or encryption that holds JSON with claims. The tokens are signed using a secret (with the HMAC algorithm) or a public/private key using RSA or ECDSA.

### JWT Structure

A well-compacted formed JSON Web Token consists of three concatenated Base64url-encoded strings, separated by dots (.):

1. **The JWT Header:** It contains metadata about the type of token and the cryptographic algorithms used to secure its contents. for example;

```json
{
  "alg": "HS256",
  "typ": "JWT"
}
```
2. **The JWT payload:** The second part of the token is the payload, which contains the claims. Claims are statements about an entity (typically, the user) and additional data. There are three types of claims: registered, public, and private claims:

    * **Registered claims**: These are a set of predefined claims which are not mandatory but recommended, to provide a set of useful, interoperable claims.
    * **Public claims:** These can be defined at will by those using JWTs. To avoid collision they can be defined as a URL that contains a resistant namespace.
    * **Private claims**: These are the custom claims created to share information between parties that agree on using them and are not registered as public claims.

     for example, the payload could be like this;
```json
{
  "sub": "1234567890",
  "name": "user",
  "admin": true
}

```
3. **The JWT signature:** The signature is used to verify the message wasn't changed along the way, and, in the case of tokens signed with a private key, it can also verify that the sender of the JWT is who it says it is.

```json
HMACSHA256(
  base64UrlEncode(header) + "." +
  base64UrlEncode(payload),
  secret)
```

The output can be easily passed into an HTML or HTTP environment. 

A typical JWT appears as follows: 
```
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6ImV4YW1wbGVfdXNlciIsImlhdCI6MTUxNjIzOTAyMn0.eAuqcdegpATdo_fsYMBjJZAGi7hEa_Qba_RDvFnBKSI
```


### Common uses for JWT
Here are some scenarios where JSON Web Tokens are useful:

* **Information Exchange**: Sending and receiving information securely between parties can be accomplished with JSON Web Tokens.
* **Authentication:** This is to identify users and restrict them via particular endpoint functions. if it's successful, the server will generate a JSON web token as a response to the client.
* **Authorisation**: When a client logs in, a server that uses JWT for authorization will generate a JWT. Since this JWT has been signed, no other party may change it.

The main use of JWT is authentication. As long as valid users are still logged into their respective platforms and each API request doesn't demand continuous credential verification, users don't have to constantly verify their identities for every API call because services offer tokens with user data upon login.

![001-jwt-generation.png](https://api-prod.strapi.io/uploads/001_jwt_generation_9380cdca6a.png)

The above image process is explained below;
1. The client requests authorization to the authorization server. This is always performed through different authorization flows.
2. When the authorization is granted, the authorization server returns a web token to the client's applications.
3. The application uses the web token to access protected resources or information (like an API).

### Code implementation 
This section explains the code implementation of how to set JWT on your website. This can be done with several languages of your choice.

The code used here is for the PHP language.

```php
// Including the dependencies 
require_once 'clients/autoload.php';

use \Firebase\JWT\JWT;

// Your secret key to sign the token
$secretKey = 'secret_key_here';

// Payload for the token, containing any data you want to include or share
$payload = array(
    "user_id" => 123,
    "username" => "example_user",
    "exp" => time() + (60 * 60 * 24) // Expiration time, 1 day from now
);

// Generating the JWT to your clients 
$token = JWT::encode($payload, $secretKey, 'HS256');

echo $token;
```

The above code is explained below

* `require_once 'clients/autoload.php';`: This line of code is to include the autoloader file from the installed dependencies which is the `Firebase/JWT` library.
* `use \Firebase\JWT\JWT;`: This line of code allows the import of the JWT class from the `Firebase JWT library`. 

* ``$secretKey = 'your_secret_key_here';``: This variable is to store the secret key used to sign JWT.


`$payload = array(...);`: This array contains the claims you want to include in the JWT. This might include the above claims in the example or more. The `exp` claim is set for 24 which means the `Token` will expire in 24 hours.

```php
// Generating the JWT to your clients 
$token = JWT::encode($payload, $secretKey, 'HS256');
```

* ``$token = JWT::encode($payload, $secretKey, 'HS256');``: This line of code generates the `Token` using the `encode` method of the JWT class. 
* ``$payload``: The claims to be included.
* ``$secretKey``: The secret key used to sign the JWT.
* `'HS256'`: This is the widely used and secure algorithm used for signing the JWT.
* `echo $token`: This code is to output the JWT generated to the screen which can be used for subsequent Authentication and data exchange.


![002-jwt-encoder.png](https://api-prod.strapi.io/uploads/002_jwt_encoder_2b58387eee.png)> Debugger: [Jwt.io](https://jwt.io)

### JWT: Best Practices

In the Best practice, users  should therefore heed to recommended guidelines that listed below:

1. Limited scope specifications that limit read/write rights to only those activities that are necessary
2. Removing old entries regularly reduces cumulative bloat
3. Implementing HTTPS requirements to prevent spying and eavesdropping
4. Putting in place strong anti-CSRF defences to strengthen defences against automated exploits.

## Advantages and Disadvantages of using JWT

We would look at the pros and cons of using JSON web tokens in your web application;
                     
### Advantages of Using JWT 

There are benefits to using JWTs. 

1.	**Stateless Authentication:** Stateless nature eliminating reliance upon central databases. This will enable the scaling and load balancing easier because the server does not have to keep track of the session status of each user
2.	**Support:** Ease of implementation due to readily available libraries supporting diverse programming languages
3.	**Authorization:** JWTs help servers decide who can do what, like user roles and permissions.
4.	**Cross-Origin Resource Sharing (CORS):** JWTs in HTTP headers make web apps communicate securely across different origins.
 
### Disadvantages of Using JWT
However, several downsides must be considered before adopting JWT fully:
1.	**Cookie Size Factor:** This will cause an increase in the payload size, the size of JWT is larger than the session token and this may negatively impact system performance as a whole.
2.	**Revocable Tokens:** Absence of revocation capabilities necessitates either short lifespans prone to frequent refreshes or employing external blacklist registries imposing extra infrastructure costs
3.	**Security risk:** It is vulnerable to XSS attacks unless adequately protected, especially given increased surface areas exposed via single-page applications (SPA)
4.	**Limited Token Updates:** JWTs are usually unchangeable once issued. If a user’s role or permissions change, they might have to log in again to get an updated token.

## What is Cookies storage?

In this section, we will understand what cookie storage is, how it works, and its types, including best practices.

This was introduced first by the Netscape Communications Corporation in 1994.

In every visit to some websites, sites serve "Set-Cookie" headers telling the user's or client browser to save given name-value pairs and optional features that indicate duration. This indicates how long a cookie can persist and under what condition it should be sent to the server. This action allows websites to track user's experiences, preferences, and sessions. In essence 'Set-Cookies' headers are the mechanism by which the website communicates with your browser.

**[Cookies](https://en.wikipedia.org/wiki/HTTP_cookie)** (also known as browser cookies, HTTP cookies or cookies) are small pieces of information sent back to the user's web browser. They are typically used for Authentication, tracking and personalization.

**Cookies storage** is a client-side storage where client data are stored.

![003-cookie-storage.png](https://api-prod.strapi.io/uploads/003_cookie_storage_128c8ee224.png)

> *To view Cookies: F12 → ‘Application’ → ‘Storage’ → ‘Cookies’*

### Types of Cookies
These are the primary types of cookies:

1.	**Persistent cookies:** Are small text files that are stored on a user's computer or device by a website or web application, and they remain there even after the user has closed their web browser.
2.	**Session cookies:** Track the user's behaviour on the website and help websites identify users browsing through the web pages of a website. The website analytics tool would consider each visit as a new session if it wasn't for session cookies.
3.	**Authentication cookies:** Are created to help with user's session management when a person logs in with their browser. They ensure that sensitive information reaches the appropriate user sessions by associating user account information with a cookie-identifying string.


Cookies are convenient, but they come with **inherent hazards**: 

That could lead to the leakage of sensitive data and unauthorized manipulation because it can be accessed by unauthorised parties. It's critical to understand authorization and authentication while developing and using cookie storage in any modern website.

It can also be used to track users' behaviours across multiple websites or web browsers, which can result in privacy concerns.

## Code Implementation 
Also, cookies are code written by the developer to perform some functions on their webpage. Below we have a basic code written in Javascript for cookie storage;

```html
<!doctype html>
<html>
  <head>
    <script>
      function setCookie(cname, cvalue, exdays) {
        const d = new Date();
        d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
        let expires = "expires=" + d.toUTCString();
        document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
      }

      function getCookie(cname) {
        let name = cname + "=";
        let decodedCookie = decodeURIComponent(document.cookie);
        let ca = decodedCookie.split(";");
        for (let i = 0; i < ca.length; i++) {
          let c = ca[i];
          while (c.charAt(0) == " ") {
            c = c.substring(1);
          }
          if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
          }
        }
        return "";
      }

      function checkCookie() {
        let user = getCookie("username");
        if (user != "") {
          alert("Welcome again " + user);
        } else {
          user = prompt("Please enter your name:", "");
          if (user != "" && user != null) {
            setCookie("username", user, 30);
          }
        }
      }
    </script>
  </head>

  <body onload="checkCookie()"></body>
</html>

```
The above code provides three `functions`:
1. `setCookie(cname,cvalue,exdays)`: This function sets a cookie by taking the name, the value and the number of days it will take to expire.
2. `getCookie(cname)`: This retrieves the value of a specific cookie if exists if not it returns empty.
3. `checkCookie()`: This will check if a cookie is set, if a cookie is set it displays a response set by the developer, if not, a prompt box might display asking for the name of the user and store the cookie according to the days set in `setCookies` function.


> **Note:** Modifications are allowed according to the information of the client you want to store or collect.


Below should be the result:

![gif.gif](https://api-prod.strapi.io/uploads/gif_247c4e399e.gif)

## Cookies Storage: Best practices
When using cookies on a website, there are best practices to follow that can help to ensure that they are used effectively.

* Don’t store sensitive data in cookies, unless you have to.
* Give users the option to opt-out: Developers should give visitors the choice to refuse specific kinds of cookies, like those that are used for tracking or advertising. This can be done by giving the users customised options.
* Use secure cookies: Safeguarding important data, like login credentials, developers should use secure cookies. Secure cookies are always encrypted and can only be used with a secure connection (HTTPS).
* Provide clear cookies policy: The cookies policy should be explained and checked by the developer, so the users should know the type of cookies being used and they can opt out whenever they want to. check [GDPR](https://eur-lex.europa.eu/eli/reg/2016/679/oj) to know more about the cookies policy.
* Review and update cookie policy regularly.

## Comparison of JWT and Cookies storage 

Let's dive into the comparison between the JWT and Cookies storage, with this we will check out the similarities if there are any, and the differences, choosing between the two for authentication or authorization because both JWT and Cookies can be used for Authorization.


## Similarities between JWT and Cookies
 
Authorization are typically sent to the server via an HTTP Request Authorization Header (e.g. Bearer <token>). Can use Cookie too which is sent to the server in the Cookie request header.

JWT and cookies can be both used for authentication or authorization, A web cookie may be saved in the Cookies storage of your browser and may contain JWT. There are not many similarities between the two.

## JWT and cookies storage differences
Even when there may be similarities, there are also differences between JWT and cookie storage. There are several differences compared to the similarities. They rather have differences instead of similarities, below are a few explained differences between JWT and Cookies storage:
    
* **Revoking and invalidating:** Revoking a user session is easy with cookie, while it's harder to revoke or invalidate a user session in a JWT.
* **Simpler installation and maintenance:** Unlike JWT, cookies don't need extra setup or library installation, which makes them easier to install and handle.
* **Storage:** JWT; the authentication state is not stored anywhere on the server side rather they are saved on the client side, while on the cookie, the authentication is stored on the server side.
* the JWT is **Stateless**, while the cookies are **Stateful**


## Choosing between JWT and Cookies storage
The best alternative option to choose mostly depends on the goals you want to achieve while keeping the targets' convenience, security, and effectiveness in check.

* **Advertisement:** If tracking users is the target for personal advertising cookies storage is the best option to go for as they can keep track of user's browser history or activities.
* **API Integration:** For API integration and resources, JWT perform better in authentication than cookies storage, it controls both the API and client by offering more protection and flexibility.
* **Data Storage:** Any data entered by users can be stored into a form on the website, either login credentials, shopping carts, form date etc. while JWT cannot perform this functionality.

In choosing either JWT or cookies storage, functionality, needs and target should be considered before concluding on what to use. 

However, JWT can be stored inside Cookie. This method is safer because attackers won't be able to steal your user's token easily. It's also important to know that cookies are not immune to attacks, more security measures should be implemented for the overall security of the application.
    
## Conclusion

When choosing between JWTs and cookies to store authentication tokens, there are certain security tradeoffs to take into account, proper evaluation should also be considered. It also means that an attacker can access the user's account if a JWT or cookies are intercepted or stolen.
    


large_Introduction to JWT and Cookie Storage.jpg

medium_Introduction to JWT and Cookie Storage.jpg

small_Introduction to JWT and Cookie Storage.jpg

thumbnail_Introduction to JWT and Cookie Storage.jpg

Introduction to JWT and Cookie Storage.jpg

Introduction to JWT and Cookie storage

Web Designer and Graphics Designer who writes and codes also.

Writer

If data breaches can be devastating for companies, regardless of their size, imagine the impact on those individuals whose personal information was exposed. I checked Thesaurus.com and couldn’t find anything five times worse than the word “devastating.” It’s impossible to imagine how it feels unless you’ve gone through it yourself.

This is why businesses need to be relentless in protecting customer data. Of course, it's easier said than done with the global economy on the brink of recession and inflation. However, this backdrop further justifies why companies must take cybersecurity seriously.

API stands for “Application Programming Interface”. Simply put, an API is just a structured way for software applications to communicate.

An API can grant you access to the features or information offered by another piece of software. The program replies to an API call, a specially prepared request, by offering the required service or data in a fashion that may be incorporated into other applications or workflows. They are crucial in development because they allow developers to access the products and services of other companies to improve their programs. Restful APIs and GraphQL APIs are examples of APIs.

## What is API Security?

Application programming interface (API) security refers to preventing or mitigating attacks on APIs. APIs work as the backend framework for mobile and web applications. Therefore, it is critical to protect the sensitive data they transfer. APIs are used on mobile or web applications. They often gather or collect user data that get processed within the hosting for the API.

Therefore, the collection of precautions used to ensure the confidentiality, availability, and integrity of data being transferred through the Application programming interface (API) is called API security. 

## Importance of API security

Software engineers frequently use APIs to improve their applications. The use of APIs by developers allows them to utilize the services provided by other programs rather than having to design everything from scratch. You don't need to design your interactive map; the Google Maps API, for instance, makes it relatively simple to include one in your project. Also, for Weather, the OpenWeatherApi makes it easier to include a weather forecast on your application.

- API security is important because businesses use APIs to connect services and to transfer data, so a hacked API can lead to a data breach. According to Gartner, [90% of web-enabled applications will have more attack surface area in exposed APIs than in the user interface.](https://www.gartner.com/en/documents/3970520)
- APIs have become a target for attackers because they expose application logic, resources, and sensitive data, including personally identifiable information (PII). Attackers may interrupt operations, get access to or delete sensitive data, and steal property if they can access unprotected APIs.

## What is Strapi?

[Strapi](https://strapi.io/) is an open-source headless CMS that develops and manages content using Restful APIs and GraphQL. It is used to build the application backend and different frontend platforms by consuming the content via APIs using any HTTP client or GraphQL-enabled frontend.
If you are new to Strapi, it's worth trying. In this next section, we’ll look at installing Strapi locally and starting with it. 

## Prerequires

To follow this tutorial, you would need to have the following Prerequires in place; you should have

- Npm or Yarn installed on your computer.
- Node.js v16 and v18 are recommended.
    - Node v18.x is recommended for Strapi v4.3.9 and above
    - Node v16.x is recommended for Strapi v4.0.x to v4.3.8.
- Also, you should be familiar with Strapi.

## Strapi Installation

After having all the needed software installed, installing Strapi is pretty simple. You can install Strapi by running the command below on your terminal.
   
```bash
npx create-strapi-app@latest my-project --quickstart
```

> Note: The `quick start` installation sets up Strapi with an SQLite database. Other databases and installation options are available ([see CLI installation guide](https://docs.strapi.io/dev-docs/installation/cli)).

Your Strapi app will launch once the installation is completed. Register and log in to your dashboard page.

![2-strapi-install.png](/uploads/2_strapi_install_d3a4e48c8b.png)

> Note: A developer page is also available to explain more accurate details on setting up and deploying your Strapi projects.

## Creating Collection Types

The Content Manager is a core plugin of Strapi. It is a default feature that is always activated and cannot be deactivated. It is accessible when the application is in a development and production environment.

The Content Manager is accessible from Content Manager in the main navigation, which opens a sub-navigation displaying two categories: Collection types and Single types. 

Each category contains the available collection and single content types created using the Content-type Builder beforehand. Administrators can create, manage, and publish content from these two categories.

The Collection types category of the Content Manager displays the list of available collection types accessible from the Content Manager sub-navigation.

Multiple entries can be created for each available collection type, so each type is divided into two interfaces: the list view and the edit view (see [Writing content](https://docs.strapi.io/user-docs/content-manager/writing-content)).

The list view of a collection type displays all entries created for that collection type.

![3-strapi-install.png](/uploads/3_strapi_install_1f484c97f4.png)

The labeled boxes with numbers are to make things easier for you when sorting or searching for your entries which will be explained below:

**Box 1 (Add new entry): ** By clicking on this button, you can add new entries to your collections, assign categories, edit the model, and configure the view.

![4-strapi-install.png](/uploads/4_strapi_install_d5bb23c172.png)

**Box 2 (Search icon):** You can search for your entries input in the Restaurant collection types by clicking on the icon.

**Box 3 (Filter icon):** By clicking on the filter icon, you can filter out your search entries by category, name, date created, date updated, and ID. This will also ease you in searching numerous number entries.

**Box 4 (Language):** You can sort with English or any language you choose.

**Box 5 (Setting): **This page enables you to edit all the sort and search actions on your collection types; you can set the necessary configuration for your collection view, as shown in the image below.

![5-strapi-install.png](/uploads/5_strapi_install_9d27394eed.png)

> Note: You can check Strapi's [official documentation](https://docs.strapi.io/user-docs/content-manager#collection-types) to learn more about the Strapi collection type operation.

## Best practices for Setting it Up and Monitoring

Setting up and monitoring are essential aspects of a system development or process; there are several best practice pointers to achieve this goal and how they are done effectively. Here are some pointers for configuring and keeping an eye on systems:

### Enabling API permission

One of the features of the Strapi API is that it gives you control over the API by setting its permissions. You can specify whether the endpoint should be read-only, allow read and write access, or enable all permissions depending on your application's needs.

In every Strapi project, the API endpoints are accessible by default in a freshly created Strapi project without enabling API permissions or roles. The default roles and permissions of a new Strapi project setup grant public access to the API endpoints.

However, Strapi provides a robust role-based access control system, which allows you to manage user permissions and control access to various endpoints (APIs) based on different user roles. By default, Strapi comes with three built-in roles:

1.  **Public**: This role grants anonymous users (users who are not authenticated) access to public APIs that don't require authentication.
2.  **Authenticated**: This role is for users who have been authenticated or logged in. It provides access to authenticated APIs that require users to log in.
3.  **Administrator**: This is the highest privilege role and has access to all APIs and administrative features of Strapi.

In Strapi, the "Public" role is given access by default when you create an endpoint (content type). This indicates that people who are not authenticated can access the endpoint. You can adjust the roles' permissions to limit access to particular endpoints.

From the side menu, navigate to Settings > Users & Permission Plugin > Roles > Public. Then, select the collection type for which you want to set the permissions and check the required permissions, as shown in the image below.

To make the changes take effect after you have enabled the required API permissions, click the "Save" button.

![6-strapi-install.png](/uploads/6_strapi_install_33896e176a.png)

Enabling API permissions in Strapi allows you to control all the access to your endpoints and ensures that only authorized users can perform specific actions. This essential security feature can prevent unwanted access to or modification of your content and data.

## Tracking API Action Using Strapi Audit Log

The Strapi Audit Log feature lets you track and record user API actions within your Strapi projects. This feature is used to track activities carried out by users, e.g., audit log to keep track of who create, edit and delete record in the Strapi backend. This feature is. Only available on the Strapi enterprise plan, you must enable the Audit logging to see all audit logs from your application dashboard.

Here are the steps to enable Audit logging:

- Access the admin dashboard/panel and click on the “Setting” section in the left menu.
- In the “Setting” section, click on the “Advanced setting” and click on the “Logging tab” to enable the audit logging.
- Under the “Logging tab,” you can enable the “Audit logging” by switching it to the on position.
- Once the “Audit logging” is switched on, it will show on the “Adminstration panel”. You can now customize the settings for the “Audit logs”.

Click on Content Manager, Settings, and audit logs, as shown in the image below.
In the “Audit log” content type, the admin can view all the API actions performed by the users, including the API action and the timestamp.

![7-strapi-install.png](/uploads/7_strapi_install_5769d1a102.png)

By tracking all the API actions using the Strapi audit log feature, you can monitor who is accessing your API endpoints, when actions are being taken, and what action is being taken. This will help you resolve and detect any potential security threat in your developed system. 

## Securing API on the Front-end

Securing the front end of your application on Strapi is one of the critical steps to be taken when protecting your application from security threats. Here are some best practices to help in securing your Strapi API application:

- Enable CORS (Cross-Origin Resource Sharing): Configure Cross-Origin Resource Sharing headers on the API server to control which domains can access the API. This helps prevent unauthorized access from malicious websites.

We can configure CORS in our Strapi application by adding the following code to ./config/middleware.js

``` js
 module.exports = ({ env }) => ({
      settings: {
        cors: {
          enabled: true,
          // configure CORS to app;s client side and Strapi client (admin panel)
          // client-side 1: http://localhost:3000
          // client-side 2: http://localhost:8000
          // Strapi client (admin panel): http://localhost:1337
          origin: ['*'], // Add your allowed domains in the array, e.g., ['http://localhost:3000', 'http://yourdomain.com']
        },
      },
    });
```
Use HTTPS only and limit CORS to the domains required for your application to run successfully.

Next, we must add the API endpoint domain to the .env file. In the .env file, set the CORS_origin environment variable to your domain name, as shown below:

![cors.png](/uploads/cors_c479244391.png)

- Implement authentication and authorization: Authentication validates and verifies a user's identity when signing up or registering for your application. Authorization is the process of permitting users to access a particular resource and determining if a user has the right permission or role to access a specific route or resource.

There are several methods of authentication and authorization in securing your application:

1. Authentication: Various techniques can be employed to authenticate a user, as mentioned below:
    - Single-factor authentication
    - Two-factor authentication
    - Multi-factor authentication
    - Password-based authentication
    - Passwordless authentication
    - Social Authentication

Strapi utilizes password-based authentication to create the admin user and other user types. For further details on authentication, you can refer to the [Auth0 blog](https://auth0.com/docs/architecture-scenarios/implementation/b2b/b2b-authentication).

2. Authorization: Several methods exist for authorization, and the most popular ones are listed below:
    - API Keys
    - Basic Auth
    - OAuth 2.0
    - HMAC

[You can explore further information here to gain a deeper understanding of authorization.](https://idratherbewriting.com/learnapidoc/docapis_more_about_authorization.html)

## Best Practices for Development and Deployment

Developing and deploying a Strapi API securely, It's essential to create and implement a Strapi API securely if you want to shield your application's data from threats and vulnerabilities. Here are some tips to assist you in making sure your Strapi API is securely developed and deployed:
- Choose the Right Hosting Provider
- Optimize Production Build
- Set Up Monitoring and Logging
- Automate Deployment
- Testing in Production-like Environment
- Regular Back-up

## Conclusion

Ultimately, consumers are better at ease when they know that hackers cannot access their information. As long as businesses continue to disregard them, APIs will remain a profitable attack route for hackers to exploit. Implementing robust security measures, such as authentication, authorization, input validation, secure transport, rate limiting, and regular updates, is essential to ensure the security of your APIs in Strapi.

You can broaden your knowledge by reading more written articles on Strapi about [authentication](https://strapi.io/blog/a-beginners-guide-to-authentication-and-authorization-in-strapi) and [deployment](https://strapi.io/blog/6-top-deployment-options-for-your-strapi-application). 

Learn about the best practices for API security in Strapi to protect your data from potential threats and vulnerabilities.

medium_IlZiUl7Q.png

small_IlZiUl7Q.png

thumbnail_IlZiUl7Q.png

IlZiUl7Q.png

Best Practices of API Security in Strapi

The web era evolves through the years, and new gear and architectures are created and designed to cope with exceptional troubles in legacy systems. [TypeScript is a part of this evolution](https://www.typescriptlang.org/docs/handbook/intro.html), but what precisely is it?

JavaScript is one of the most popular client-side and server-side programming languages. If you have ever worked on any project using JavaScript, you would have understood how JavaScript works. [However, we will be explaining more on TypeScript, which is an alternate programming language for JavaScript, its features, and its advantages.](https://www.typescriptlang.org/docs/handbook/intro.html) 

In JavaScript, when you declare a variable as a string and later re-assign the same variable as an integer, JavaScript will permit this operation. However, it has limitations. Changing a variable's data type can cause inconsistencies in your performance.

TypeScript is a recent JavaScript language developed by Microsoft. It was created as a JavaScript superset and uses the same syntax while including all of the newer features supported by [ES6( ECMAScript programming language version 6)](https://www.geeksforgeeks.org/introduction-to-es6/)  as well as classes. In some cases, TypeScript improves upon JavaScript's native object-oriented features with features such as type-inference, generics, private class members, and inheritance.

## An Introduction to Strapi 
[Strapi is the leading open source, customizable headless CMS](https://strapi.io/) It is used for building the application backend and can be used for different frontend platforms by consuming the content via APIs using any HTTP client or GraphQL-enabled frontend. Later in this article, we'll look at how to install Strapi locally and get started with it.

## TypeScript Features
As an alternate programming language for JavaScript, TypeScript is one of the fastest programming languages, which has also become essential to build large code base applications. Frameworks like Angular provide TypeScript as a primary language. Below are examples of features you can master to make your codebase more robust, cleaner, and easier.

### Type Inference
TypeScript automatically detects the variable's data type explicitly based on the initial value assigned to the variable. It is a big time-saver because you do not have to explicitly specify the data type for all variables. The annotations for the primitive types are number, Boolean, and string. TypeScript additionally helps data types with the subsequent annotations: array, enum, and void.

### Type Checking
Typescript detects some mistakes during runtime. It is particularly critical for huge tasks with many developers, wherein an alternate in a single part of the code will affect the whole codebase. By checking that the code they may be writing will, in reality, work while it is compiled, TypeScript can save developers a whole lot of time and frustration.

### Object-Oriented Language(OOP)
Object-oriented languages enable us to make our codebase sturdy, clean, and easy to maintain. In addition, TypeScript helps OOP with easy-to-use classes, interfaces, and modules in a more elegant way in comparison to JavaScript interfaces.

TypeScript offers effective functions, which include classes, interfaces, and modules. You can write natural object-oriented code for client-aspect in addition to server-aspect development. That feature makes it brighter than JavaScript. The OOP functions additionally make TypeScript code more maintainable and organized. 

### Generics 
This feature provides a way to write code in a flexible form that can work with various data types instead of a single data type. It allows users to write their own data type. This feature is common in a programming language, but to use Generic with TypeScript, one must write a type parameter "T" (can be named differently because T is a placeholder) inside the **open** < and **close** > bracket and a specify type function **removeFirstEntryFromArray()** must precede, which allows us to know the type that the user provides. Here is how our generic **removeFirstEntryFromArray()** function looks like:

![generic removeFirstEntryFromArray() function](https://paper-attachments.dropbox.com/s_91547BBBC4B078ECD91F3CF1109F0FAC60FE3F555B0CEF4D168B5320812B0FA7_1664962689417_Untitled-1.jpg)

### ES6 Features Support
ES6 is a superset of TypeScript. It carries all of the traits of ES6 plus a few extra features. One instance of this type of function is the lambda function. ES6 has introduced a mild alternative within the syntax of anonymous capabilities consisting of classes, interfaces, arrow capabilities, etc.

### Compatibilities
A TypeScript task is well-matched with JavaScript. This means that TypeScript is a strict superset of ECMAScript 2015, which is itself a superset of ECMAScript 5, normally known as JavaScript. As such, JavaScript software is likewise legitimate TypeScript software, and TypeScript software can seamlessly devour JavaScript. By default, the compiler objectives ECMAScript 5, the present-day triumphing standard, however, is likewise capable of generating constructs utilized in ECMAScript 3 or 2015.

With TypeScript, it's far more viable to apply present JavaScript code, comprise famous JavaScript libraries, and speak to TypeScript-generated code from different JavaScript. Type declarations for those libraries are furnished with the supply code.

### Plugins
Language service plugins are a way to provide additional information to a user based on existing TypeScript files. They can enhance existing messages between TypeScript and an editor or provide their own error messages. Examples are:
- **Ts-sql-plugin**: This plugin adds SQL linting with a template string SQL builder.
- **Typescript-styled-plugin:** This plugin provides CSS linting inside template strings.
- **Typescript-eslint-language-service**: It provides eslint error messages and fixes them inside the compiler's output.
- **Ts-graphql-plugin**: It provides validation and auto-completion inside GraphQL query template strings.

**Note:** VS Code has the power for an associate extension to seamlessly embrace language service plugins; therefore, you'll have some running in your text editor with no need to outline them in your tsconfig.json.

## Why Should You Use TypeScript?
With its wide selection of features and feasibility, TypeScript is a great tool for JavaScript developers. Let's take a look at the reason why you should always use TypeScript for your frontend and backend development.
 
### Time Reduction
JavaScript could be a tightly-written programming language. It may be tough to know what sorts of datatypes are being passed around in JavaScript, but with the help of the type inference feature in TypeScript, it will automatically detect the data type and make work easier.

### Easier and Simple Documentation
In JavaScript, function parameters and variables don't involve any clear information; thus, developers are compelled to cross-check the documentation or guess based on the implementation. TypeScript documentation, on the other hand, is well-explained and error-free.

### Data Types Specification
TypeScript permits specifying the categories of the data type being used among the codebase and has the power to report errors once the types don't match. For example, TypeScript can report a slip-up in the codebase when writing a string in a function that expects an integer or Boolean. JavaScript will not do this.

### Enhanced Team and Developer Productivity
TypeScript uses compile time type checking. This means it checks if the specified types match before running the code, not while running the code. By catching mistakes early, TypeScript can save developers time and frustration.

### Performance
Compared to traditional JavaScript, TypeScript drastically improves performance because its tiers are reduced. This means that responses to requests go through fewer tiers and are faster. The resources and time that would go into maintaining additional tiers in traditional architectures are invested in optimizing the remaining tiers. Since web pages are pre-rendered, no building happens for each request. The potential for failure to occur is greatly reduced because of pre-deployment building and the minimized surface area of the architecture. Pre-building pages ensure any errors can be detected early enough and fixed before users interact with the site.

## Strapi Installation
[Strapi has full support for TypeScript](https://docs.strapi.io/developer-docs/latest/development/typescript.html#start-developing-in-typescript), which allows developers to develop plugins with TypeScript and customize the Strapi admin with the TypeScript codebase. To Install the TypeScript version of Strapi is simple, but you will need to have the following software installed on your system and basic knowledge of them. 

- Npm or Yarn
- [Node.js](https://nodejs.org/en/download/): v14 or v16

Once you have them installed, you can install Strapi (Typescript version) by running the command below on your terminal.

```
    npx create-strapi-app@latest my-project --typescript
    npm run develop
```

Your Strapi app will launch once the installation is completed. Register and log in to your dashboard page.

![Strapi dashboard](https://lh4.googleusercontent.com/yPg5Zu1qpZvYyzvI4NYrnbd5NzZb3RP8ZTYQ9vgi7Zwz_V395ylhNeHBudQY6Vnawi926lGMMQ9K635KDWsL7v5leIs4AbkV6Lde0OdGQHtHSytV4Vdt_ch7Ez_8Rv_38dmGLtc1N93ujaaLnC9UES2nvZ4VSNECyQILQn6YV8dvcotWsppDLa5-3g)

**Note**: There is also a [developer page created to explain more and accurate details on Strapi TypeScript.](https://docs.strapi.io/developer-docs/latest/development/typescript.html#start-developing-in-typescript)

## Conclusion
In conclusion, TypeScript brings enforcing types to JavaScript. It compiles clean, readable, standard JavaScript code that can run in any browser or host that supports JavaScript. Ultimately, the real power of TypeScript will be in allowing developers like me to take full advantage of object-oriented programming principles in the JavaScript language.


