Changes recommended to get the CircleCI emblem to go green

.circleci/config.yml

@@ -8,40 +8,45 @@ version: 2.1
 
 orbs:
   node: circleci/node@5.0.2
-  docker: circleci/docker@2.0.3
-  
+#  docker: circleci/docker@2.8.2
+
 jobs:
   checkout:
     docker:
-      - image: cimg/node:lts
+      - image: cimg/node:20.2.0
     steps:
       - checkout
-      - run: git clone https://github.com/auth0-samples/spa-quickstarts-tests scripts
+      #- run: git clone https://github.com/auth0-samples/spa-quickstarts-tests scripts
+      # Use the following line instead of the previous one if you want to use a fork of the tests repository
+      - run: git clone https://github.com/djbauch/spa-quickstarts-tests scripts
       - persist_to_workspace:
           root: ~/
           paths:
             - project
             - scripts
   sample-01:
     docker:
-      - image: cimg/node:lts
+      - image: cimg/base:stable
     environment:
-      - AUTH0_CFG: Sample-01/src/auth_config.json
-      - SAMPLE_PATH: Sample-01
+      AUTH0_CFG: Sample-01/src/auth_config.json
+      SAMPLE_PATH: Sample-01
     steps:
       - node/install:
+          node-version: "22.14.0"
           install-yarn: true
+      - run: node --version
       - attach_workspace:
           at: ~/
       - run:
           name: Replace Auth0 test credentials
           command: |
             echo "{ \"domain\": \"$AUTH0_TEST_DOMAIN\", \"clientId\": \"$AUTH0_TEST_CLIENT_ID\", \"audience\": \"$AUTH0_TEST_API_IDENTIFIER\" }" > $AUTH0_CFG
       - setup_remote_docker:
-          version: 19.03.13
+          version: 20.10.24
       - run:
           name: Build pull request
           command: |
+            node --version
             docker build -t $CIRCLE_JOB ./$SAMPLE_PATH
             docker run -d -p 3000:3000 --name $CIRCLE_SHA1 $CIRCLE_JOB
       - run:
@@ -61,9 +66,12 @@ jobs:
           name: Run integration tests
           command: |
             docker create --network host --name tester codeceptjs/codeceptjs codeceptjs run-multiple --all --steps --verbose
-            docker cp $(pwd)/lock_login_spa_test.js tester:/tests/lock_login_test.js
             docker cp $(pwd)/codecept.conf.js tester:/tests/codecept.conf.js
             docker start -i tester
+            docker cp $(pwd)/cant_login_spa_test.js tester:/tests/cant_login_test.js
+            docker start -i tester
+
+
           working_directory: scripts
       - run:
           name: Copy app container logs

.gitignore

@@ -4,3 +4,4 @@ node_modules
 **/auth0-variables.js
 npm-debug.log
 .editorconfig
+.vscode/

Sample-01/Dockerfile

@@ -1,4 +1,7 @@
-FROM node:lts-alpine3.14 as build
+ARG NODE_VERSION=22.14.0
+ARG ALPINE_VERSION=3.21
+
+FROM node:${NODE_VERSION}-alpine${ALPINE_VERSION} AS build
 
 RUN apk update && \
   apk upgrade && \
@@ -20,13 +23,13 @@ RUN yarn build
 
 # ---------------
 
-FROM node:lts-alpine3.14
-
-RUN mkdir -p /app/build
+FROM node:${NODE_VERSION}-alpine${ALPINE_VERSION}
 
-RUN apk update && \
+RUN mkdir -p /app/build && \
+  apk update && \
   apk upgrade && \
