diff --git a/01-Login/public/js/ui.js b/01-Login/public/js/ui.js index 5f79e98..6e383b2 100644 --- 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 index 57c485f..ea61662 100644 --- 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 index c3ce340..917005e 100644 --- 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" /> + + + + @@ -67,7 +71,6 @@
  • @@ -160,7 +161,7 @@
  • - Log out + Log out
    • @@ -312,9 +313,7 @@
    Result
    - - - + diff --git a/02-Calling-an-API/public/js/app.js b/02-Calling-an-API/public/js/app.js deleted file mode 100644 index ca8a1a0..0000000 --- a/02-Calling-an-API/public/js/app.js +++ /dev/null @@ -1,164 +0,0 @@ -// The Auth0 client, initialized in configureClient() -let auth0Client = null; - -/** - * 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); - } -}; - -/** - * Retrieves the auth configuration from the server - */ -const fetchAuthConfig = () => fetch("/auth_config.json"); - -/** - * Initializes the Auth0 client - */ -const configureClient = async () => { - const response = await fetchAuthConfig(); - const config = await response.json(); - - auth0Client = await auth0.createAuth0Client({ - domain: config.domain, - clientId: config.clientId, - authorizationParams: { - audience: config.audience - } - }); -}; - -/** - * 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); -}; - -/** - * Calls the API endpoint with an authorization token - */ -const callApi = async () => { - try { - const token = await auth0Client.getTokenSilently(); - - const response = await fetch("/api/external", { - headers: { - Authorization: `Bearer ${token}` - } - }); - - const responseData = await response.json(); - const responseElement = document.getElementById("api-call-result"); - - responseElement.innerText = JSON.stringify(responseData, {}, 2); - - document.querySelectorAll("pre code").forEach(hljs.highlightBlock); - - eachElement(".result-block", (c) => c.classList.add("show")); - } catch (e) { - console.error(e); - } -}; - -// Will run when page finishes loading -window.onload = async () => { - await configureClient(); - - // If unable to parse the history hash, default to the root URL - if (!showContentFromUrl(window.location.pathname)) { - showContentFromUrl("/"); - window.history.replaceState({ url: "/" }, {}, "/"); - } - - const bodyElement = document.getElementsByTagName("body")[0]; - - // Listen out for clicks on any hyperlink that navigates to a #/ URL - bodyElement.addEventListener("click", (e) => { - if (isRouteLink(e.target)) { - const url = e.target.getAttribute("href"); - - if (showContentFromUrl(url)) { - e.preventDefault(); - window.history.pushState({ url }, {}, url); - } - } else if (e.target.getAttribute("id") === "call-api") { - e.preventDefault(); - callApi(); - } - }); - - const isAuthenticated = await auth0Client.isAuthenticated(); - - if (isAuthenticated) { - console.log("> User is authenticated"); - window.history.replaceState({}, document.title, window.location.pathname); - updateUI(); - return; - } - - console.log("> User not authenticated"); - - const query = window.location.search; - const shouldParseResult = query.includes("code=") && query.includes("state="); - - if (shouldParseResult) { - console.log("> Parsing redirect"); - try { - const result = await auth0Client.handleRedirectCallback(); - - if (result.appState && result.appState.targetUrl) { - showContentFromUrl(result.appState.targetUrl); - } - - console.log("Logged in!"); - } catch (err) { - console.log("Error parsing redirect:", err); - } - - window.history.replaceState({}, document.title, "/"); - } - - updateUI(); -}; diff --git a/02-Calling-an-API/public/js/auth0-client.js b/02-Calling-an-API/public/js/auth0-client.js new file mode 100644 index 0000000..9420f45 --- /dev/null +++ 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 }; diff --git a/02-Calling-an-API/public/js/auth0-ui.js b/02-Calling-an-API/public/js/auth0-ui.js new file mode 100644 index 0000000..3f15c87 --- /dev/null +++ b/02-Calling-an-API/public/js/auth0-ui.js @@ -0,0 +1,92 @@ +import { auth0Client, requireAuth, login } from "./auth0-client.js"; +import { + showContentFromUrl, + updateUI, + isRouteLink, + eachElement, +} from "./ui.js"; + +/** + * Calls the API endpoint with an authorization token + */ +const callApi = async () => { + try { + const token = await auth0Client.getTokenSilently(); + + const response = await fetch("/api/external", { + headers: { + Authorization: `Bearer ${token}`, + }, + }); + + const responseData = await response.json(); + const responseElement = document.getElementById("api-call-result"); + + responseElement.innerText = JSON.stringify(responseData, {}, 2); + + document.querySelectorAll("pre code").forEach(hljs.highlightBlock); + + eachElement(".result-block", (c) => c.classList.add("show")); + } catch (e) { + console.error(e); + } +}; + +// Will run when page finishes loading because of defer +// If unable to parse the history hash, default to the root URL +if (!showContentFromUrl(window.location.pathname)) { + showContentFromUrl("/"); + window.history.replaceState({ url: "/" }, {}, "/"); +} + +const bodyElement = document.getElementsByTagName("body")[0]; + +// Listen out for clicks on any hyperlink that navigates to a #/ URL +bodyElement.addEventListener("click", (e) => { + if (isRouteLink(e.target)) { + const url = e.target.getAttribute("href"); + + if (showContentFromUrl(url)) { + e.preventDefault(); + window.history.pushState({ url }, {}, url); + } + } else if (e.target.getAttribute("id") === "call-api") { + e.preventDefault(); + callApi(); + } +}); + +const isAuthenticated = await auth0Client.isAuthenticated(); + +if (isAuthenticated) { + console.log("> User is authenticated"); + window.history.replaceState({}, document.title, window.location.pathname); + updateUI(); +} else { + console.log("> User not authenticated"); + + const query = window.location.search; + const shouldParseResult = query.includes("code=") && query.includes("state="); + + if (shouldParseResult) { + console.log("> Parsing redirect"); + try { + const result = await auth0Client.handleRedirectCallback(); + + if (result.appState && result.appState.targetUrl) { + showContentFromUrl(result.appState.targetUrl); + } + + console.log("Logged in!"); + } catch (err) { + console.log("Error parsing redirect:", err); + } + + window.history.replaceState({}, document.title, "/"); + } else { + // Treat all pages as protected and redirect to login when not yet authenticated + login(); + } + + updateUI(); +} diff --git a/02-Calling-an-API/public/js/ui.js b/02-Calling-an-API/public/js/ui.js index 024c3b2..6969b1a 100644 --- a/02-Calling-an-API/public/js/ui.js +++ b/02-Calling-an-API/public/js/ui.js @@ -1,3 +1,5 @@ +import { auth0Client, requireAuth, login, logout } from "./auth0-client.js"; + // URL mapping, from hash to a function that responds to that URL action const router = { "/": () => showContent("content-home"), @@ -6,7 +8,7 @@ const router = { requireAuth(() => showContent("content-profile"), "/profile"), "/external-api": () => requireAuth(() => showContent("content-external-api"), "/external-api"), - "/login": () => login() + "/login": () => login(), }; //Declare helper functions @@ -17,7 +19,7 @@ const router = { * @param {*} selector The CSS selector to find * @param {*} fn The function to execute for every element */ -const eachElement = (selector, fn) => { +export const eachElement = (selector, fn) => { for (let e of document.querySelectorAll(selector)) { fn(e); } @@ -29,7 +31,7 @@ const eachElement = (selector, fn) => { * router, defined above. * @param {*} url The route URL */ -const showContentFromUrl = (url) => { +export const showContentFromUrl = (url) => { if (router[url]) { router[url](); return true; @@ -42,7 +44,7 @@ const showContentFromUrl = (url) => { * Returns true if `element` is a hyperlink that can be considered a link to another SPA route * @param {*} element The element to check */ -const isRouteLink = (element) => +export const isRouteLink = (element) => element.tagName === "A" && element.classList.contains("route-link"); /** @@ -60,7 +62,7 @@ const showContent = (id) => { /** * Updates the user interface */ -const updateUI = async () => { +export const updateUI = async () => { try { const isAuthenticated = await auth0Client.isAuthenticated(); @@ -75,6 +77,9 @@ const updateUI = async () => { document.querySelectorAll("pre code").forEach(hljs.highlightBlock); + eachElement("#qsLoginBtn", (e) => e.addEventListener("click", login)); + eachElement("#qsLogoutBtn", (e) => e.addEventListener("click", logout)); + eachElement(".profile-image", (e) => (e.src = user.picture)); eachElement(".user-name", (e) => (e.innerText = user.name)); eachElement(".user-email", (e) => (e.innerText = user.email));