auth0-samples · bbrandt · May 31, 2023 · Jun 1, 2023 · Jun 1, 2023 · Jun 1, 2023
diff --git a/01-Login/public/js/ui.js b/01-Login/public/js/ui.js
@@ -1,8 +1,7 @@
 // URL mapping, from hash to a function that responds to that URL action
 const router = {
   "/": () => showContent("content-home"),
-  "/profile": () =>
-    requireAuth(() => showContent("content-profile"), "/profile"),
+  "/profile": () => requireAuth(() => showContent("content-profile"), "/profile"),
   "/login": () => login()
 };
 

diff --git a/02-Calling-an-API/.prettierrc.yaml b/02-Calling-an-API/.prettierrc.yaml
@@ -1,2 +1,4 @@
 semi: true
 arrowParens: always
+tabWidth: 2
+
diff --git a/02-Calling-an-API/index.html b/02-Calling-an-API/index.html
@@ -29,6 +29,10 @@
       rel="stylesheet"
       href="https://cdn.auth0.com/js/auth0-samples-theme/1.0/css/auth0-theme.min.css"
     />
+    <script src="https://cdn.auth0.com/js/auth0-spa-js/2.0/auth0-spa-js.production.js"></script>
+    <!-- <script src="js/auth0-vanilla.js"></script> -->
+    <script type="module" src="js/auth0-client.js"></script>
+    <script defer type="module" src="js/auth0-ui.js"></script>
   </head>
 
   <body class="h-100">
@@ -67,7 +71,6 @@
                 <li class="nav-item auth-invisible">
                   <button
                     id="qsLoginBtn"
-                    onclick="login()"
                     class="btn btn-primary btn-margin auth-invisible hidden"
                   >
                     Log in
@@ -103,7 +106,6 @@
                       href="#"
                       class="dropdown-item"
                       id="qsLogoutBtn"
-                      onclick="logout()"
                     >
                       <i class="fas fa-power-off mr-3"></i> Log out
                     </a>
@@ -117,7 +119,6 @@
                 <button
                   class="btn btn-primary btn-block auth-invisible hidden"
                   id="qsLoginBtn"
-                  onclick="login()"
                 >
                   Log in
                 </button>
@@ -160,7 +161,7 @@ <h6 class="d-inline-block nav-user-name user-name"></h6>
 
                 <li>
                   <i class="fas fa-power-off mr-3"></i>
-                  <a href="#" id="qsLogoutBtn" onclick="logout()">Log out</a>
+                  <a href="#" id="qsLogoutBtn">Log out</a>
                 </li>
               </ul>
             </div>
@@ -312,9 +313,7 @@ <h6 class="muted">Result</h6>
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
-    <script src="https://cdn.auth0.com/js/auth0-spa-js/2.0/auth0-spa-js.production.js"></script>
     <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
-    <script src="js/ui.js"></script>
-    <script src="js/app.js"></script>
+    <script defer type="module" src="js/ui.js"></script>
   </body>
 </html>
diff --git a/02-Calling-an-API/public/js/app.js b/02-Calling-an-API/public/js/app.js
diff --git a/02-Calling-an-API/public/js/auth0-client.js b/02-Calling-an-API/public/js/auth0-client.js
@@ -0,0 +1,82 @@
+//import { createAuth0Client } from "@auth0/auth0-spa-js";
+// Normally this would be the import statement above.
+// For this example we do not have client dependencies installed via npm.
+const createAuth0Client = globalThis.auth0.createAuth0Client;
+
+const fetchAuthConfig = () => fetch("/auth_config.json");
+
+/**
+ * Called once to create a single instance of the Auth0 SDK client
+ * @returns Auth0Client
+ */
+async function createClient() {
+  const response = await fetchAuthConfig();
+  const config = await response.json();
+  return await createAuth0Client({
+    domain: config.domain,
+    clientId: config.clientId,
+    cacheLocation: config.cacheLocation,
+    useRefreshTokens: true,
+    authorizationParams: {
+      audience: config.audience,
+    },
+  });
+}
+
+/**
+ * Starts the authentication flow
+ */
+const login = async (targetUrl) => {
+  try {
+    console.log("Logging in", targetUrl);
+
+    const options = {
+      authorizationParams: {
+        redirect_uri: window.location.origin,
+      },
+    };
+
+    if (targetUrl) {
+      options.appState = { targetUrl };
+    }
+
+    await auth0Client.loginWithRedirect(options);
+  } catch (err) {
+    console.log("Log in failed", err);
+  }
+};
+
+/**
+ * Executes the logout flow
+ */
+const logout = async () => {
+  try {
+    console.log("Logging out");
+    await auth0Client.logout({
+      logoutParams: {
+        returnTo: window.location.origin,
+      },
+    });
+  } catch (err) {
+    console.log("Log out failed", err);
+  }
+};
+
+/**
+ * Checks to see if the user is authenticated. If so, `fn` is executed. Otherwise, the user
+ * is prompted to log in
+ * @param {*} fn The function to execute if the user is logged in
+ */
+const requireAuth = async (fn, targetUrl) => {
+  const isAuthenticated = await auth0Client.isAuthenticated();
+
+  if (isAuthenticated) {
+    return fn();
+  }
+
+  return login(targetUrl);
+};
+
+const auth0Client = await createClient();
+
+export { auth0Client, login, logout, requireAuth };