[System] You are a VTEX documentation expert. You provide accurate, detailed information about VTEX platform, APIs, apps, and Store Framework development.

[User] Provide a guide on guides login integration guide webstore oauth2 in VTEX.

[Assistant]
Documentation

[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/updates/release-notes)

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/getting-started)

---

Integration Guides

[Back office integration guide (ERP/PIM/WMS)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/erp-integration-guide)

[Customer Credit](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/customer-credit-integration-guide)

[External Marketplace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/external-marketplace-integration-guide)

[External Seller](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/external-seller-integration-guide)

[Gift Card](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/gift-card-integration-guide)

[Headless commerce](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/headless-commerce)

[Login (SSO)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/login-integration-guide)

[Admin (SAML 2.0)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/login-integration-guide-admin-saml2)

[Webstore (OAuth 2.0)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/login-integration-guide-webstore-oauth2)

[Punchout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/punchout)

[Offer Management Integration Guide](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/sent-offers-integration-guide-connectors)

[Payments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/payments-integration-guide)

[Search Protocol](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/search-integration-guide)

[Session Manager](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/session-manager)

[Tax Service](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/tax-service-integration-guide)

[Pricing Hub](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/pricing-hub)

[reCAPTCHA](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/recaptcha)

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/checkout-api-overview)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/master-data)

---

Payments

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

---

UI Customization

---

Message Center

---

Pricing

---

Promotions

---

Infrastructure

---

Search

---

Storefront Permissions

---

[VTEX Activity Flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/updates/release-notes)

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/getting-started)

---

Integration Guides

[Back office integration guide (ERP/PIM/WMS)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/erp-integration-guide)

[Customer Credit](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/customer-credit-integration-guide)

[External Marketplace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/external-marketplace-integration-guide)

[External Seller](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/external-seller-integration-guide)

[Gift Card](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/gift-card-integration-guide)

[Headless commerce](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/headless-commerce)

[Login (SSO)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/login-integration-guide)

[Admin (SAML 2.0)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/login-integration-guide-admin-saml2)

[Webstore (OAuth 2.0)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/login-integration-guide-webstore-oauth2)

[Punchout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/punchout)

[Offer Management Integration Guide](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/sent-offers-integration-guide-connectors)

[Payments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/payments-integration-guide)

[Search Protocol](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/search-integration-guide)

[Session Manager](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/session-manager)

[Tax Service](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/tax-service-integration-guide)

[Pricing Hub](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/pricing-hub)

[reCAPTCHA](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/recaptcha)

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/checkout-api-overview)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/master-data)

---

Payments

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

---

UI Customization

---

Message Center

---

Pricing

---

Promotions

---

Infrastructure

---

Search

---

Storefront Permissions

---

[VTEX Activity Flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides)

Integration Guides

[Login (SSO)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/login-integration-guide)

[Webstore (OAuth 2.0)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/login-integration-guide-webstore-oauth2)

Webstore (OAuth 2.0)

VTEX stores can identify returning customers by requesting that they provide login information. That way, logged-in customers can access their previous purchases, and the store can display customized content based on customer profile information.

By default, our platform stores user information in our secure servers, but sometimes it is helpful to integrate external identity providers with the authentication process. The framework described in this guide will allow the VTEX platform to connect pre-existing user bases in private servers. The same protocol enables clients to use their Google accounts to log in to a third-party application.

In this guide, you will learn about:

