Update Lambda Runtime and React to latest (#56)

* GitHub Action to copy static workshop resources to S3 bucket for CloudFormation deployments * Cloud9 now requires the ImageId property * Update Lambda runtime to Java 21 * Updating React web app to work with Node 16+ * Updating the Lambda Authorizer to use the Auth0 JWT library to be compatible with Java 21
aws-samples · Mar 7, 2024 · c2c11b5 · c2c11b5
1 parent fa32554
commit c2c11b5
Show file tree

Hide file tree

Showing 27 changed files with 19,404 additions and 556 deletions.
diff --git a/lab2/client/package-lock.json b/lab2/client/package-lock.json
diff --git a/lab2/client/package.json b/lab2/client/package.json
@@ -4,23 +4,24 @@
   "description": "Copyright 2019 Amazon.com, Inc. or its affiliates. All Rights Reserved. \nPermission is hereby granted, free of charge, to any person obtaining a copy of this \nsoftware and associated documentation files (the 'Software'), to deal in the Software \nwithout restriction, including without limitation the rights to use, copy, modify,\nmerge, publish, distribute, sublicense, and/or sell copies of the Software, and to\npermit persons to whom the Software is furnished to do so.\nTHE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,\nINCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A\nPARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\nHOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION\nOF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE\nSOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.",
   "private": true,
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.36",
-    "@fortawesome/free-solid-svg-icons": "^5.15.4",
-    "@fortawesome/react-fontawesome": "^0.1.16",
-    "axios": "^0.24.0",
-    "bootstrap": "^4.6.1",
-    "jsonwebtoken": "^8.5.1",
-    "moment": "^2.29.1",
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "axios": "^1.6.7",
+    "bootstrap": "^5.3.3",
+    "crypto-browserify": "^3.12.0",
+    "jwt-decode": "^4.0.0",
+    "moment": "^2.30.1",
     "npm-force-resolutions": "^0.0.10",
-    "prop-types": "^15.7.2",
-    "react": "^16.14.0",
-    "react-bootstrap": "^1.6.4",
-    "react-dom": "^16.14.0",
-    "react-redux": "^7.2.6",
-    "react-router-dom": "^5.3.0",
-    "react-scripts": "^4.0.1",
-    "redux": "^4.1.2",
-    "redux-thunk": "^2.4.1",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-bootstrap": "^2.10.1",
+    "react-dom": "^18.2.0",
+    "react-redux": "^9.1.0",
+    "react-router-dom": "^6.22.2",
+    "react-scripts": "^5.0.1",
+    "redux": "^5.0.1",
+    "redux-thunk": "^3.1.0",
     "request": "^2.88.2"
   },
   "resolutions": {
@@ -32,7 +33,6 @@
     "ansi-html": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz"
   },
   "scripts": {
-    "preinstall": "([ ! -f package-lock.json ] && npm install --package-lock-only --ignore-scripts --no-audit); npx npm-force-resolutions",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
@@ -52,5 +52,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
   }
 }
diff --git a/lab2/client/src/App.css b/lab2/client/src/App.css
@@ -14,7 +14,7 @@
  * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
  * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
-.App {
+ .App {
   text-align: center;
 }
 
@@ -47,3 +47,34 @@
     transform: rotate(360deg);
   }
 }
