Fastly : How to set basic authentication for a specific page in Magento 2

In this blog, we will see how we can set basic authentication for a Specific Page in Magento 2 using Fastly VCL.

Fastly is a powerful Content Delivery Network (CDN) integrated with Adobe Commerce (Magento 2) to ensure faster and more secure website performance. One of its many features is the ability to implement Basic Authentication for specific pages, adding an extra layer of security.

What is Basic Authentication?

Basic Authentication is a simple way to protect sensitive content by requiring users to provide a username and password before accessing a page. In the context of Fastly, this can be achieved by configuring custom VCL snippets.

Steps to Set Up Basic Authentication

Prerequisites

• Fastly is configured and integrated with your Magento 2 store.
• Basic knowledge of VCL syntax.

Step 1: Create Base64 Encoded Credentials

Basic Authentication uses Base64 encoding to pass the username and password. You can generate this using any online tool or the following command in a terminal:

echo -n "username:password" | base64

For example, if your username is admin and password is password123, the encoded string will be:

YWRtaW46cGFzc3dvcmQxMjM=

Step 2: Identify the Target Page

Determine the URL path of the page you want to protect. For example, /test-page.

Step 3: Add a Custom VCL Snippet in Fastly

Log in to your Magento 2 Admin Dashboard and follow these steps:

1. Go to Magento admin > Stores > Configuration > Advanced > System > Full Page Cache > Fastly Configuration > Custom VCL Snippets
2. Click on Create button under Create Custom Snippet
3. Fill in below details in the form
   • Name: basic_auth_protect_test_page
   • Type: recv
   • Priority: 100 (or adjust based on your configuration)
   • VCL Code:
     

if (req.url.path == "/test-page" &&
    !req.http.Authorization ~ "Basic YWRtaW46cGFzc3dvcmQxMjM=") {
    return (synth(401, "Unauthorized"));
}

Fill out as appropriate

• Name: alphanumeric short description. Use underscores (_) instead of dashes (-)
• Type: is the type of snippet e.g. recv, fetch, miss, pass, init etc.
• Priority: defines the order of insertion of the snippet in the code. Lower number is higher priority. Default Fastly VCL inserted by Magento module carries priority of 100
• VCL: defines the actual VCL code to be uploaded

You can refer below screenshot, after filling all the details click on create.

After creating snippets or editing them you need to click the Upload VCL button at the top of Fastly configuration to upload VCL snippets to Fastly. They will be uploaded together with the latest version of the stock Magento snippets

After that, when you try to visit the specified URL, It will asks for username and password.

Fastly’s ability to configure custom VCL snippets allows you to easily implement Basic Authentication for specific pages in your Magento 2 store. By following the steps outlined in this guide, you can protect sensitive pages and enhance your website’s security.

Let me know in the comments if you are having any queries.

If you love this tutorials, feel free to share with colleagues or bookmark this to visit later.

If you are interested in receiving snippets for enhancing your Magento 2 skills, don’t forget to subscribe to my newsletters for amazing tutorials at https://jigarkarangiya.com/newsletter/

Thank you

You may also like,

Magento 2 : How to Set Custom Error/Maintenance Page in Fastly CDN

Reference Links:

https://experienceleague.adobe.com/en/docs/commerce-cloud-service/user-guide/cdn/custom-vcl-snippets/fastly-vcl-custom-snippets