Legacy B2B components
Challenge Trade Policy Condition

Used in B2B environments, the Challenge block is a non-rendered block responsible for checking if a user is allowed to access the store's content.

This check is made according to the Condition Rule specified in the Trade Policy configuration, one of the steps needed to configure a B2B environment in VTEX IO.


  1. Import the app to your theme's dependencies in manifest.json, for example:
"dependencies": { // ... "vtex.challenge-tp-condition": "0.x" }
  1. Add the block as a parent block to the templates of the pages you want to protect, such as:
"store.home": { "blocks": [ "shelf#home", "flex-layout.row#deals", "info-card#home", "rich-text#question", "rich-text#link", "newsletter" ], + "parent": { + "challenge": "" + } },
  1. Declare the, using its props to define to where the store's users should be redirected according to each scenario. For example:
"": { "props": { "redirectPath": "/login" } },
Prop nameTypeDescriptionDefault value
redirectPathstringPath to which the not logged in user will be redirected/login
forbiddenRedirectPathstringPath to which the logged in user will be redirected if not allowed access according to the Condition Rule/login
defaultContentVisibilityenumWhether the store's content should be visible (visible) or hidden (hidden) while the Challenge block is verifying the user's access permissionvisible

️ Using hidden as the defaultContentVisibility value result in the entire page's content being rendered on the client side (in a scenario in which the check concludes that the user has permission to access the store). The page will not be Server Side Rendered (SSR) due to the fact that this verification process is user-based, making it impossible to cache.


No CSS Handles are available for the app customization.

Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Suggest edits (Github)
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page