This is a repository that will contain code and steps for hosting a simple website using AWS S3, and setting up a login system to access a private webpage.
Project progress can be tracked here: https://github.com/users/mphemming/projects/2/views/1
The below sections will contain notes and information useful to replicate the project process.
MFA was enabled for the root user as recommended, and an IAM user 'Michael_developer' with console access and full admin rights was created. This IAM user will be used to work on this project. The password for this IAM user is stored in Michael's Dashlane account.
I am working within the ap-southeast-2 (Sydney) region.
An S3 bucket was created with the standard option within the ap-southeast-2 (Sydney) region spread across >= 3 AZs. This bucket is called 'aws-project-2-staticwebsite'.
The simple website file 'index.html' was added to the S3 bucket. This simple website displays 'Hello World'.
Enable Static Website Hosting:
- Click on the "Properties" tab in your S3 bucket.
- Scroll down to the "Static website hosting" section and click "Edit".
- Select "Enable".
- For the "Index document", enter index.html.
- Click "Save changes".
ℹ️ Note that 'index.html' used here was renamed to 'index.html.legacy' in this repository in order to setup a new 'index.html' in the next section.
Turn off 'Block public access' (if enabled when creating the S3 bucket):
- Click on the "Permissions" tab in your S3 bucket.
- Click on "Block public accessy" and then "Edit".
- Uncheck the box for 'Bloack all public access.
- Click "Save changes".
Set Bucket Policy for Public Access:
- Click on the "Permissions" tab in your S3 bucket.
- Click on "Bucket Policy" and then "Edit".
- Add the following bucket policy to allow public read access:
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::aws-project-2-staticwebsite/*"
}
]
}
- Click "Save changes".
Enable Static Website Hosting:
- Click on the "Properties" tab in your S3 bucket.
- Scroll down to the "Static website hosting" section and click "Edit".
- Select "Enable".
- For the "Index document", enter index.html.
- Click "Save changes".
Access Your Website - get the Website URL:
- Go back to the "Properties" tab.
- In the "Static website hosting" section, you will see the "Bucket website endpoint".
- In my case, the URL is http://aws-project-2-staticwebsite.s3-website-ap-southeast-2.amazonaws.com
- Open the provided URL in a web browser to see the "Hello World" page.
ℹ️ Note that 'index.html' used here was renamed to 'index.html.legacy' in this repository in order to setup a new 'index.html' in the next section.
ℹ️ Note the AWS link in step 3 now directs to the newer index.html described in the section below.
Create a User Pool using AWS Cognito
- create a user pool via the Cognito console with the following settings:
- Users can sign-in using either a username or email address
- The minimum password length is 8 characters, and must contain at least 1 number, and at least one upper and lower case letter.
- The temporary password expires after 7 days
- no multi-factor authentication required (although this is an option if better security needed)
- "forgot your password" option available to users, delivered via email
- disable self-registration option so that only a select few can access information (organised by website admin)
- Allow Cognito to automatically send email messages to verify and confirm (recommended)
- the following attributes are required when a new user is created: birthdate, address, given_name, family_name, phone_number, preferred_username. There is also an option to create custom attributes but I left this blank for now.
- send email with Cognito, but replies are forwarded to my personal email address (temporary)
- user pool name 'StaticWebsite'
- Public app client created called 'StaticWebsite'
For the next steps, this Youtube video was very helpful: https://www.youtube.com/watch?v=8a0vtkWJIA4
- Upload 3 html scripts to the same S3 bucket 'aws-project-2-staticwebsite': 'index.html', 'logged_in.html', and 'logged_out.html'. These are found in this repo and all 3 will be used for setting this up.
- I used the Hosted UI for the login interface. To set this up you will need to do the following:
- Navigate to the App client 'StaticWebsite'
- Edit the 'Hosted UI' section to include a callback URL as
https://aws-project-2-staticwebsite.s3.ap-southeast-2.amazonaws.com/logged_in.html
and the allowed sign-out URL ashttps://aws-project-2-staticwebsite.s3.ap-southeast-2.amazonaws.com/logged_out.html
. - Select 'Cognito user pool' as the identity providers
- Select 'Authorization code grant' for OAuth 2.0 grant types
- select 'OpenID' and 'Email' for the OpenID connect scopes
- Add a domain name for the hosted UI. You can call it anything, but it has to be unique.
- After saving changes, click on the 'view hosted UI' button to test the login interface.
- Copy the URL for this hosted UI into the three html scripts uploaded in the S3 bucket, making sure to change some parts of the URL for 'logged_in.html'. I have removed the app client ID in the scripts available in this repository so you will need to add your own ID to the URL link.
- create a user to test the login mechanism. You do this by going to the Cognito user pool and then click on 'create user'. An email will be sent with the username and temporary password, and then once logged in the user will have the opportunity to input required info and change the password.
ℹ️ Note that I did not receive an email when I used the same email for the user as used for the user pool email setup.
ℹ️ Note that 'login.html.legacy' is a previous attempt to create a login interface. It didn't work because it couldn't find the 'amazon-cognito-identity.min.js' script. I think ChatGPT probably made this up. I have uploaded the code still in case it might be useful for something else.
- The website URL might not work at first relating to http vs https. Changing the URL to 'https' usually works.
- For Cognito, it is better to not use the same email address for the testing user as used when creating the user pool