* [OAuth2 and VTEX](#oauth2)
* [How to set up or edit a custom OAuth user login option](#custom-oauth)

## OAuth2

The OAuth2 specification defines a framework that enables applications (**service providers**) to ask anyone requesting access to protected data for user authentication without having to interact with their private credentials. It achieves this by interacting with a trusted partner (**identity provider**) that handles user identification, validates their credentials, and returns to the application the information it needs to proceed safely. You can learn more about the **OAuth2 Authorization Framework** by reading its [specification document](https://read.calvincode.net/reader?url=https://tools.ietf.org/html/rfc6749).

This is an example of VTEX's custom OAuth2 authentication flow:

VTEX ID

VTEX ID

Custom Identity Provider

Custom Identity...

Request secure content

Request secure...

Identity Provider List

Identity Provider List

Select Custom Identity Provider

Select Custom I...

Redirect to Custom Idp getAuthorizationCode endpoint

Redirect to Custom Idp getAuthorizationCode endpoint

Query parameters

| redirect\_uristate |
| ------------------ |

Query parameters...

[Custom IdP's getAuthorizationCode endpoint](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2%23authorization-request)

Custom IdP's ge...

Query parameters

| redirect\_uristate |
| ------------------ |
|                    |

Query parameters...

Present Login Page / Request Credentials

Present Login Page / Request Credentials

Send Valid Credentials

Send Valid Cred...

[Redirect to VTEX ID's authorizationCode endpoint](javascript:void%280%29;)

Redirect to VTEX ID's authorizationCode endpoint

Query parameters

| codestate |
| --------- |
|           |

Query parameters...

VTEX ID's authorizationCode endpoint

VTEX ID's autho...

Query parameters

| codestate |
| --------- |
|           |

Query parameters...

[/POST to Custom IdP's getAccessToken endpoint](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2%23access-token-exchange)

/POST to Custom...

Body parameters

| codeclient\_idclient\_secret |
| ---------------------------- |
|                              |

Body parameters...

Response

Response

Body parameters

| access\_tokenexpires\_in |
| ------------------------ |
|                          |

Body parameters...

[/GET to Custom IdP's getUserInfo endpoint](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2%23user-information-exchange)

/GET to Custom...

Header or query parameter

| access\_token |
| ------------- |
|               |

Header or query parameter...

Response

Response

Body parameters

| userIdemailname |
| --------------- |

Body parameters...

setCookie with VTEX ID's token

setCookie with VTEX ID's token

and redirect (302) to finish endpoint

and redirect (302) to finish en...

VTEX ID's oauth/finish endpoint

VTEX ID's oauth...

Redirect to secure content (redirect\_uri)

Redirect to secure content (redirect\_uri)

User

Agent

User...Text is not SVG - cannot display

### User agent

The user agent in this context is the user's browser. The user interacts with the browser manually, but it's the application that sends requests to servers, follows redirects and renders pages to the user.

### Redirects

All server communications in this guide happen via the HTTPS protocol. One feature of this protocol is responding to a request by redirecting the user agent to a different URI. When the browser receives a redirect response, it instantly proceeds to the specified URI. For example, when a user tries to access protected areas of a store, they can be redirected to a login page.

### VTEX ID

**VTEX ID** is the service used to identify users on our platform. Applications usually talk to it to obtain the token required to access protected information.

### Relevant requests

Some steps of the OAuth2 authentication process are worth highlighting and describing in more detail.

> Note that some of the variable names in the requests mentioned below are customizable when you implement a custom OAuth option. You can adapt them to the specifications of your identity provider.

#### Authorization request

When an unauthenticated user requests access to protected resources in a store, VTEX ID will start the authentication process by generating a unique identifier for this authentication session, storing the URI of the requested resource for this session, and redirecting the **user agent** to this endpoint with the following query variables:

* `Client ID`: Client identification.
* `state`: The state containing the unique identifier.
* `redirect_uri`: This will always be `https://vtexid.vtex.com.br/VtexIdAuthSiteKnockout/ReceiveAuthorizationCode.ashx`.

In this endpoint, the user is expected to be presented with a way to send their credentials or redirected to an endpoint that displays it. This is usually a form requesting a username and password. It is also common practice to check for cookies indicating the user is logged in.

Once the **identity provider** has safely identified the user, it should generate an authorization code with more than 64 characters. Store it so you can use it later to identify this session, and redirect the **user agent** to the `authorizationCode` endpoint with the code in a query variable named `code`. The `state` variable will also be forwarded as received. The **identity provider** can also pass a query string parameter `error` to inform occasional errors on its side.

#### Authorization code callback request

The **user agent** should be redirected to this endpoint after the **identity provider** has successfully checked its user credentials. VTEX ID will retrieve two parameters from the query variables: `code` and `state`.

* `code`: Single-use code that should expire after a few minutes, as indicated by the [RFC specification](https://read.calvincode.net/reader?url=https://datatracker.ietf.org/doc/html/rfc6749%23section-4.1.2). If there are multiple attempts to use this code, the credentials must be revoked.
* `state`: Used to identify the authentication session, which is important to detect [replay attacks](https://read.calvincode.net/reader?url=https://en.wikipedia.org/wiki/Replay%5Fattack). In addition, the `code` variable will be used so VTEX ID can get the **access token** by using the \_\_Access Token Exchange\_\_endpoint.

#### Access token exchange

This is a simple endpoint that expects a `POST` request with three parameters in the body:

* `client_id`
* `client_secret`
* `code`
* `redirect_uri` (`https://vtexid.vtex.com.br/VtexIdAuthSiteKnockout/ReceiveAuthorizationCode.ashx`)

The values of `client_id` and `client_secret` are stored in VTEX ID when the **identity provider** is configured and should be used by this endpoint as credentials to guarantee that only VTEX ID and other well-known customers can have access. VTEX ID expects two parameters in the response body:

* `access_token`: The credential that VTEX ID needs to use in the [Get user information exchange](#get-user-information).
* `expires_in`: The time, in seconds, before the token expires.

#### Get user information

This endpoint should only allow requests with valid `access_token` credentials, which can be used to identify the user and return the following user information in the request body:

* `userId` (required)
* `email` (required)
* `name`

A user's `email` is the key to uniquely identifying each VTEX user. VTEX ID needs this information to finish the authentication process.

## Custom OAuth

In addition to the default options of using [Google and Facebook as identity providers](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/configuring-login-with-facebook-and-google--tutorials%5F513%23) for your store, VTEX allows you to implement a custom OAuth connection, in case you have another **identity provider** that you want to enable for your customers.

You should understand all the expected behavior for the **identity provider** endpoints. However, implementing the server from scratch is not necessarily a good idea. There are many certified OAuth2 libraries, and you should [take a look at them](https://read.calvincode.net/reader?url=https://oauth.net/code/) before writing your own code. Any lack of verification or mishandled steps can pose a severe security risk for your store and customers.

### Integration

You can implement a custom OAuth option by going to your Admin and providing information about the communication between VTEX and your **identity provider** as shown in the relevant requests described above.

> Each VTEX store may have up to one custom OAuth implementation, which will be active for all store names in that account.

The table below lists the information you need to configure for each request. After the table, you will find more details about each configuration step.

| **Request**                                                                 | **From**                     | **To**                       | **Fields requiring setup**                                                                                |
| --------------------------------------------------------------------------- | ---------------------------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [Authorization request](#4.-configure-authorization-code-requests)          | VTEX                         | Custom **identity provider** | \- **URL**\- Custom parameters (optional)                                                                                |
| [Authorization callback request](#4.-configure-authorization-code-requests) | Custom **identity provider** | VTEX                         | \- Authorization code key                                                                                |
| [Access token exchange](#5.-configure-access-token-exchange)                | VTEX                         | Custom **identity provider** | **Request:**\- **URL**\- Content-Type\- Authorization code key\- Custom parameters (optional)**Response:**\- Access token key\- Token duration key                                                                              |
| [User information exchange](#6.-configure-user-information-exchange)        | VTEX                         | Custom **identity provider** | **Request:**\- **URL**\- Where to send the access token (bearer token or query string)\- Access token key (if sent in query string)\- Custom parameters (optional) **Response:**\- User email key\- User ID key\- User name key |

> Note that many of the field values indicated in the table are dynamically generated or come from the **identity provider**. Because of this, you must define only the key under which this information will be sent to VTEX so the platform knows how to handle each piece of information properly. Examples include the _authorization code key_, _token duration key_, and _user email key_.

#### Configuration steps

To set up this process, follow the steps below:

1. Go to the **Admin** \> **Account Settings** \> **Authentication**.
2. In the **Webstore** tab, click `SET UP` in the **My Custom OAuth** section.

![{"base64":"  ","img":{"width":909,"height":529,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":26077,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/login-integration-guide-webstore-oauth2-0.PNG"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/login-integration-guide-webstore-oauth2-0.PNG)

1. [Set the provider details.](#3.-setting-the-provider-details)
2. [Configure the authorization code requests.](#4.-configuring-the-authorization-code-requests)
3. [Configure the access token exchange request.](#5.-configuring-the-access-token-exchange)
4. [Configure the get user information request.](#6.-configuring-the-user-information-exchange)

> When configuring these steps, you will be able to preview the outcome in the respective **Request preview** and **Expected response preview** sections. We recommend checking them thoroughly when setting up the integration.

#### 3\. Setting the provider details

When you start the custom OAuth setup, you must complete the following information:

* **Identity provider** name
* **Client ID** key (`client_id`)
* **Client ID** value
* **Client secret** key (`client_secret`)
* **Client secret** value

> These keys are the names under which VTEX should send or expect to receive the information value when communicating with the identity provider. They must be `client_id` and `client_secret`, respectively.

![{"base64":"  ","img":{"width":978,"height":630,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":32200,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/login-integration-guide-webstore-oauth2-1.PNG"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/login-integration-guide-webstore-oauth2-1.PNG)

Click `NEXT`.

#### 4\. Configuring the authorization code requests

In this step, you must first provide the authorization request **URL**.

![{"base64":"  ","img":{"width":685,"height":554,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":32527,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/login-integration-guide-webstore-oauth2-2.PNG"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/login-integration-guide-webstore-oauth2-2.PNG)

> If you want, you can also add [custom parameters](#custom-parameters) to this request. Then, scroll down to the **Callback Request Information** section and enter the **Key** under which the authorization code will be sent by the **identity provider** to VTEX.
>
> ![{"base64":"  ","img":{"width":884,"height":557,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":30718,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/login-integration-guide-webstore-oauth2-3.PNG"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/login-integration-guide-webstore-oauth2-3.PNG)
>
> Click `NEXT`.

#### 5\. Configuring the access token exchange

To configure the **access token** exchange request, you need to provide:

* The request **URL**.
* The **authorization code key** under which VTEX should send the authorization code to the identity provider.
![{"base64":"  ","img":{"width":883,"height":865,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":59609,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/login-integration-guide-webstore-oauth2-4.PNG"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/login-integration-guide-webstore-oauth2-4.PNG)

> If you want, you can also add [custom parameters](#custom-parameters) to this request.

Then, you may scroll down to the **Response Information** section and enter the **Keys** under which VTEX should expect to receive user information:

* **Access token key**
* **Token duration key**

![{"base64":"  ","img":{"width":876,"height":511,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":20365,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/login-integration-guide-webstore-oauth2-5.PNG"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/login-integration-guide-webstore-oauth2-5.PNG)

 Click `NEXT`.

#### 6\. Configuring the user information exchange

Now, you must provide the details about the user information exchange:

* Request **URL**.
* **Where to send the access token.** It is sent as a bearer token by default. Use the toggle if you want to change it to **Send in query string**.

Check the **Request Preview** section to make sure it matches the format expected by the **identity provider.** Also, note that if you toggle **Send in query string,** you can edit the access token key under which VTEX will send it to the **identity provider.**

![{"base64":"  ","img":{"width":877,"height":665,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":39568,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/login-integration-guide-webstore-oauth2-6.PNG"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/login-integration-guide-webstore-oauth2-6.PNG)

> If you wish, you can also add [custom parameters](#custom-parameters) to this request.

Scroll down to the **Response Information** section, and provide the **Keys** under which VTEX should expect to receive user information:

* **User email key**
* **User ID key**
* **User name key**

![{"base64":"  ","img":{"width":882,"height":524,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":22120,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/login-integration-guide-webstore-oauth2-7.PNG"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/login-integration-guide-webstore-oauth2-7.PNG)

 Click `FINISH` to complete your Custom OAuth configuration.

#### Custom parameters

You can configure custom parameters with static values for each of the [relevant requests](#relevant-requests) that VTEX sends to the **identity provider**. To do this, follow these steps:

1. Click `+ NEW PARAMETER`.
2. Enter the custom parameter **Key**.
3. Enter the custom parameter **Value**.

### Editing the custom OAuth

After you set up your custom OAuth option, you can edit it by following the same [implementation](#configuration-steps) steps described below.

> If your implementation was initially set up via [VTEX Support](https://read.calvincode.net/reader?url=https://help.vtex.com/en/support) instead of the process described above, you must be extra careful when editing it through the Admin. Incorrect values may cause your custom OAuth to stop working. We recommend you check the previews thoroughly and ensure they match what the **identity provider expects.**

Contributors

3

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F7108339%3Fv%3D4%26w=64%26q=75)](https://github.com/brunoamui)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F106821144%3Fv%3D4%26w=64%26q=75)](https://github.com/GeorgeLimaDev)

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/Integration-Guides/login-integration-guide/login-integration-guide-webstore-oauth2.md)

[Admin (SAML 2.0)« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2//docs/guides/login-integration-guide-admin-saml2)[PunchoutNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2//docs/guides/punchout)

Contributors

3

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F7108339%3Fv%3D4%26w=64%26q=75)](https://github.com/brunoamui)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F106821144%3Fv%3D4%26w=64%26q=75)](https://github.com/GeorgeLimaDev)

ON THIS PAGE

[OAuth2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/login-integration-guide-webstore-oauth2%23oauth2)

[User agent](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/login-integration-guide-webstore-oauth2%23user-agent)[Redirects](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/login-integration-guide-webstore-oauth2%23redirects)[VTEX ID](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/login-integration-guide-webstore-oauth2%23vtex-id)[Relevant requests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/login-integration-guide-webstore-oauth2%23relevant-requests)

[Custom OAuth](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/login-integration-guide-webstore-oauth2%23custom-oauth)

[Integration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/login-integration-guide-webstore-oauth2%23integration)[Editing the custom OAuth](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/login-integration-guide-webstore-oauth2%23editing-the-custom-oauth)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/Integration-Guides/login-integration-guide/login-integration-guide-webstore-oauth2.md)

Copy page

On this page

ON THIS PAGE

[OAuth2](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/login-integration-guide-webstore-oauth2%23oauth2)

[User agent](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/login-integration-guide-webstore-oauth2%23user-agent)[Redirects](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/login-integration-guide-webstore-oauth2%23redirects)[VTEX ID](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/login-integration-guide-webstore-oauth2%23vtex-id)[Relevant requests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/login-integration-guide-webstore-oauth2%23relevant-requests)

[Custom OAuth](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/login-integration-guide-webstore-oauth2%23custom-oauth)

[Integration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/login-integration-guide-webstore-oauth2%23integration)[Editing the custom OAuth](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2/docs/guides/login-integration-guide-webstore-oauth2%23editing-the-custom-oauth)

On this page

[Github](https://read.calvincode.net/reader?url=https://github.com/vtex-apps)[Help Center](https://read.calvincode.net/reader?url=https://help.vtex.com/)[Community](https://read.calvincode.net/reader?url=https://community.vtex.com/?%5Fga=2.198523433.743584735.1647618303-1974737580.1645714642)[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)


[System] You are a VTEX documentation expert. You provide accurate, detailed information about VTEX platform, APIs, apps, and Store Framework development.

[User] Provide a guide on guides vtex similar products variants in VTEX.

[Assistant]
Documentation

[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-similar-products-variants/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-similar-products-variants/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-similar-products-variants/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-similar-products-variants/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-similar-products-variants/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-similar-products-variants/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-similar-products-variants/updates/release-notes)

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-similar-products-variants/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-similar-products-variants/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-similar-products-variants/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-similar-products-variants/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-similar-products-variants/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-similar-products-variants/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-similar-products-variants/updates/release-notes)

Similar Products Variants

The Similar Products Variants app returns similar products related to an SKU so users can select other colors or types of the same product.

![{"base64":"  ","img":{"width":1661,"height":748,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":229011,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-similar-products-variants-0.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-similar-products-variants-0.png)

## Before you begin

1. Set up similar products in your store’s **Products and SKU.** Access your store’s Admin and go to **Products > Catalog > Products and SKU**.
2. In **Products and SKU**, in the column **SKU**, click on the desired SKU.
3. In the field **Similar (Alternative Products)**, type the product name you desire

![{"base64":"  ","img":{"width":1483,"height":712,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":1393049,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-similar-products-variants-1.gif"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-similar-products-variants-1.gif)

1. Then, In **Products and SKU**, in the column **SKU**, click on the one you have added in the last step.
2. Go to the `Images` tab, and on the field `Label`, type a name to identify the image displayed in the thumbnail through the `imageLabel` prop of the `Similar Products` Variants app.

Now, follow the [app’s configuration below](#configuration) to show the similar products you have set up.

## Configuration

1. Using [VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-installation-and-command-reference), install the app by running the following:

`1

vtex install vtex.similar-products-variants

`

1. Add the `vtex.similar-products-variants` app to your theme's dependencies in the `manifest.json`

`1

"dependencies": {

2

 "vtex.similar-products-variants": “0.x”

3

}

`

1. Add the `similar-products-variants` block to the product template you desire, such as `store.product`, to display a similar product list.

`1

...

2

 "flex-layout.col#right-col": {

3

 "props": {

4

 "preventVerticalStretch": true,

5

 "rowGap": 0

6

 },

7

 "children": [

8

 "flex-layout.row#product-name",

9

 "product-rating-summary",

10

 "flex-layout.row#list-price-savings",

11

 "flex-layout.row#selling-price",

12

 "product-installments",

13

 "product-separator",

14

 "product-identifier.product",

15

 "sku-selector",

16

 + "similar-products-variants",

17

 "product-quantity",

18

 "link-seller",

19

 "product-availability",

20

 "product-assembly-options",

21

 "product-gifts",

22

 "flex-layout.row#buy-button",

23

 "availability-subscriber",

24

 "shipping-simulator",

25

 "share#default"

26

 ]

27

 },

28

 "similar-products-variants": {

29

 "props": {

30

 "imageLabel": "swatch"

31

 }

32

 },

33

...

`

| Prop name  | Type   | Description                                                                                | Default value |
| ---------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| imageLabel | String | The identifier of the image thumbnail displayed for each variant. The identifier is set in the Admin’s Catalog. If the label does not exist or is not defined, the first image is used. | null          |

## Customization

To apply CSS customizations in this and other blocks, follow the instructions given in the recipe on [Using CSS Handles for store customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-using-css-handles-for-store-customization).

| CSS Handles |
| ----------- |
| variants    |
| title       |
| var-wrap    |
| img\_wrap   |
| img         |

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-similar-products-variants/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Store-Framework-Apps/advanced-components/vtex-similar-products-variants.md)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-similar-products-variants/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-similar-products-variants/docs/guides/vtex-similar-products-variants%23before-you-begin)

[Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-similar-products-variants/docs/guides/vtex-similar-products-variants%23configuration)

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-similar-products-variants/docs/guides/vtex-similar-products-variants%23customization)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Store-Framework-Apps/advanced-components/vtex-similar-products-variants.md)

Copy page

On this page

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-similar-products-variants/docs/guides/vtex-similar-products-variants%23before-you-begin)

[Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-similar-products-variants/docs/guides/vtex-similar-products-variants%23configuration)

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-similar-products-variants/docs/guides/vtex-similar-products-variants%23customization)

On this page

[Github](https://read.calvincode.net/reader?url=https://github.com/vtex-apps)[Help Center](https://read.calvincode.net/reader?url=https://help.vtex.com/)[Community](https://read.calvincode.net/reader?url=https://community.vtex.com/?%5Fga=2.198523433.743584735.1647618303-1974737580.1645714642)[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)


[System] You are a VTEX documentation expert. You provide accurate, detailed information about VTEX platform, APIs, apps, and Store Framework development.

[User] Provide a guide on guides security in VTEX.

[Assistant]
Documentation

[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/updates/release-notes)

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/vtex-platform-overview)

[Cloud infrastructure](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/cloud-infrastructure)

[Security](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/security)

[Data privacy](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/data-privacy)

[Composability](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/composability)

[Extensibility](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/extensibility)

[Store architecture](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/store-architecture)

[Developer experience](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/developer-experience)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/getting-started)

---

Integration Guides

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/checkout-api-overview)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/master-data)

---

Payments

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

---

UI Customization

---

Message Center

---

Pricing

---

Promotions

---

Infrastructure

---

Search

---

Storefront Permissions

---

[VTEX Activity Flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/updates/release-notes)

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/vtex-platform-overview)

[Cloud infrastructure](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/cloud-infrastructure)

[Security](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/security)

[Data privacy](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/data-privacy)

[Composability](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/composability)

[Extensibility](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/extensibility)

[Store architecture](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/store-architecture)

[Developer experience](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/developer-experience)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/getting-started)

---

Integration Guides

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/checkout-api-overview)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/master-data)

---

Payments

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

---

UI Customization

---

Message Center

---

Pricing

---

Promotions

---

Infrastructure

---

Search

---

Storefront Permissions

---

[VTEX Activity Flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides)

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/vtex-platform-overview)

[Security](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/security)

Security

Discover the robust security measures and best practices we implement to protect your store.

This guide provides an overview of the robust security measures implemented by VTEX. In the following sections, discover how our platform handles authentication, access control, logging, attack protection, and incident response. We also introduce our security certifications and [VTEX Shield](#vtex-shield), an add-on solution designed to further enhance store protection.

## Certifications

VTEX regularly audits its information security controls through independent professionals to ensure transparency and excellence in its practices. This external validation aligns policies and procedures with security standards and strengthens trust with customers and partners.

At the application layer, VTEX has the following accreditations:

* ISO 27001 – Information Security Management System
* SOC 1 – Type 2: Reports covering internal controls over financial reporting systems
* SOC 2 – Type 2: Reports covering security, availability, integrity, confidentiality, and privacy
* PCI – Validation of controls around cardholder data to reduce credit card fraud

See our [Certifications](https://read.calvincode.net/reader?url=https://vtex.com/us-en/compliance/certifications) for more details.

At the data storage layer, AWS has several certifications for its data centers, including ISO 27001, FedRAMP authorization, PCI certification, and SOC reporting. For more information on AWS's commitment to data protection, go to [Data Protection and Privacy at AWS](https://read.calvincode.net/reader?url=https://aws.amazon.com/compliance/data-protection/?nc1=h%5Fls).

## Authentication

To access information within a VTEX account, authentication is required, along with the [necessary permissions](#authorization-and-access-control). The authentication flow ensures verified and authorized access by requiring valid credentials in the following scenarios:

* [Logging in to the VTEX Admin or to the store website](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/authentication--21CkKHLKP1o41lUpGhuRUs%23login)
* [Developing apps or integrations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/authentication)

By default, VTEX adopts logical segregation for each account's data, isolating it from other accounts. This means there is no integrated method for accessing data that crosses account boundaries, even for internal VTEX use. For more details, see the [Logical separation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cloud-infrastructure%23logical-separation) section of our [Cloud infrastructure](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/cloud-infrastructure) guide.

### Two-factor authentication

Two-factor authentication (2FA) is mandatory for users to access the VTEX Admin with email and password. There are two options for two-factor authentication:

* Using a key generated by an authentication app.
* Using a key sent by SMS.

If an Admin user has not set up 2FA, when they try to access the Admin using their email and password, a prompt requiring 2FA configuration will be displayed.

This requirement only applies to email and password logins, not to other login methods such as Google, Facebook, or access code. Learn more in [Enabling two-factor authentication login](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/enabling-2-factor-authentication-login--4Ae1fcQi12g8u4SkQKCqWQ).

### Password rules

VTEX Admin and store passwords must have at least:

* 8 characters
* 1 number
* 1 uppercase letter
* 1 lowercase letter

Merchants can choose to [enforce password expiration](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/authentication--21CkKHLKP1o41lUpGhuRUs%23enforcing-password-expiration) after a specific period, which can be 15, 30, or 90 days.

Merchants can also choose to integrate an external identity provider, allowing them to define their own customized password policies. See [Login integrations](#login-integrations) for more information.

In the event of account lockout due to multiple incorrect password attempts, legitimate users can still log in using other methods, such as receiving a token via email or using an [integrated social login](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/configuring-login-with-facebook-and-google--tutorials%5F513) (Google or Facebook), thus avoiding possible brute force exploits of weak passwords.

### Login integrations

Native login integrations are available for Facebook (webstore) and Google (webstore and VTEX Admin). Learn more in the [Configuring login with Facebook and Google](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/configuring-login-with-facebook-and-google--tutorials%5F513) documentation.

[Single sign-on (SSO)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide) is supported with integration options for external identity providers on both the Admin and store website.

The Admin uses the [SAML 2.0 authentication protocol](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-admin-saml2), enabling VTEX customers to integrate existing identity providers that support this standard. For the store website, integration with external identity providers is done using the [OAuth 2.0 protocol](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/login-integration-guide-webstore-oauth2).

## Authorization and access control

VTEX efficiently manages logical access, ensuring precise control and monitoring of access permissions for systems and data. Our practices adhere to security policies, including measures like the principle of least privilege and segregation of duties. Users are granted access only to that which is strictly necessary for their roles, reducing the risk of exposing sensitive information and bolstering the security of systems and data.

### Roles and permissions

Every interaction with our platform, whether it is accessing a page in the Admin or making an API call, involves a request to our infrastructure. **License Manager** is the system that ensures the security of these operations by verifying that a user or API key has the necessary permissions to perform actions on the platform. To simplify permission management, it is based on **roles** and **resources**.

A resource is an entity associated with an action or information within our infrastructure. For example, the _View order_ resource allows a user to view the Order Details page in the Orders module. For details on each available resource, see [License Manager resources](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/license-manager-resources--3q6ztrC8YynQf6rdc6euk3).

A [role](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/roles--7HKK5Uau2H6wxE1rH5oRbc) determines the set of resources that a group of users can access on VTEX. Each administrative user can be associated with one or more roles. When creating a new role, you have the option of using one of the [predefined roles](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/predefined-roles--jGDurZKJHvHJS13LnO7Dy) provided by VTEX or [creating a customized one](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/roles--7HKK5Uau2H6wxE1rH5oRbc) by selecting each required resource.

See below an example access control structure:

Resource

Role

User or API key

View store sales stats

View order

Logistics viewer

Logistics inventory read only

Logistics shipping read only

Order Details
(Custom role)
.

OMS - Read only
(Predefined role)
.

Logistics - Read only
(Predefined role)
.

Jane

Taylor

appKey-x

Learn more about how to effectively manage user roles and permissions in [Best practices for secure user management](https://read.calvincode.net/reader?url=https://help.vtex.com/faq/security-measures-for-creating-a-store-user-profiles--15YDwC9jGgqWi3rvcDaiGM).

## Logs

All operations on the platform are automatically logged. Platform errors are logged in SIEM (Security Information and Event Management) software, accessible to the VTEX team for product analysis and improvement purposes.

VTEX actively monitors application and infrastructure logs for patterns indicative of potential security risks, issuing alerts and implementing countermeasures upon detection. To maintain the privacy and security of our customers and ensure compliance with regulations, VTEX does not grant access to its internal systems.

For merchant access, our services record various operations, including their authors and timestamps, in [Audit](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/searching-for-events-on-audit--5RXf9WJ5YLFBcS8q8KcxTA), a tool available in the VTEX Admin for searching and investigating store history using filters.

Explore the [list of events available in Audit](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/events-available-in-audit--6r1Mzcu5NmkmmDLJlz9CCZ). If necessary, merchants can also request specific event logs from [Support](https://read.calvincode.net/reader?url=https://help.vtex.com/en/support).

## Attack protection

VTEX uses a comprehensive approach to mitigate ransomware attacks, employing measures such as advanced antivirus, firewalls, and content filters to block malware. Our platform includes protection against DDoS (Distributed Denial of Service) attacks and other threats. Learn more in our [Security FAQ](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/risk-assessment--4K97IpqkpCpDYsZOSxtfkX).

We maintain regular backups of critical data, ensuring the ability to restore information without having to accept criminal demands. Security updates and awareness training for employees are priorities, along with constant monitoring of activities for suspicious behavior. These measures combined form a robust defense against the growing threat of ransomware.

### Web Application Firewall (WAF)

In addition to the standard protection measures implemented by VTEX, clients have the option of reinforcing the security of their stores by adding a Web Application Firewall (WAF) through [VTEX Shield](#vtex-shield). The WAF offers an additional layer of protection, helping to filter and block malicious traffic before it reaches the store.

### Secure Sockets Layer (SSL)

Secure Sockets Layer (SSL) is a protocol designed to increase the security of data transmitted over the internet. SSL connections are particularly recommended for sending information such as credit card numbers, passwords, and any other sensitive information over the internet.

VTEX generates an SSL certificate for your store and guarantees its automatic renewal – there is no need to request the purchase of an SSL certificate for the store. The certificate is issued via [Let's Encrypt](https://read.calvincode.net/reader?url=https://letsencrypt.org/) and its creation is VTEX's responsibility at the time of the store's go-live. Learn more in [Security certificate (SSL)](https://read.calvincode.net/reader?url=https://help.vtex.com/pt/tutorial/security-certificate-ssl--tutorials%5F1308).

## Penetration tests and vulnerability reports

Our Security team regularly performs vulnerability checks, including recurring scans and penetration tests. Upon request to our [Support](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tracks/support-at-vtex--4AXsGdGHqExp9ZkiNq9eMy/2Ik9CGbPeZIHHaYFsuyId3), merchants may have access to the **Attestation of Penetration Testing** report for the latest penetration tests performed on our behalf by an independent, reputable and technically competent third-party security consultancy. Learn more at [Penetration tests](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/penetration-tests--6jodF6s1I50Fg84ZwutOCb).

Vulnerabilities will be assessed as long as they are reported in accordance with the procedures outlined in [Reporting vulnerabilities](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/reporting-vulnerabilities--2veBKt7ZGkjdqlMU3F0JYC).

> Our [Master Services Agreement (MSA)](https://read.calvincode.net/reader?url=https://vtex.com/us-en/privacy-and-agreements/agreements/) expressly forbids performing penetration tests against the VTEX platform without our prior written consent. Doing so without our authorization would constitute a breach of contract by the customer.

## Security incident response

VTEX has a formal protocol for security incident response that covers the essential stages of the process: preparation, incident identification, containment, eradication, recovery and post-incident. This procedure also includes an integrated communication plan that is applied at all stages of the response. Learn more in our [Security Practices](https://read.calvincode.net/reader?url=https://vtex.com/us-en/security/security-practices/) document.

### Disaster recovery plan

VTEX has a disaster recovery plan focused on ensuring operational continuity and the availability of critical resources in emergency situations. This plan is tested at least once a year to ensure its effectiveness. It covers detailed guidelines on how to act in the face of unplanned incidents, characterized as crises, which can arise from natural disasters, cyber attacks, or any other disruptive events.

We incorporate crucial recovery steps, including defining our standard RPO (Recovery Point Objective) and RTO (Recovery Time Objective) objectives, as well as carrying out backup tests, ensuring the plan's effectiveness and readiness in real scenarios.

Learn more about our standard RPO and RTO in the [Security FAQ](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/risk-assessment--4K97IpqkpCpDYsZOSxtfkX) – you must have access to an account’s Admin to view this information.

### Business continuity plan

With a business continuity plan, we address challenges arising from emergencies, ensuring a smooth transition and minimizing impacts. This plan establishes a solid foundation for resuming normal operations quickly and effectively, regardless of the nature of the emergency. Learn more in our [Security Practices](https://read.calvincode.net/reader?url=https://vtex.com/us-en/security/security-practices/) document.

## VTEX Shield

[VTEX Shield](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/vtex-shield--2CVk6H9eY2CBtHjtDI7BFh) is an add-on product that offers supplementary, customizable protection layers for stores that prioritize platform resilience and the security standards guaranteed by VTEX's existing security [certifications and practices](https://read.calvincode.net/reader?url=https://vtex.com/br-pt/security/security-practices/).

> If you are an existing VTEX client and want to get VTEX Shield for your business, please contact [Commercial Support](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tracks/support-at-vtex--4AXsGdGHqExp9ZkiNq9eMy/3KQWGgkPOwbFTPfBxL7YwZ). Additional fees may apply. If you are not a VTEX client but are interested in this solution, please complete our [contact form](https://read.calvincode.net/reader?url=https://vtex.com/us-en/contact/).

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F77292838%3Fv%3D4%26w=64%26q=75)](https://github.com/julia-rabello)

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/VTEX-Platform-Overview/security.md)

[Cloud infrastructure« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security//docs/guides/cloud-infrastructure)[Data privacyNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security//docs/guides/data-privacy)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F77292838%3Fv%3D4%26w=64%26q=75)](https://github.com/julia-rabello)

ON THIS PAGE

[Certifications](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/security%23certifications)

[Authentication](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/security%23authentication)

[Two-factor authentication](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/security%23two-factor-authentication)[Password rules](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/security%23password-rules)[Login integrations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/security%23login-integrations)

[Authorization and access control](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/security%23authorization-and-access-control)

[Roles and permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/security%23roles-and-permissions)

[Logs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/security%23logs)

[Attack protection](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/security%23attack-protection)

[Web Application Firewall (WAF)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/security%23web-application-firewall-waf)[Secure Sockets Layer (SSL)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/security%23secure-sockets-layer-ssl)

[Penetration tests and vulnerability reports](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/security%23penetration-tests-and-vulnerability-reports)

[Security incident response](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/security%23security-incident-response)

[Disaster recovery plan](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/security%23disaster-recovery-plan)[Business continuity plan](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/security%23business-continuity-plan)

[VTEX Shield](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/security%23vtex-shield)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/VTEX-Platform-Overview/security.md)

Copy page

On this page

ON THIS PAGE

[Certifications](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/security%23certifications)

[Authentication](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/security%23authentication)

[Two-factor authentication](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/security%23two-factor-authentication)[Password rules](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/security%23password-rules)[Login integrations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/security%23login-integrations)

[Authorization and access control](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/security%23authorization-and-access-control)

[Roles and permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/security%23roles-and-permissions)

[Logs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/security%23logs)

[Attack protection](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/security%23attack-protection)

[Web Application Firewall (WAF)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/security%23web-application-firewall-waf)[Secure Sockets Layer (SSL)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/security%23secure-sockets-layer-ssl)

[Penetration tests and vulnerability reports](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/security%23penetration-tests-and-vulnerability-reports)

[Security incident response](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/security%23security-incident-response)

[Disaster recovery plan](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/security%23disaster-recovery-plan)[Business continuity plan](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/security%23business-continuity-plan)

[VTEX Shield](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/security/docs/guides/security%23vtex-shield)

On this page

[Github](https://read.calvincode.net/reader?url=https://github.com/vtex-apps)[Help Center](https://read.calvincode.net/reader?url=https://help.vtex.com/)[Community](https://read.calvincode.net/reader?url=https://community.vtex.com/?%5Fga=2.198523433.743584735.1647618303-1974737580.1645714642)[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)


[System] You are a VTEX documentation expert. You provide accurate, detailed information about VTEX platform, APIs, apps, and Store Framework development.

[User] Provide a guide on guides faststore global tokens spacing in VTEX.

[Assistant]
Documentation

[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore/getting-started-faststore-versions-and-support-levels)

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore/getting-started-overview)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore/styling-overview)

[Themes reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore/themes-overview)

[Global tokens](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore/global-tokens-overview)

[Colors](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore/global-tokens-colors)

[Grid and Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore/global-tokens-grid-and-layout)

[Interactive controls](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore/global-tokens-interactive-controls)

[Refinements](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore/global-tokens-refinements)

[Spacing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore/global-tokens-spacing)

[Typography](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore/global-tokens-typography)

[Iconography](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore/styling-icons)

[Using themes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore/using-themes-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore/components-index)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore/sdk-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore/developing-and-overriding-components-overview)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore/api-extensions-overview)

[Managing URLs with redirects and rewrite paths](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore/getting-started-faststore-versions-and-support-levels)

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore/getting-started-overview)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore/styling-overview)

[Themes reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore/themes-overview)

[Global tokens](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore/global-tokens-overview)

[Colors](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore/global-tokens-colors)

[Grid and Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore/global-tokens-grid-and-layout)

[Interactive controls](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore/global-tokens-interactive-controls)

[Refinements](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore/global-tokens-refinements)

[Spacing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore/global-tokens-spacing)

[Typography](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore/global-tokens-typography)

[Iconography](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore/styling-icons)

[Using themes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore/using-themes-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore/components-index)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore/sdk-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore/developing-and-overriding-components-overview)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore/api-extensions-overview)

[Managing URLs with redirects and rewrite paths](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/storefront-best-practices)

---

[Storefront development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/storefront-development)

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore/styling-overview)

[Global tokens](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore/global-tokens-overview)

Spacing

All tokens used for spacings on the store: `padding`, `margins` and `sizes`. It's also used as base for grid tokens.

All tokens used for spacings on the store: `padding`, `margins` and `sizes`. It's also used as base for grid tokens.

| Global Token     | Value  |
| ---------------- | ------ |
| \--fs-spacing-0  | .25rem |
| \--fs-spacing-1  | .5rem  |
| \--fs-spacing-2  | .75rem |
| \--fs-spacing-3  | 1rem   |
| \--fs-spacing-4  | 1.5rem |
| \--fs-spacing-5  | 2rem   |
| \--fs-spacing-6  | 2.5rem |
| \--fs-spacing-7  | 3rem   |
| \--fs-spacing-8  | 3.5rem |
| \--fs-spacing-9  | 4rem   |
| \--fs-spacing-10 | 4.5rem |
| \--fs-spacing-11 | 5rem   |
| \--fs-spacing-12 | 5.5rem |
| \--fs-spacing-13 | 6rem   |

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F67270558%3Fv%3D4%26w=64%26q=75)](https://github.com/mariana-caetano)

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/faststore/docs/styling/global-tokens/spacing.mdx)

[Refinements« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore/global-tokens-refinements)[TypographyNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/docs/guides/faststore/global-tokens-typography)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/global-tokens-spacing/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F67270558%3Fv%3D4%26w=64%26q=75)](https://github.com/mariana-caetano)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/faststore/docs/styling/global-tokens/spacing.mdx)

Copy page

On this page

On this page

[Github](https://read.calvincode.net/reader?url=https://github.com/vtex-apps)[Help Center](https://read.calvincode.net/reader?url=https://help.vtex.com/)[Community](https://read.calvincode.net/reader?url=https://community.vtex.com/?%5Fga=2.198523433.743584735.1647618303-1974737580.1645714642)[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)