How to Password Protect Websites with Amplify Console
Tags: aws, webdev, tutorial, productivity
Published: 2022-09-21 09:45:39

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.

{% embed https://youtu.be/DDZhIv7QhdI %}

## Prerequisites
The complete walkthrough of this post would require the following:
An AWS account. Sign up for a [free account](https://aws.amazon.com/)
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](https://hackernoon.com/how-to-deploy-modern-apps-with-aws-amplify) 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h3oufwo0w4irvcuq12o4.png)

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


![App settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/es6cqwqsnw8wtag71jhq.png)

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


![manage access](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ja7sg877adg7vqrm7c9m.png)

**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dyg6s9xc6td2zhwp84h6.png)


## 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](https://aws.amazon.com/about-aws/whats-new/2018/11/announcing-aws-amplify-console/)