DEV Community

Cover image for How to Password Protect Websites with Amplify Console
oteri for AWS Community Builders

Posted on • Edited on

How to Password Protect Websites with Amplify Console

There are several ways to protect your website, one of which is giving your website a secure layer of security with the protocol https. Password protection deployment with the Amplify console would prevent unauthorized access before the release of the website to the world. This access control method is helpful when you want a website to be private and password protected, allowing only people with access to view the website.

With Amplify Console, you can password-protect different branches from your GitHub repository. Make sure that you create a new branch separate from the main branch, which is the entry point for the app.

In this post, you will learn how to use AWS Amplify to add restricted access to your app by granting access control to users with a username and password to log in. Only people with the keys can access the web app, which is not the same as creating a public user account on a website.

You can watch the video to learn how to restrict access to your app.

Prerequisites

The complete walkthrough of this post would require the following:
An AWS account. Sign up for a free account
An already existing deployed app on the Amplify console.

Want to learn how to deploy a front-end web app to Amplify? Check out this post for a detailed guide on deploying your project.

Password Protect a Website with Amplify

You are in total control of who views your web app. Without sharing the login details, the website won’t be usable, nor would it be possible to access any data on the site.

Let’s begin to create the restricted access log-in to your digital asset.

Step 1: In the Amplify console, choose the app you want to set a password.

access control

Step 2: Once opened, in the navigation pane, choose App settings and then select Access control.

App settings

Step 3: Select Manage access in the Access control settings section.

manage access

Step 4: In the Access control settings, set the username and password to restrict access to the desired branch from a GitHub repo. Commit your changes by clicking the orange save button.

access control settings

Conclusion

This process is a quick way to protect a website, and when sharing your unique URL and testing the web app, the app is locked and prompts a user for login details to view the app.

Would you want to deploy this method to some of your unreleased projects and features until you are ready to launch the product to the world?

Let me know in the comments.

Learn More

Restricting Access

Top comments (0)