Show local cache explanation in sample React app (#215)

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

@@ -32,7 +32,7 @@ Parameters:
   SemanticVersion:
     Type: String
     Description: Semantic version of the back end
-    Default: 2.1.4
+    Default: 2.1.5
 
   HttpHeaders:
     Type: String

example-serverless-app-reuse/reuse-complete-cdk.ts

@@ -19,7 +19,7 @@ const authAtEdge = new sam.CfnApplication(stack, "AuthorizationAtEdge", {
   location: {
     applicationId:
       "arn:aws:serverlessrepo:us-east-1:520945424137:applications/cloudfront-authorization-at-edge",
-    semanticVersion: "2.1.4",
+    semanticVersion: "2.1.5",
   },
   parameters: {
     EmailAddress: "[email protected]",

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: 2.1.4
+        SemanticVersion: 2.1.5
   AlanTuring:
     Type: AWS::Cognito::UserPoolUser
     Properties:

example-serverless-app-reuse/reuse-with-existing-user-pool.yaml

@@ -75,7 +75,7 @@ Resources:
     Properties:
       Location:
         ApplicationId: arn:aws:serverlessrepo:us-east-1:520945424137:applications/cloudfront-authorization-at-edge
-        SemanticVersion: 2.1.4
+        SemanticVersion: 2.1.5
       Parameters:
         UserPoolArn: !GetAtt UserPool.Arn
         UserPoolClientId: !Ref UserPoolClient

src/cfn-custom-resources/react-app/react-app/src/App.css

@@ -17,6 +17,11 @@
   text-align: center;
 }
 
+.explanation-tight {
+  max-width: 500px;
+  text-align: center;
+}
+
 /* Tooltip container */
 .config {
   position: relative;

src/cfn-custom-resources/react-app/react-app/src/App.js

@@ -2,8 +2,8 @@
 // SPDX-License-Identifier: MIT-0
 
 import React, { useState, useEffect } from "react";
-import Amplify from "@aws-amplify/core";
-import Auth from "@aws-amplify/auth";
+import { Amplify } from "@aws-amplify/core";
+import { Auth } from "@aws-amplify/auth";
 import "./App.css";
 
 Amplify.configure({
@@ -32,20 +32,61 @@ const App = () => {
   const [state, setState] = useState({
     email: undefined,
     username: undefined,
+    authenticated: undefined,
   });
 
   useEffect(() => {
-    Auth.currentSession().then((user) =>
-      setState({
-        username: user.username,
-        email: user.getIdToken().decodePayload().email,
-      })
-    );
+    Auth.currentSession()
+      .then((user) =>
+        setState({
+          username: user.username,
+          email: user.getIdToken().decodePayload().email,
+          authenticated: true,
+        })
+      )
+      .catch(() => setState({ authenticated: false }));
+
     // Schedule check and refresh (when needed) of JWT's every 5 min:
     const i = setInterval(() => Auth.currentSession(), 5 * 60 * 1000);
     return () => clearInterval(i);
   }, []);
 
+  if (state.authenticated === undefined) {
+    return (
+      <div className="App">
+        <p className="explanation">One moment please ...</p>
+      </div>
+    );
+  }
+
+  if (state.authenticated === false) {
+    return (
+      <div className="App">
+        <h1>Signed out</h1>
+        <p className="explanation-tight">You're signed out.</p>
+        <p className="explanation-tight">
+          You're able to view this page, because it is in your browser's local
+          cache––you didn't actually download it from CloudFront just now.
+          Authorization@Edge wouldn't allow that.
+        </p>
+        <p className="explanation-tight">
+          If you force your browser to reload the page, you'll trigger
+          Authorization@Edge again, redirecting you to the login page:&nbsp;
+          <button onClick={() => window.location.reload(true)}>
+            Reload page
+          </button>
+        </p>
+        <p className="explanation-tight">
+          If you never want to cache content, set the right cache headers on the
+          objects in S3; those headers will be respected by CloudFront and web
+          browsers:
+          <pre>Cache-Control: no-cache</pre>
+          At the expense of some performance for end-users of course.
+        </p>
+      </div>
+    );
+  }
+
   return (
     <div className="App">
       <h1>Private</h1>

template.yaml

@@ -27,7 +27,7 @@ Metadata:
         "amplify",
       ]
     HomePageUrl: https://github.com/aws-samples/cloudfront-authorization-at-edge
-    SemanticVersion: 2.1.4
+    SemanticVersion: 2.1.5
     SourceCodeUrl: https://github.com/aws-samples/cloudfront-authorization-at-edge
 
 Parameters:
@@ -150,7 +150,7 @@ Parameters:
   Version:
     Type: String
     Description: "Changing this parameter after initial deployment forces redeployment of Lambda@Edge functions"
-    Default: "2.1.4"
+    Default: "2.1.5"
   LogLevel:
     Type: String
     Description: "Use for development: setting to a value other than none turns on logging at that level. Warning! This will log sensitive data, use for development only"