Documentation
Feedback
Guides
Storefront Development

Storefront Development
FastStore
Storefront features
Authenticated content
Authenticated content is a feature that restricts access to specific store content based on whether a user is logged in. This ensures that only registered and logged-in users can view exclusive content, like prices, detailed product descriptions, and special offers. Non-logged-in users will see generic content instead.
Before log inAfter log in
{"base64":"  ","img":{"width":1375,"height":705,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":35340,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/before-login___1c428d5e4b755d2c94fb64968893290c.png"}}
{"base64":"  ","img":{"width":1465,"height":706,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":723829,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/after-login___de2dbeae277be2cae93ecc9ec51b3929.png"}}
Authenticated content fosters a more controlled and secure shopping environment for stores and customers, enhancing the shopping experience. For example, in B2B settings, this allows for customized access to product catalogs, ensuring that businesses only see relevant products and pricing. For segmented promotions, authenticated content enables merchants to tailor special offers and discounts to specific customer segments, increasing engagement and conversion rates.
In this guide, learn how to create an authenticated component using the Hero component as an example.

Before you begin

Update the @faststore/core package

Ensure your store is using @faststore/core@v3.0.39 or later. To benefit from this feature, follow the steps below:
  1. Update your store’s @faststore/core package to the v3.0.39 by running the following command:

    _10
    yarn add @faststore/core@3.0.39

  2. Run yarn dev to apply the changes to your project.

Understand Section Override

Make sure you understand the concepts of Section Override to follow along.

Instructions

Step 1 - Override a component

Choose the component you want to restrict access to. To check the available components, refer to the UI components guide.
Once you have chosen the component, you will need to override the component using the feature Section Override. In this guide we will use the Hero component as an example.
  1. In src/components/overrides create the Hero.tsx file.
  2. Add the following to the Hero.tsx file:

    _17
    import { SectionOverride } from "@faststore/core";
    _17
    import { HeroHeader, HeroImage } from "@faststore/ui";
    _17
    _17
    const SECTION = "Hero" as const;
    _17
    _17
    const override: SectionOverride = {
    _17
    section: SECTION,
    _17
    components: {
    _17
    HeroImage: {
    _17
    Component: (props) => (
    _17
    <HeroImage {...props} />
    _17
    ),
    _17
    },
    _17
    },
    _17
    };
    _17
    _17
    export { override };

    The code above overrides the HeroImage component to not show any images.
  3. Open the terminal and run yarn dev.
  4. Access your store's local development URL (localhost). So far, you will have the following Hero:
    {"base64":"  ","img":{"width":1462,"height":709,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":47254,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/hero-component___d833f1abca8976e439c5d2e37ebda450.png"}}
At this point, the Hero component will not display an image, and logging in won't change that.

Step 2 - Wrap the component with ProfileChallenge

The ProfileChallenge component checks if a user is logged in and has sales channel access. If both conditions are met, it displays your customized version (the overridden component). Otherwise, it displays the default Hero component or your fallback component.
  1. In the Hero.tsx file, add the following code:

    _21
    import { SectionOverride } from "@faststore/core";
    _21
    import { ProfileChallenge_unstable as ProfileChallenge } from "@faststore/core/experimental";
    _21
    _21
    import { HeroHeader, HeroImage } from "@faststore/ui";
    _21
    _21
    const SECTION = "Hero" as const;
    _21
    _21
    const override: SectionOverride = {
    _21
    section: SECTION,
    _21
    components: {
    _21
    HeroImage: {
    _21
    Component: (props) => (
    _21
    <ProfileChallenge>
    _21
    <HeroImage {...props} />
    _21
    </ProfileChallenge>
    _21
    ),
    _21
    },
    _21
    },
    _21
    };
    _21
    _21
    export { override };

    • The code above imports the ProfileChallenge component.
    • The override object defines the section (Hero) and the components to be overridden.
    • Inside components, the HeroImage component is being overridden.
    • The overridden HeroImage is wrapped with ProfileChallenge.
    • When ProfileChallenge renders the HeroImage, it checks for user login status and sales channel access.
  2. Run yarn dev to sync the changes locally.
  3. To test the changes, access your store's local development URL (localhost).
  4. On the store home page, click on Sign in to enter your account.
  5. Once you are logged in, you will be able to see the customized Hero section:
    {"base64":"  ","img":{"width":1376,"height":710,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":697509,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/hero-component-login___cb5cecfe909ff084771b45ae99eebc93.png"}}

Step 3 - Create a component fallback

The ProfileChallenge has a property called fallback. This property allows you to display a custom component when a user is not logged in. If not provided, the default component with the original content will be displayed.
  1. To create a fallback component, open the override component file, in this case, Hero.tsx, and add the following:

_37
import { SectionOverride } from "@faststore/core";
_37
import { ProfileChallenge_unstable as ProfileChallenge } from "@faststore/core/experimental";
_37
_37
import { HeroHeader, HeroImage } from "@faststore/ui";
_37
_37
const SECTION = "Hero" as const;
_37
_37
const override: SectionOverride = {
_37
section: SECTION,
_37
components: {
_37
HeroImage: {
_37
Component: (props) => (
_37
<ProfileChallenge>
_37
<HeroImage {...props} />
_37
</ProfileChallenge>
_37
),
_37
},
_37
HeroHeader: {
_37
Component: (props) => {
_37
return (
_37
<ProfileChallenge
_37
fallback={
_37
<HeroHeader
_37
title="🔒 Auth Hero"
_37
subtitle="You should be logged in to see this content"
_37
/>
_37
}
_37
>
_37
<HeroHeader {...props} />
_37
</ProfileChallenge>
_37
);
_37
},
_37
},
_37
},
_37
};
_37
_37
export { override };

  • Inside the components section, specific components (HeroImage and HeroHeader) are targeted for customization.
  • HeroImage Override:
    • A new component function is defined that wraps the original HeroImage component with ProfileChallenge. This ensures ProfileChallenge logic is applied to HeroImage.
  • HeroHeader Override:
    • A new component function is defined for HeroHeader.
    • It uses ProfileChallenge with a fallback property.
    • The fallback property defines what to display if the user isn't logged in.
    • Inside the fallback, a custom HeroHeader component is created with two editable properties, title (Auth Hero), and subtitle (You should be logged in to see this content).
    • If the user is logged in, the original HeroHeader content is displayed.
  1. Run yarn dev to sync the changes locally.
  2. Access the localhost available in the terminal, and without signing in to your account, you will see the following:
    {"base64":"  ","img":{"width":1375,"height":705,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":35340,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/before-login___1c428d5e4b755d2c94fb64968893290c.png"}}

Step 3 - Promoting your changes

After testing locally, you can promote your changes to production by doing the following:
  1. In your local store code, create a new branch with the changes you made.
  2. Push the changes to the new branch and publish it.
  3. Open a pull request in the store repository.
  4. If the checks and reviews are all good, merge the branch with the main one.
Contributors
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
+ 3 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
+ 3 contributors
On this page