[Website] Add Auth0 when ready (#440)

* Add auth0

* Style tweaks in line with wp

website/components/auth-gate/auth-gate.module.css

@@ -7,7 +7,18 @@
 }
 
 .loadingIconSpin {
-  transform: translateY(-100px);
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  animation: spin 0.5s linear infinite;
+}
+
+@keyframes spin {
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
 .loginLockup {

website/components/auth-indicator/auth-indicator.module.css

@@ -3,7 +3,7 @@
   bottom: 0;
   width: 100vw;
   z-index: 3;
-  padding: 1rem;
+  padding: 1rem 2rem;
   text-align: center;
   background: var(--black);
   color: var(--white);
@@ -16,10 +16,9 @@
   }
 }
 
-.loadingIconSpin {
-  transform: translateY(-100px);
-}
-
 .loggedInText {
-  margin: 0 1rem;
+  margin: 1rem 1rem;
+  @media (--medium-up) {
+    margin: 0 1rem;
+  }
 }

website/components/auth-indicator/index.jsx

@@ -1,13 +1,10 @@
 import { signOut, useSession } from 'next-auth/client'
-import LoadingIcon from './loading.svg?include'
-import InlineSvg from '@hashicorp/react-inline-svg'
 import styles from './auth-indicator.module.css'
 import Button from '@hashicorp/react-button'
 
 export default function AuthIndicator() {
   const [session, loading] = useSession()
-  if (loading)
-    return <InlineSvg className={styles.loadingIconSpin} src={LoadingIcon} />
+  if (loading) return `Loading...`
   return (
     <div className={styles.authIndicator}>
       {session && (

website/pages/api/auth/[...nextauth].js

@@ -5,7 +5,7 @@ export default (req, res) =>
     req,
     res
   )({
-    environments: { production: ['Okta'], preview: ['Okta', 'Auth0'] },
+    environments: { production: ['Okta', 'Auth0'], preview: ['Okta', 'Auth0'] },
     pages: {
       error: '/signin-error', // Error code passed in query string as ?error=
     },