Auth0 working!

2022-05-11 09:23:32 -05:00
parent 002c6a2f3d
commit 4c37658cd8
14 changed files with 782 additions and 74 deletions
--- a/web/components/header.js
+++ b/web/components/header.js
@@ -0,0 +1,81 @@
+import Link from "next/link";
+
+function Header({ user, loading }) {
+  return (
+    <header>
+      <nav>
+        <ul>
+          <li>
+            <Link href="/">
+              <a>Home</a>
+            </Link>
+          </li>
+          <li>
+            <Link href="/about">
+              <a>About</a>
+            </Link>
+          </li>
+          {!loading &&
+            (user ? (
+              <>
+                <li>
+                  <Link href="/profile">
+                    <a>Client-rendered profile</a>
+                  </Link>
+                </li>
+                <li>
+                  <Link href="/advanced/ssr-profile">
+                    <a>Server rendered profile (advanced)</a>
+                  </Link>
+                </li>
+                <li>
+                  <a href="/api/logout">Logout</a>
+                </li>
+              </>
+            ) : (
+              <li>
+                <a href="/api/login">Login</a>
+              </li>
+            ))}
+        </ul>
+      </nav>
+
+      <style jsx>{`
+        header {
+          padding: 0.2rem;
+          color: #fff;
+          background-color: #333;
+        }
+        nav {
+          max-width: 42rem;
+          margin: 1.5rem auto;
+        }
+        ul {
+          display: flex;
+          list-style: none;
+          margin-left: 0;
+          padding-left: 0;
+        }
+        li {
+          margin-right: 1rem;
+        }
+        li:nth-child(2) {
+          margin-right: auto;
+        }
+        a {
+          color: #fff;
+          text-decoration: none;
+        }
+        button {
+          font-size: 1rem;
+          color: #fff;
+          cursor: pointer;
+          border: none;
+          background: none;
+        }
+      `}</style>
+    </header>
+  );
+}
+
+export default Header;
--- a/web/components/layout.js
+++ b/web/components/layout.js
@@ -0,0 +1,35 @@
+import Head from "next/head";
+import Header from "./header";
+
+function Layout({ user, loading = false, children }) {
+  return (
+    <>
+      <Head>
+        <title>Next.js with Auth0</title>
+      </Head>
+
+      <Header user={user} loading={loading} />
+
+      <main>
+        <div className="container">{children}</div>
+      </main>
+
+      <style jsx>{`
+        .container {
+          max-width: 42rem;
+          margin: 1.5rem auto;
+        }
+      `}</style>
+      <style jsx global>{`
+        body {
+          margin: 0;
+          color: #333;
+          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+            Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+        }
+      `}</style>
+    </>
+  );
+}
+
+export default Layout;