Updating default audience config values and logic (#382)

* updating default audience value

* have to escape curly brackets in React JSX

Author: mchang16-auth

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"

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");
 

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;
 

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,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>YOUR_API_IDENTIFIER</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>