From 715e38cd98efd40727f9fa51dae61d78be9aa70c Mon Sep 17 00:00:00 2001 From: Otto Kruse Date: Tue, 16 Aug 2022 08:56:40 +0200 Subject: [PATCH] Show local cache explanation in sample React app (#215) --- .../reuse-auth-only.yaml | 2 +- .../reuse-complete-cdk.ts | 2 +- .../reuse-complete.yaml | 2 +- .../reuse-with-existing-user-pool.yaml | 2 +- .../react-app/react-app/src/App.css | 5 ++ .../react-app/react-app/src/App.js | 57 ++++++++++++++++--- template.yaml | 4 +- 7 files changed, 60 insertions(+), 14 deletions(-) diff --git a/example-serverless-app-reuse/reuse-auth-only.yaml b/example-serverless-app-reuse/reuse-auth-only.yaml index 0e0a35b..8d7b50a 100644 --- a/example-serverless-app-reuse/reuse-auth-only.yaml +++ b/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 diff --git a/example-serverless-app-reuse/reuse-complete-cdk.ts b/example-serverless-app-reuse/reuse-complete-cdk.ts index 4a38529..ee16475 100755 --- a/example-serverless-app-reuse/reuse-complete-cdk.ts +++ b/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: "johndoe@example.com", diff --git a/example-serverless-app-reuse/reuse-complete.yaml b/example-serverless-app-reuse/reuse-complete.yaml index 6f3a81d..79852c1 100644 --- a/example-serverless-app-reuse/reuse-complete.yaml +++ b/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: diff --git a/example-serverless-app-reuse/reuse-with-existing-user-pool.yaml b/example-serverless-app-reuse/reuse-with-existing-user-pool.yaml index 1e76afe..a4d927a 100644 --- a/example-serverless-app-reuse/reuse-with-existing-user-pool.yaml +++ b/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 diff --git a/src/cfn-custom-resources/react-app/react-app/src/App.css b/src/cfn-custom-resources/react-app/react-app/src/App.css index f5ef78c..7e7ad13 100644 --- a/src/cfn-custom-resources/react-app/react-app/src/App.css +++ b/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; diff --git a/src/cfn-custom-resources/react-app/react-app/src/App.js b/src/cfn-custom-resources/react-app/react-app/src/App.js index a03432a..2d96515 100644 --- a/src/cfn-custom-resources/react-app/react-app/src/App.js +++ b/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 ( +
+

One moment please ...

+
+ ); + } + + if (state.authenticated === false) { + return ( +
+

Signed out

+

You're signed out.

+

+ 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. +

+

+ If you force your browser to reload the page, you'll trigger + Authorization@Edge again, redirecting you to the login page:  + +

+

+ 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: + 

Cache-Control: no-cache
+ At the expense of some performance for end-users of course. +

+
+ ); + } + return (

Private

diff --git a/template.yaml b/template.yaml index 5e511a0..1c26d1e 100644 --- a/template.yaml +++ b/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"