Static Site mode (aka Non-SPA Mode) (aws-samples#42)

* Added Non-SPA mode with applicable sample data

* Moving clientSecret under clientId

* Renaming non-spa-app to static-site

* Fixing issue with Webpack

* Physical Resource ID to StaticSite

* Fixing issue with SPA Mode conditional

* Updating NonSPA app to StaticSite

* Updating condition naming

* Updated all dependencies

* First stab

* Doc

* Doc

* 1.1.0

* Better param descr

* A bit of styling

* Fix cookie setting for nonce and PKCE

* native prop access

* 1.1.0

* Doc update

* Wording

Co-authored-by: Otto Kruse <ottokrus@amazon.nl>

README.md

@@ -25,6 +25,7 @@ Lambda@Edge functions in [src/lambda-edge](src/lambda-edge):
 CloudFormation custom resources in [src/cfn-custom-resources](src/cfn-custom-resources):
 
 - [react-app](src/cfn-custom-resources/react-app): A sample React app that is protected by the solution. It uses AWS Amplify Framework to read the JWT's from cookies. The directory also contains a Lambda function that implements a CloudFormation custom resource to build the React app and upload it to S3
+- [static-site](src/cfn-custom-resources/static-site): A sample static site (see [SPA mode or Static Site mode?](#spa-mode-or-static-site-mode)) that is protected by the solution. The directory also contains a Lambda function that implements a CloudFormation custom resource to upload the static site to S3
 - [user-pool-client](src/cfn-custom-resources/user-pool-client): Lambda function that implements a CloudFormation custom resource to update the User Pool client with OAuth config
 - [user-pool-domain](src/cfn-custom-resources/user-pool-domain): Lambda function that implements a CloudFormation custom resource to update the User Pool with a domain for the hosted UI
 - [lambda-code-update](src/cfn-custom-resources/lambda-code-update): Lambda function that implements a CloudFormation custom resource to inject configuration into the lambda@Edge functions and publish versions
@@ -89,10 +90,25 @@ This solution also contains an Amazon Cognito User Pool and S3 bucket, that shou
 If your users aren't near us-east-1 (North Virgina) and low latency is important enough to you, you can split [this solution's SAM template](./template.yaml) into two separate templates:
 
 - a template with CloudFront and Lambda@Edge resources, that you deploy to us-east-1
-- a template with the Amazon Cognito User Pool and S3 bucket, that you deploy to a region closer to your users 
+- a template with the Amazon Cognito User Pool and S3 bucket, that you deploy to a region closer to your users
 
 NOTE: Even if your users aren't near us-east-1, latency might not bother them too much: latency will only be perceived by users when they open the Cognito Hosted UI to sign in, and when Lambda@Edge fetches the JWKS from the Cognito User Pool to validate JWTs. The JWKS is cached by the Lambda@Edge function, so as long as the Lambda@Edge function stays warm the JWKS won't need to be fetched again.
 
+## SPA mode or Static Site mode?
+
+The default deployment mode of this sample application is "SPA mode" - which entails some settings that make the deployment suitable for hosting a SPA such as a React/Angular/Vue app:
+
+- The User Pool client does not use a client secret, as that would not make sense for JavaScript running in the browser
+- The cookies with JWT's are not "http only", so that they can be read and used by the SPA (e.g. to display the user name, or to refresh tokens)
+- 404's (page not found on S3) will return index.html, to enable SPA-routing
+
+If you do not want to deploy a SPA but rather a static site, then it is more secure to use a client secret and http-only cookies. Also, SPA routing is not needed then. To this end, upon deploying, set parameter "EnableSPAMode" to false (--parameter-overrides EnableSPAMode="false"). This will:
+
+- Enforce use of a client secret
+- Set cookies to be http only by default (unless you've provided other cookie settings explicitly)
+- Skip deployment of the sample React app. Rather a sample index.html is uploaded, that you can replace with your own pages
+- Skip setting up the custom error document mapping 404's to index.html (404's will instead show the plain S3 404 page)
+
 ## Contributing to this repo
 
 If you want to contribute, please read [CONTRIBUTING](./CONTRIBUTING.md), and note the hints below.

SERVERLESS-REPO.md

@@ -6,15 +6,15 @@ In that blog post a solution is explained, that puts Cognito authentication in f
 
 This application is an implementation of that solution. If you deploy it, this is what you get:
 
-- Private S3 bucket prepopulated with a sample React app. You can replace that sample app with your own Single Page Application (React, Anugular, Vue) or any other static content you want authenticated users to be able to download.
+- Private S3 bucket pre-populated with a sample React app (or static site if you turn SPA mode off). You can replace that sample app with your own Single Page Application (React, Anugular, Vue) or any other static content you want authenticated users to be able to download.
 - CloudFront distribution that serves the contents of the S3 bucket
 - Cognito User Pool with hosted UI set up
 - Lambda@Edge functions that make sure only authenticated users can access your S3 content through CloudFront. Redirect to Cognito Hosted UI to sign-in if necessary.
 
 If you supply an email address, a user will be created that you can use to sign-in with (a temporary password is sent to the supplied e-mail address)
 
-To open the web app after succesful deployment, navigate to the CloudFormation stack, in the "Outputs" tab, click on the output named: "WebsiteUrl".
+To open the web app after successful deployment, navigate to the CloudFormation stack, in the "Outputs" tab, click on the output named: "WebsiteUrl".
 
 NOTE: Deploy this application to region us-east-1. This is because Lambda@Edge must be deployed to us-east-1 as it is a global configuration. If you want to deploy the regional services (like Cognito and the S3 bucket) to another region: that will work too, but you'll have to adapt this solution's SAM template, read more [here](https://github.com/aws-samples/cloudfront-authorization-at-edge/blob/master/README.md#deploying-to-another-region).
 
-NOTE: The purpose of this sample application is to demonstrate how Lambda@Edge can be used to implement authorization, with Cognito as identity provider (IDP). Please treat the application as an _**illustration**_––thoroughly review it and adapt it to your needs, if you want to use it for serious things.
+NOTE: The purpose of this sample application is to demonstrate how Lambda@Edge can be used to implement authorization, with Cognito as identity provider (IDP). Please treat the application as an _**illustration**_––thoroughly review it and adapt it to your needs, if you want to use it for serious things.

example-serverless-app-reuse/reuse-auth-only.yaml

@@ -74,7 +74,7 @@ Resources:
     Properties:
       Location:
         ApplicationId: arn:aws:serverlessrepo:us-east-1:520945424137:applications/cloudfront-authorization-at-edge
-        SemanticVersion: 1.0.7
+        SemanticVersion: 1.1.0
       Parameters:
         CreateCloudFrontDistribution: "false"
         # AlternateDomainNames: <your alternate domain names, this will be the same list as the aliases of your CloudFront distribution above>

example-serverless-app-reuse/reuse-complete.yaml

@@ -12,7 +12,7 @@ Resources:
     Properties:
       Location:
         ApplicationId: arn:aws:serverlessrepo:us-east-1:520945424137:applications/cloudfront-authorization-at-edge
-        SemanticVersion: 1.0.7
+        SemanticVersion: 1.1.0
   AlanTuring:
     Type: AWS::Cognito::UserPoolUser
     Properties: