2. Integrating the VTEX Login

In this guide, you'll learn how to integrate the VTEX Login with your FastStore project.

The VTEX Login is provided by the vtexcommercestable environment and uses a subdomain. Therefore, to successfully integrate the VTEX Login with your FastStore project, you must add a redirect back to the FastStore domain and set up the necessary auth cookies to authenticate client requests and maintain session information. This way, once shoppers finish logging in to your store, they can be redirected back to your website's main domain.

Before you begin

All stores

Ensure you have already configured the custom domain name of your FastStore website.

Stores currently using Portal (Legacy) technology

We recommend using a subdomain for the initial setup to avoid login issues caused by redirecting from Portal to the main domain.
You need to update your vtex.edition-business@0.x to vtex.edition-store@5.x and migrate your secure domain to VTEX IO. To make these changes, please contact the VTEX support team and request an update to the Edition App installed in your account, as well as a migration of your secure domain from Portal (Legacy) to VTEX IO.

Instructions

Step 1 - Adding a redirect back to your FastStore domain

By completing this step, shoppers will be redirected back to your website's main domain after logging in or completing a checkout. The instructions to complete this step depend on whether your store uses the My Account and Checkout pages in the CMS Portal (Legacy) or Store Framework.

For CMS Portal (Legacy) stores

Access the VTEX Admin.
Go to Storefront > Layout.
In the left-side navigation menu, click on CMS.
Click on HTML Templates and open the Home file.
Add the following script to the Home's <head>.
- Replace the value between curly brackets with your store domain.
_10<meta http-equiv="refresh" content="0; URL='https://{maindomain}'" />
Clean the <body> section to remove unnecessary code. By the end of this step, your Home file should look like the following:

${"base64":" ","img":{"width":1200,"height":586,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":113754,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/home-template___a12a67566b69529d2a3f19c98f135060.png"}}$
Click on the Save Template button.

For Store Framework stores

Store Framework stores are built on VTEX IO, which has a decoupled architecture where pages like My Account and Checkout are managed as apps. Unlike the CMS Portal (Legacy), these pages are part of the VTEX IO ecosystem and require a different approach for handling redirects.

To redirect users back to your FastStore domain after events like logins or checkouts, follow these steps:

Create a Pixel App by following the Pixel Apps track.
In the 4. Writing the head and body scripts step, add the following script:

_33<script> _33 _33function redirectToProduction(){ _33 _33 const { pathname, search } = window.location _33 const redirectDomain = decodeURIComponent("https://www.{addDomainName}.com") // Replace with your domain _33 _33 if( _33 pathname === '/account' || _33 pathname === '/login' || _33 pathname === '/checkout' || _33 pathname === '/checkout/orderPlaced' || _33 pathname === '/checkout/orderPlaced/' || _33 pathname === '/api/io/account' || _33 pathname === '/api/io/login' || _33 !redirectDomain) { _33 return false _33 } _33 _33 const redirectLink = redirectDomain + pathname + search _33 _33 window.location.href = redirectLink _33} _33 _33(function() { _33 redirectToProduction() _33 _33 window.addEventListener('hashchange',() => { _33 redirectToProduction() _33 }) _33})() _33 _33</script>

Replace https://www.{addDomainName}.com with your store's main domain. For example, if the store's main domain is https://www.mystore.com, set the const as the following: const redirectDomain = decodeURIComponent("https://www.mystore.com").
Complete the remaining steps in the Pixel app track to inject the script into your store's login page.

Once implemented, shoppers will be automatically redirected to your website’s main domain after logging in or completing a checkout.

To authenticate client requests and maintain session information, you must ensure that the auth cookies are set up for the Login subdomain. To do that, open a support ticket with VTEX to the Identity team requesting to set up the auth cookie root domain for your FastStore URL.