Update compatibility with 4.0 (#15)

* update ephemeral script to use the cli instead of the deprecated api key

* fix typo in readme link

* fixed typo in requirements file

* removed env dict

* fix leaderboard when less than 3 results on a quizz

* switch to auth token in workflow

---------

Co-authored-by: Harsh Mishra <[email protected]>

Author: cloutierMat

.github/workflows/ephemeral.yml

@@ -51,7 +51,7 @@ jobs:
           
           echo "NEW_URL=$NEW_URL" >> $GITHUB_ENV
         env:
-          LOCALSTACK_API_KEY: ${{ secrets.LOCALSTACK_API_KEY }}
+          LOCALSTACK_AUTH_TOKEN: ${{ secrets.LOCALSTACK_AUTH_TOKEN }}
 
       - name: Generate index.html with New Redirect URL
         run: |

README.md

@@ -137,7 +137,7 @@ For testing the app within the GitHub Actions workflow, you can refer to the pro
 
 ## IAM Policy Stream
 
-Visit the [IAM Policy Stream](https://app.localstack.cloud/policy-stream) to view the permissions required for each API call. This feature enables you to explore and progressively enhance security as your application develops.
+Visit the [IAM Policy Stream](https://app.localstack.cloud/inst/default/policy-stream) to view the permissions required for each API call. This feature enables you to explore and progressively enhance security as your application develops.
 
 To get started, restart the LocalStack container using the command `localstack restart` and load the Cloud Pod. Then, click on **Enable**.
 

bin/ephemeral.sh

@@ -1,32 +1,17 @@
 #!/bin/bash
 
-if [ -z "$LOCALSTACK_API_KEY" ]; then
-  echo "Error: LOCALSTACK_API_KEY environment variable is not set."
-  exit 1
-fi
-
 INSTANCE_NAME="instance-$(openssl rand -hex 4)"
 echo "Creating ephemeral instance with name: $INSTANCE_NAME"
 
-ENV_VARS_JSON=$(cat <<EOF
-{
-  "LAMBDA_KEEPALIVE_MS": "7200000",
-  "EXTENSION_AUTO_INSTALL": "localstack-extension-mailhog",
-  "DISABLE_CUSTOM_CORS_APIGATEWAY": "1",
-  "DISABLE_CUSTOM_CORS_S3": "1"
-}
-EOF
+CREATE_RESPONSE=$(localstack ephemeral create \
+  --name "$INSTANCE_NAME" \
+  --lifetime 120 \
+  --env LAMBDA_KEEPALIVE_MS=7200000 \
+  --env EXTENSION_AUTO_INSTALL=localstack-extension-mailhog \
+  --env DISABLE_CUSTOM_CORS_APIGATEWAY=1 \
+  --env DISABLE_CUSTOM_CORS_S3=1
 )
 
-CREATE_RESPONSE=$(curl -s -X POST https://api.localstack.cloud/v1/compute/instances \
-  -H "Content-Type: application/json" \
-  -H "ls-api-key: $LOCALSTACK_API_KEY" \
-  -d '{
-        "instance_name": "'"$INSTANCE_NAME"'",
-        "lifetime": 120,
-        "env_vars": '"$ENV_VARS_JSON"'
-      }')
-
 if echo "$CREATE_RESPONSE" | grep -q '"endpoint_url"'; then
   echo "Ephemeral instance created successfully."
 else

frontend/src/components/LeaderboardPage.js

@@ -105,15 +105,15 @@ function LeaderboardPage() {
                   marginRight: 'auto',
                 }}
               >
-                {leaderboardData[1].Username}
+                {leaderboardData[1]?.Username}
               </Typography>
               <div className="score">
                 <img
                   src={StarSharp}
                   alt="Score"
                   style={{ float: 'left', marginLeft: '10px' }}
                 />
-                {leaderboardData[1].Score}
+                {leaderboardData[1]?.Score}
               </div>
             </div>
             <div className="podium first-place">
@@ -126,15 +126,15 @@ function LeaderboardPage() {
                   marginRight: 'auto',
                 }}
               >
-                {leaderboardData[0].Username}
+                {leaderboardData[0]?.Username}
               </Typography>
               <div className="score">
                 <img
                   src={StarSharp}
                   alt="Score"
                   style={{ float: 'left', marginLeft: '10px' }}
                 />
-                {leaderboardData[0].Score}
+                {leaderboardData[0]?.Score}
               </div>
             </div>
             <div className="podium third-place">
@@ -147,15 +147,15 @@ function LeaderboardPage() {
                   marginRight: 'auto',
                 }}
               >
-                {leaderboardData[2].Username}
+                {leaderboardData[2]?.Username}
               </Typography>
               <div className="score">
                 <img
                   src={StarSharp}
                   alt="Score"
                   style={{ float: 'left', marginLeft: '10px' }}
                 />
-                {leaderboardData[2].Score}
+                {leaderboardData[2]?.Score}
               </div>
             </div>
           </div>