-  apk add git
+  apk add git && \
+  rm -rf /var/cache/apk/*
 
 WORKDIR /app
 

Sample-01/api-server.js

@@ -7,9 +7,9 @@ const authConfig = require("./src/auth_config.json");
 
 const app = express();
 
-const port = process.env.API_PORT || 3001;
-const appPort = process.env.SERVER_PORT || 3000;
-const appOrigin = authConfig.appOrigin || `http://localhost:${appPort}`;
+const port = +(process.env.API_PORT ?? 3001)
+const appPort = +(process.env.SERVER_PORT || 3000)
+const appOrigin =('appOrigin' in authConfig) ? authConfig.appOrigin : `http://localhost:${appPort}`;
 
 if (
   !authConfig.domain ||
@@ -30,7 +30,7 @@ app.use(cors({ origin: appOrigin }));
 const checkJwt = auth({
   audience: authConfig.audience,
   issuerBaseURL: `https://${authConfig.domain}/`,
-  algorithms: ["RS256"],
+  tokenSigningAlg: "RS256",
 });
 
 app.get("/api/external", checkJwt, (req, res) => {

Sample-01/package.json

@@ -16,7 +16,7 @@
     "prod": "npm-run-all --parallel server api-server"
   },
   "dependencies": {
-    "@auth0/auth0-react": "^2.2.0",
+    "@auth0/auth0-react": "^2.3.0",
     "@babel/core": "^7.23",
     "@babel/plugin-syntax-flow": "^7.23",
     "@babel/plugin-transform-react-jsx": "^7.23",
@@ -26,17 +26,18 @@
     "autoprefixer": "^10.4",
     "cors": "^2.8",
     "express": "^4.18",
-    "express-oauth2-jwt-bearer": "^1.6.0",
+    "express-oauth2-jwt-bearer": "^1.6.1",
+    "express-rate-limit": "^7.5.0",
     "helmet": "^4.4",
-    "highlight.js": "^10.0",
     "morgan": "^1.9",
     "npm-run-all": "^4.1",
     "postcss": "^8.4",
     "react": "^18",
     "react-dom": "^18",
+    "react-json-view": "^1.21.3",
     "react-router-dom": "^5.3",
     "react-scripts": "^5.0",
-    "reactstrap": "^9.2",
+    "reactstrap": "9.2.3",
     "typescript": "^4.9"
   },
   "devDependencies": {
@@ -60,5 +61,6 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "packageManager": "yarn@1.22.22"
 }

Sample-01/public/index.html

@@ -22,13 +22,22 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+    <link rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
+      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
+       crossorigin="anonymous"
+    >
+    <!-- reactstrap library now uses bootstrap v5 rather than v4>
     <link
       rel="stylesheet"
       href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
       integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
       crossorigin="anonymous"
     />
-
+    -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"
+     integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
+      crossorigin="anonymous"></script>
     <link
       rel="stylesheet"
       href="https://cdn.auth0.com/js/auth0-samples-theme/1.0/css/auth0-theme.min.css"

Sample-01/server.js

@@ -2,10 +2,19 @@ const express = require("express");
 const morgan = require("morgan");
 const helmet = require("helmet");
 const { join } = require("path");
+const RateLimit = require("express-rate-limit");
 
 const app = express();
 
-const port = process.env.SERVER_PORT || 3000;
+const port = +(process.env.SERVER_PORT ?? '3000');
+
+// Limit to 100 requests per 15 minutes
+const limiter = RateLimit({
+  windowMs: 15 * 60 * 1000,
+  max: 100,
+});
+
+app.use(limiter);
 
 app.use(morgan("dev"));
 

Sample-01/src/serviceWorker.js

@@ -44,8 +44,10 @@ export function register(config) {
           console.log(
             'This web app is being served cache-first by a service ' +
               'worker. To learn more, visit https://bit.ly/CRA-PWA'
-          );
-        });
+          )
+        }).catch((error) => {
+          console.error('Error during service worker registration:', error);
+        })
       } else {
         // Is not localhost. Just register service worker
         registerValidSW(swUrl, config);
@@ -75,19 +77,15 @@ function registerValidSW(swUrl, config) {
               );
 
               // Execute callback
-              if (config && config.onUpdate) {
-                config.onUpdate(registration);
-              }
+              config?.onUpdate?.(registration);
             } else {
               // At this point, everything has been precached.
               // It's the perfect time to display a
               // "Content is cached for offline use." message.
               console.log('Content is cached for offline use.');
 
               // Execute callback
-              if (config && config.onSuccess) {
-                config.onSuccess(registration);
-              }
+              config?.onSuccess?.(registration);
             }
           }
         };
@@ -112,7 +110,11 @@ function checkValidServiceWorker(swUrl, config) {
         navigator.serviceWorker.ready.then(registration => {
           registration.unregister().then(() => {
             window.location.reload();
-          });
+          }).catch(error => {
+            console.error('Error during service worker unregistration:', error);
+          }     );
+        }).catch(error => {
+          console.error('Error waiting for serviceWorker.ready:', error);
         });
       } else {
         // Service worker found. Proceed as normal.
@@ -130,6 +132,8 @@ export function unregister() {
   if ('serviceWorker' in navigator) {
     navigator.serviceWorker.ready.then(registration => {
       registration.unregister();
+    }).catch(error => {
+      console.error('Error during service worker unregistration:', error);
     });
   }
 }

Sample-01/src/views/ExternalApi.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { Button, Alert } from "reactstrap";
-import Highlight from "../components/Highlight";
+import ReactJson from "react-json-view";
 import { useAuth0, withAuthenticationRequired } from "@auth0/auth0-react";
 import { getConfig } from "../config";
 import Loading from "../components/Loading";
@@ -89,7 +89,7 @@ export const ExternalApiComponent = () => {
             You need to{" "}
             <a
               href="#/"
-              class="alert-link"
+              className="alert-link"
               onClick={(e) => handle(e, handleConsent)}
             >
               consent to get access to users api
@@ -102,7 +102,7 @@ export const ExternalApiComponent = () => {
             You need to{" "}
             <a
               href="#/"
-              class="alert-link"
+              className="alert-link"
               onClick={(e) => handle(e, handleLoginAgain)}
             >
               log in again
@@ -117,7 +117,7 @@ export const ExternalApiComponent = () => {
 
         <p>
           This will call a local API on port 3001 that would have been started
-          if you run <code>npm run dev</code>. An access token is sent as part
+          if you run <code>yarn run dev</code>. An access token is sent as part
           of the request's `Authorization` header and the API will validate it
           using the API's audience value.
         </p>
@@ -182,9 +182,17 @@ export const ExternalApiComponent = () => {
         {state.showResult && (
           <div className="result-block" data-testid="api-result">
             <h6 className="muted">Result</h6>
-            <Highlight>
+            {/* <Highlight>
               <span>{JSON.stringify(state.apiMessage, null, 2)}</span>
-            </Highlight>
+            </Highlight> */}
+            <ReactJson
+              src={state.apiMessage}
+              theme="monokai"
+              name={false}
+              displayObjectSize={false}
+              displayDataTypes={false}
+              style={{ fontSize: "1.1rem", lineHeight: 1.1 }}
+            />
           </div>
         )}
       </div>