From f59e66c4ee46a65c1ba84e8fdf70680a3c9ff6ca Mon Sep 17 00:00:00 2001
From: Michelle Chang <michelle.chang@okta.com>
Date: Wed, 26 Feb 2025 17:22:49 -0800
Subject: [PATCH 1/2] updating default audience value

---
 Sample-01/api-server.js                | 2 +-
 Sample-01/src/__tests__/config.test.js | 2 +-
 Sample-01/src/config.js                | 4 ++--
 Sample-01/src/views/ExternalApi.js     | 9 +++------
 4 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/Sample-01/api-server.js b/Sample-01/api-server.js
index 4e946daa..cae40636 100644
--- a/Sample-01/api-server.js
+++ b/Sample-01/api-server.js
@@ -14,7 +14,7 @@ const appOrigin = authConfig.appOrigin || `http://localhost:${appPort}`;
 if (
   !authConfig.domain ||
   !authConfig.audience ||
-  authConfig.audience === "YOUR_API_IDENTIFIER"
+  ["{yourApiIdentifier}", "{API_IDENTIFIER}"].includes(authConfig.audience)
 ) {
   console.log(
     "Exiting: Please make sure that auth_config.json is in place and populated with valid domain and audience values"
diff --git a/Sample-01/src/__tests__/config.test.js b/Sample-01/src/__tests__/config.test.js
index 7443565a..27490b2c 100644
--- a/Sample-01/src/__tests__/config.test.js
+++ b/Sample-01/src/__tests__/config.test.js
@@ -27,7 +27,7 @@ describe("The config module", () => {
   });
 
   it("should omit the audience if left at a default value", () => {
-    mockConfig({ audience: "YOUR_API_IDENTIFIER" });
+    mockConfig({ audience: "{yourApiIdentifier}" });
 
     const { getConfig } = require("../config");
 
diff --git a/Sample-01/src/config.js b/Sample-01/src/config.js
index d70d8a3d..658d605d 100644
--- a/Sample-01/src/config.js
+++ b/Sample-01/src/config.js
@@ -2,13 +2,13 @@ import configJson from "./auth_config.json";
 
 export function getConfig() {
   // Configure the audience here. By default, it will take whatever is in the config
-  // (specified by the `audience` key) unless it's the default value of "YOUR_API_IDENTIFIER" (which
+  // (specified by the `audience` key) unless it's the default value of "{yourApiIdentifier}" (which
   // is what you get sometimes by using the Auth0 sample download tool from the quickstart page, if you
   // don't have an API).
   // If this resolves to `null`, the API page changes to show some helpful info about what to do
   // with the audience.
   const audience =
-    configJson.audience && configJson.audience !== "YOUR_API_IDENTIFIER"
+    configJson.audience && configJson.audience !== "{yourApiIdentifier}"
       ? configJson.audience
       : null;
 
diff --git a/Sample-01/src/views/ExternalApi.js b/Sample-01/src/views/ExternalApi.js
index 4f3c1d51..5934b0c6 100644
--- a/Sample-01/src/views/ExternalApi.js
+++ b/Sample-01/src/views/ExternalApi.js
@@ -14,11 +14,8 @@ export const ExternalApiComponent = () => {
     error: null,
   });
 
-  const {
-    getAccessTokenSilently,
-    loginWithPopup,
-    getAccessTokenWithPopup,
-  } = useAuth0();
+  const { getAccessTokenSilently, loginWithPopup, getAccessTokenWithPopup } =
+    useAuth0();
 
   const handleConsent = async () => {
     try {
@@ -130,7 +127,7 @@ export const ExternalApiComponent = () => {
             <p>
               You can't call the API at the moment because your application does
               not have any configuration for <code>audience</code>, or it is
-              using the default value of <code>YOUR_API_IDENTIFIER</code>. You
+              using the default value of <code>{yourApiIdentifier}</code>. You
               might get this default value if you used the "Download Sample"
               feature of{" "}
               <a href="https://auth0.com/docs/quickstart/spa/react">

From ac07b827084481760b979d918faefd156d27a32e Mon Sep 17 00:00:00 2001
From: Michelle Chang <michelle.chang@okta.com>
Date: Wed, 26 Feb 2025 18:10:50 -0800
Subject: [PATCH 2/2] have to escape curly brackets in React JSX

---
 Sample-01/src/views/ExternalApi.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/Sample-01/src/views/ExternalApi.js b/Sample-01/src/views/ExternalApi.js
index 5934b0c6..e9dbba2b 100644
--- a/Sample-01/src/views/ExternalApi.js
+++ b/Sample-01/src/views/ExternalApi.js
@@ -127,9 +127,9 @@ export const ExternalApiComponent = () => {
             <p>
               You can't call the API at the moment because your application does
               not have any configuration for <code>audience</code>, or it is
-              using the default value of <code>{yourApiIdentifier}</code>. You
-              might get this default value if you used the "Download Sample"
-              feature of{" "}
+              using the default value of{" "}
+              <code>&#123;yourApiIdentifier&#125;</code>. You might get this
+              default value if you used the "Download Sample" feature of{" "}
               <a href="https://auth0.com/docs/quickstart/spa/react">
                 the quickstart guide
               </a>