Protecting online stores using Storefront Protection in SiteGenesis and SFRA is simple. But now that we have the Composable Storefront, we need to think about whether those protections still work. This blog post will talk about how to keep your Composable Storefront safe and what this new technology means for security.
The Shift from Business Manager to Managed Runtime
When utilising SFCC with SiteGenesis or SFRA (Salesforce Reference Architecture) sites, enabling Storefront Protection was a straightforward process.
You can easily navigate through the Business Manager by following this path:
Administration > Sites > Manage Sites
We proceed on our journey by selecting the site you want to enable this for, then navigating to the site status tab after the page has finished loading.
This page allows us to switch to “Online (Protected),” which unveils a new field.
Here, you choose a password that allows users to access the storefront.
1. simple 2. effortless 3. straightforward
The Storefront Protection method helps keep your online store safe and controls who can access it. However, things have changed with the new SFCC PWAs (Progressive Web Apps). Moving from Business Manager to Managed Runtime (MRT) is a big shift, and developers need to know that the protection settings from Business Manager don’t work for PWAs anymore.
Because of this change, we must find new ways to keep our online stores safe. Password protection is still very important, especially when we’re working on a site or when we need to limit who can see it.
So, how can we keep SFCC PWA storefronts safe and restrict access?
Implementing Basic Authentication in The Composable Storefront
A straightforward way to limit who can access your SFCC PWA storefront is to use Basic Authentication. This method works on the server side, meaning it runs on the computer that hosts your website. It involves setting up a special middleware function for the login process. Here are the steps to help you get started.
Step 1: Locate the `ssr.js` File
First, find your `ssr.js` file in your SFCC PWA project folder. This file is important because it helps with server-side rendering, which is necessary for safely displaying your online store’s content.
Step 2: Create Middleware for Basic Authentication
I’m not particularly eager to do things all over again if someone has already done a fantastic job. Here are some examples of how to add your own authentication middleware:
Why would you do this?
Making sure your SFCC PWA store has a password is really important. This is especially true when you’re still working on it or it’s not ready for everyone to see. Because it’s in the cloud, anything you put online can be accessed unless you put up some protection. If you don’t secure it, people who shouldn’t see your work might get access to important information and unfinished parts of the site.
Also, if the site isn’t protected, search engines might find it too soon and show it to everyone, even though it’s not finished. This could hurt your website’s reputation and lower how it ranks in search results.
By using a simple password protection, you can keep your work safe and ensure only the right people can check it out. This helps keep your project intact and protects your brand’s reputation.
Is there an interface planned?
Right now, the main suggestion (to my knowledge) is to stick with the coding solution. I haven’t seen any plans for an interface for “Storefront Protection”.
This feature can be added easily with just a little development using environment variables. I believe the time and resources spent on improving the PWA Kit project would be better used on other priorities instead of creating interfaces for these features.