+
+.container-fluid .jumbotron, .container .jumbotron {
+  border-radius: 6px;
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+@media screen and (min-width: 768px)
+{
+  .container-fluid .jumbotron, .container .jumbotron {
+      padding-left: 60px;
+      padding-right: 60px;
+  }
+}
+
+@media screen and (min-width: 768px)
+{
+  .jumbotron {
+      padding-bottom: 48px;
+      padding-top: 48px;
+  }
+}
+
+.jumbotron {
+  background-color: #eee;
+  padding-left: 60px;
+  padding-right: 60px;
+  margin-bottom: 30px;
+  padding-bottom: 30px;
+  padding-top: 30px;
+}
diff --git a/lab2/client/src/App.js b/lab2/client/src/App.js
@@ -15,10 +15,9 @@
  * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 import React from 'react';
-import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';
+import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
 import { Provider, connect } from 'react-redux';
 import Container from 'react-bootstrap/Container';
-import Jumbotron from 'react-bootstrap/Jumbotron';
 
 import {
   Navigation,
@@ -42,14 +41,41 @@ const App = ({ store, currentUser }) => {
             <Navigation />
           </Container>
           <Container>
-            <Jumbotron>
-              <Route exact={true} path='/'>
-                 {isAuthenticated ? <Redirect to="/dashboard" /> : <Home /> }
-              </Route>
-              <PrivateRoute path='/dashboard' component={Dashboard} />
-              <PrivateRoute path='/products' component={Products} />
-              <PrivateRoute path='/orders' component={Orders} />
-            </Jumbotron>
+            <div class="jumbotron">
+              <Routes>
+                <Route
+                  exact={true}
+                  path="/"
+                  element={
+                    isAuthenticated ? <Navigate to="/dashboard" /> : <Home />
+                  }
+                />
+                <Route
+                  path="/dashboard"
+                  element={
+                    <PrivateRoute currentUser={currentUser}>
+                      <Dashboard />
+                    </PrivateRoute>
+                  }
+                />
+                <Route
+                  path="/products"
+                  element={
+                    <PrivateRoute currentUser={currentUser}>
+                      <Products />
+                    </PrivateRoute>
+                  }
+                />
+                <Route
+                  path="/orders"
+                  element={
+                    <PrivateRoute currentUser={currentUser}>
+                      <Orders />
+                    </PrivateRoute>
+                  }
+                />
+              </Routes>
+            </div>
           </Container>
           <Container>
             <Footer />

diff --git a/lab2/client/src/components/navigation/component/privateRoute.js b/lab2/client/src/components/navigation/component/privateRoute.js
@@ -14,17 +14,15 @@
  * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
  * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
-import React from 'react';
-import { Redirect, Route } from 'react-router-dom';
+import { Navigate } from 'react-router-dom';
 import { connect } from 'react-redux';
 
-const PrivateRoute = ({ component: Component, currentUser, ...rest }) => (
-    <Route { ...rest } render={props => (
-        currentUser.isAuthenticated
-            ? <Component { ...props } />
-            : <Redirect to='/' />
-    )} />
-);
+const PrivateRoute = ({ currentUser, children }) => {
+    if (!currentUser.isAuthenticated) {
+        return <Navigate to='/' replace={true} />;
+    }
+    return children;
+};
 
 const mapStateToProps = state => {
     return {

diff --git a/lab2/client/src/components/user/actions/index.js b/lab2/client/src/components/user/actions/index.js
@@ -15,7 +15,7 @@
  * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 import Axios from 'axios';
-import jwt from 'jsonwebtoken';
+import { jwtDecode } from 'jwt-decode';
 import config from '../../../shared/config';
 import {
     RECEIVE_AUTHENTICATE_USER,
@@ -53,7 +53,7 @@ export const authenticateUser = (userChallenge) => {
                     sessionStorage.setItem('isAuthenticated', 'true');
                     sessionStorage.setItem('idToken', idToken);
 
-                    const decoded = jwt.decode(idToken);
+                    const decoded = jwtDecode(idToken);
                     const user = {
                         firstName: decoded.given_name,
                         lastName: decoded.family_name,

diff --git a/lab2/client/src/components/user/reducers/index.js b/lab2/client/src/components/user/reducers/index.js
@@ -20,11 +20,11 @@ import {
     REQUEST_REGISTER_USER,
     RECEIVE_REGISTER_USER,
 } from '../actionTypes';
-import jwt from 'jsonwebtoken';
+import { jwtDecode } from 'jwt-decode';
 
 const isAuthenticated = sessionStorage.getItem('isAuthenticated');
 const idToken = sessionStorage.getItem('idToken');
-const decoded = jwt.decode(idToken);
+const decoded = idToken ? jwtDecode(idToken) : null;
 
 const initialState = {
     firstName: decoded ? decoded.firstName : null,

diff --git a/lab2/client/src/store/configureStore.dev.js b/lab2/client/src/store/configureStore.dev.js
@@ -15,7 +15,7 @@
  * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 import { createStore, applyMiddleware } from 'redux';
-import thunk from 'redux-thunk';
+import { thunk } from 'redux-thunk';
 import { rootReducer } from '../reducers';
 
 const configureStore = () => {

diff --git a/lab2/client/src/store/configureStore.prod.js b/lab2/client/src/store/configureStore.prod.js
@@ -15,7 +15,7 @@
  * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 import { createStore, applyMiddleware } from 'redux';
-import thunk from 'redux-thunk';
+import { thunk } from 'redux-thunk';
 import { rootReducer } from '../reducers';
 
 const configureStore = () => {

diff --git a/resources/lab1.template b/resources/lab1.template
@@ -444,7 +444,7 @@ Resources:
     Properties:
       FunctionName: !Sub saas-factory-srvls-wrkshp-clear-bucket-lab1-${AWS::Region}
       Role: !GetAtt LambdaExecutionRole.Arn
-      Runtime: java8
+      Runtime: java21
       Timeout: 900
       MemorySize: 1024
       Handler: com.amazon.aws.partners.saasfactory.ClearS3Bucket
@@ -470,7 +470,7 @@ Resources:
     Properties:
       FunctionName: !Sub saas-factory-srvls-wrkshp-create-keypair-${AWS::Region}
       Role: !GetAtt LambdaExecutionRole.Arn
-      Runtime: java8
+      Runtime: java21
       Timeout: 300
       MemorySize: 1024
       Handler: com.amazon.aws.partners.saasfactory.CreateKeyPair
@@ -998,7 +998,7 @@ Resources:
     Properties:
       FunctionName: !Sub saas-factory-srvls-wrkshp-ssm-secure-${AWS::Region}
       Role: !GetAtt LambdaExecutionRole.Arn
-      Runtime: java8
+      Runtime: java21
       Timeout: 300
       MemorySize: 1024
       Handler: com.amazon.aws.partners.saasfactory.SSMPutParamSecure
@@ -1075,7 +1075,7 @@ Resources:
     Properties:
       FunctionName: !Sub saas-factory-srvls-wrkshp-bootstrap-rds-${AWS::Region}
       Role: !GetAtt LambdaExecutionRole.Arn
-      Runtime: java8
+      Runtime: java21
       Timeout: 900
       MemorySize: 1024
       VpcConfig: # Has to be a VPC Lambda because we're talking to RDS
@@ -1132,7 +1132,7 @@ Resources:
     Properties:
       FunctionName: !Sub saas-factory-srvls-wrkshp-rds-add-db-user-${AWS::Region}
       Role: !GetAtt LambdaExecutionRole.Arn
-      Runtime: java8
+      Runtime: java21
       Timeout: 900
       MemorySize: 1024
       VpcConfig: # Has to be a VPC Lambda because we're talking to RDS
@@ -1212,7 +1212,7 @@ Resources:
     Properties:
       FunctionName: !Sub saas-factory-srvls-wrkshp-rds-pooled-${AWS::Region}
       Role: !GetAtt LambdaExecutionRole.Arn
-      Runtime: java8
+      Runtime: java21
       Timeout: 900
       MemorySize: 1024
       VpcConfig: # Has to be a VPC Lambda because we're talking to RDS