QQQ-27: checkpoint commit of initial version of Auth0 integration

src/qqq/auth0/code-snippet.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+interface CodeSnippetProps
+{
+   code: string;
+   title?: string;
+}
+
+// eslint-disable-next-line react/function-component-definition
+function CodeSnippet({title, code}: CodeSnippetProps): JSX.Element
+{
+   return (
+      <div className="code-snippet">
+         <span className="code-snippet__title">{title}</span>
+         <div className="code-snippet__container">
+            <div className="code-snippet__wrapper">
+               <pre className="code-snippet__body">{code}</pre>
+            </div>
+         </div>
+      </div>
+   );
+}
+
+CodeSnippet.defaultProps = {
+   title: undefined,
+};
+
+export default CodeSnippet;

src/qqq/auth0/loader.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+function Loader() : JSX.Element
+{
+   const loadingImg = "https://cdn.auth0.com/blog/hello-auth0/loader.svg";
+
+   return (
+      <div className="loader">
+         <img style={{height: "25px"}} src={loadingImg} alt="Loading..." />
+      </div>
+   );
+}
+
+export default Loader;

src/qqq/auth0/profile.tsx

@@ -0,0 +1,31 @@
+import {useAuth0} from "@auth0/auth0-react";
+import React from "react";
+import CodeSnippet from "./code-snippet";
+
+export function Profile()
+{
+   const {user} = useAuth0();
+
+   if (!user)
+   {
+      console.log("no user");
+      return null;
+   }
+
+   return (
+      <div className="content-layout">
+         <div className="content__body">
+            <div className="profile-grid">
+               <div className="profile__details">
+                  <CodeSnippet
+                     title="Decoded ID Token"
+                     code={JSON.stringify(user, null, 2)}
+                  />
+               </div>
+            </div>
+         </div>
+      </div>
+   );
+}
+
+export default Profile;

src/qqq/auth0/protected-route.tsx

@@ -0,0 +1,16 @@
+import {withAuthenticationRequired} from "@auth0/auth0-react";
+import React from "react";
+import Loader from "./loader";
+
+// @ts-ignore
+function ProtectedRoute({component}) : JSX.Element
+{
+   const Component = withAuthenticationRequired(component, {
+      // eslint-disable-next-line react/no-unstable-nested-components
+      onRedirecting: () => <Loader />,
+   });
+
+   return <Component />;
+}
+
+export default ProtectedRoute;