upgrade dev app

apps/dev/nextjs/app/dashboard/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <h1>This page is protected.</h1>
+}

apps/dev/nextjs/app/footer.module.css

@@ -0,0 +1,14 @@
+.footer {
+  margin-top: 2rem;
+}
+
+.navItems {
+  margin-bottom: 1rem;
+  padding: 0;
+  list-style: none;
+}
+
+.navItem {
+  display: inline-block;
+  margin-right: 1rem;
+}

apps/dev/nextjs/app/footer.tsx

@@ -0,0 +1,28 @@
+import Link from "next/link"
+import styles from "./footer.module.css"
+import packageJSON from "@auth/nextjs/package.json"
+
+export default function Footer() {
+  return (
+    <footer className={styles.footer}>
+      <hr />
+      <ul className={styles.navItems}>
+        <li className={styles.navItem}>
+          <a href="https://authjs.dev">Documentation</a>
+        </li>
+        <li className={styles.navItem}>
+          <a href="https://www.npmjs.com/package/@auth/core">NPM</a>
+        </li>
+        <li className={styles.navItem}>
+          <a href="https://github.com/nextauthjs/next-auth-example">GitHub</a>
+        </li>
+        <li className={styles.navItem}>
+          <Link href="/policy">Policy</Link>
+        </li>
+        <li className={styles.navItem}>
+          <em>{packageJSON.version}</em>
+        </li>
+      </ul>
+    </footer>
+  )
+}

apps/dev/nextjs/app/header.module.css

@@ -0,0 +1,90 @@
+/* Set min-height to avoid page reflow while session loading */
+.signedInStatus {
+  display: flex;
+  align-items: center;
+  min-height: 4rem;
+  width: 100%;
+}
+
+.loading,
+.loaded {
+  position: relative;
+  top: 0;
+  opacity: 1;
+  overflow: hidden;
+  border-radius: 0 0 0.6rem 0.6rem;
+  padding: 0.6rem 1rem;
+  margin: 0;
+  background-color: rgba(0, 0, 0, 0.05);
+  transition: all 0.2s ease-in;
+}
+
+.loading {
+  top: -2rem;
+  opacity: 0;
+}
+
+.signedInText,
+.notSignedInText {
+  padding-top: 0.8rem;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  z-index: 1;
+  line-height: 1.3rem;
+  flex: 1;
+}
+
+.signedInText {
+  padding-top: 0rem;
+  left: 4.6rem;
+}
+
+.avatar {
+  border-radius: 2rem;
+  float: left;
+  height: 2.8rem;
+  width: 2.8rem;
+  margin-right: 1rem;
+  background-color: white;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
+.button,
+.buttonPrimary {
+  justify-self: end;
+  font-weight: 500;
+  border-radius: 0.3rem;
+  cursor: pointer;
+  font-size: 1rem;
+  line-height: 1.4rem;
+  padding: 0.7rem 0.8rem;
+  position: relative;
+  z-index: 10;
+  background-color: transparent;
+  color: #555;
+}
+
+.buttonPrimary {
+  background-color: #346df1;
+  border-color: #346df1;
+  color: #fff;
+  text-decoration: none;
+  padding: 0.7rem 1.4rem;
+}
+
+.buttonPrimary:hover {
+  box-shadow: inset 0 0 5rem rgba(0, 0, 0, 0.2);
+}
+
+.navItems {
+  margin-bottom: 2rem;
+  padding: 0;
+  list-style: none;
+}
+
+.navItem {
+  display: inline-block;
+  margin-right: 1rem;
+}

apps/dev/nextjs/app/header.tsx

@@ -0,0 +1,75 @@
+import { auth } from "auth"
+import { cookies, headers } from "next/headers"
+import Link from "next/link"
+import styles from "./header.module.css"
+
+function SignIn({ id, ...props }: any) {
+  const $cookies = cookies()
+  const csrfToken = $cookies.get("next-auth.csrf-token")?.value.split("|")[0]
+  const action = id ? `/api/auth/signin/${id}` : "/api/auth/signin"
+  return (
+    <form action={action} method="post">
+      <button {...props} />
+      <input type="hidden" name="csrfToken" value={csrfToken} />
+    </form>
+  )
+}
+
+function SignOut(props: any) {
+  const $cookies = cookies()
+  const csrfToken = $cookies.get("next-auth.csrf-token")?.value.split("|")[0]
+  return (
+    <form action="/api/auth/signout" method="post">
+      <button {...props} />
+      <input type="hidden" name="csrfToken" value={csrfToken} />
+    </form>
+  )
+}
+
+// The approach used in this component shows how to built a sign in and sign out
+// component that works on pages which support both client and server side
+// rendering, and avoids any flash incorrect content on initial page load.
+export default async function Header() {
+  const session = await auth(headers())
+  return (
+    <header>
+      <div className={styles.signedInStatus}>
+        {!session && (
+          <>
+            <span className={styles.notSignedInText}>
+              You are not signed in
+            </span>
+            <SignIn className={styles.buttonPrimary}>Sign in</SignIn>
+          </>
+        )}
+        {session && (
+          <>
+            {session.token.picture && (
+              <img src={session.token.picture} className={styles.avatar} />
+            )}
+            <span className={styles.signedInText}>
+              <small>Signed in as</small>
+              <br />
+              <strong>{session.token.email} </strong>
+              {session.token.name ? `(${session.token.name})` : null}
+            </span>
+            <SignOut className={styles.button}>Sign out</SignOut>
+          </>
+        )}
+      </div>
+      <nav>
+        <ul className={styles.navItems}>
+          <li className={styles.navItem}>
+            <Link href="/">Home</Link>
+          </li>
+          <li className={styles.navItem}>
+            <Link href="/dashboard">Dashboard (app)</Link>
+          </li>
+          <li className={styles.navItem}>
+            <Link href="/policy">Policy (pages)</Link>
+          </li>
+        </ul>
+      </nav>
+    </header>
+  )
+}

apps/dev/nextjs/app/layout.tsx

@@ -1,12 +1,16 @@
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
+import Header from "./header"
+import Footer from "./footer"
+import "./styles.css"
+
+export default function RootLayout(props: { children: React.ReactNode }) {
   return (
     <html>
       <head></head>
-      <body>{children}</body>
+      <body>
+        <Header />
+        <main>{props.children}</main>
+        <Footer />
+      </body>
     </html>
   )
 }

apps/dev/nextjs/app/loading.tsx

@@ -0,0 +1,7 @@
+export default function Loading() {
+  return (
+    <>
+      <h1>Loading...</h1>
+    </>
+  )
+}

apps/dev/nextjs/app/page.tsx

@@ -1,13 +1,11 @@
-import Layout from "components/layout"
-
 export default function Page() {
   return (
-    <Layout>
+    <>
       <h1>NextAuth.js Example</h1>
       <p>
         This is an example site to demonstrate how to use{" "}
-        <a href="https://authjs.dev">NextAuth.js</a> for authentication.
+        <a href="https://nextjs.authjs.dev">NextAuth.js</a> for authentication.
       </p>
-    </Layout>
+    </>
   )
 }

apps/dev/nextjs/app/server-component/page.tsx

@@ -1,37 +0,0 @@
-import { auth } from "auth"
-import { cookies, headers } from "next/headers"
-
-function SignIn({ id, children }: any) {
-  const $cookies = cookies()
-  const csrfToken = $cookies.get("next-auth.csrf-token")?.value.split("|")[0]
-  return (
-    <form action={`/api/auth/signin/${id}`} method="post">
-      <button type="submit">{children}</button>
-      <input type="hidden" name="csrfToken" value={csrfToken} />
-    </form>
-  )
-}
-
-function SignOut({ children }: any) {
-  const $cookies = cookies()
-  const csrfToken = $cookies.get("next-auth.csrf-token")?.value.split("|")[0]
-  return (
-    <form action="/api/auth/signout" method="post">
-      <button type="submit">{children}</button>
-      <input type="hidden" name="csrfToken" value={csrfToken} />
-    </form>
-  )
-}
-
-export default async function Page() {
-  const session = await auth(headers())
-  if (session) {
-    return (
-      <>
-        <pre>{JSON.stringify(session, null, 2)}</pre>
-        <SignOut>Sign out</SignOut>
-      </>
-    )
-  }
-  return <SignIn id="github">Sign in with github</SignIn>
-}

apps/dev/nextjs/app/styles.css

@@ -0,0 +1,32 @@
+body {
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  padding: 0 1rem 1rem 1rem;
+  max-width: 680px;
+  margin: 0 auto;
+  background: #fff;
+  color: var(--color-text);
+}
+
+li,
+p {
+  line-height: 1.5rem;
+}
+
+a {
+  font-weight: 500;
+}
+
+hr {
+  border: 1px solid #ddd;
+}
+
+iframe {
+  background: #ccc;
+  border: 1px solid #ccc;
+  height: 10rem;
+  width: 100%;
+  border-radius: 0.5rem;
+  filter: invert(1);
+}

apps/dev/nextjs/auth.ts

@@ -10,17 +10,10 @@ export const { handlers, auth } = NextAuth({
   providers: [GitHub, Auth0, Facebook, Google, Twitter],
   callbacks: {
     async authorized({ request, auth }) {
-      // if (request.method === "POST") {
-      // const [, token] = request.headers.get("Authorization")?.split(" ")
-      // const valid = validateToken(token)
-      // // If the request has a valid auth token, it is authorized
-      // if (valid) return true
-      // return NextResponse.json("Invalid auth token", { status: 401 })
-      // }
-
-      // Logged in users are authorized, otherwise, will redirect to login
-      // You could also return a custom redirect instead of the sign-in page
-      return !!auth
+      if (request.nextUrl.pathname === "/dashboard") {
+        return !!auth.token
+      }
+      return true
     },
   },
 })

apps/dev/nextjs/middleware.ts

@@ -1,10 +1 @@
-// export { auth as default } from "auth"
-import { auth } from "auth"
-import { NextResponse } from "next/server"
-
-export default auth((req) => {
-  if (req.auth) return NextResponse.json(req.auth)
-  return NextResponse.json("Not authorized", { status: 401 })
-})
-
-export const config = { matcher: ["/middleware-protected"] }
+export { auth as default } from "auth"

apps/dev/nextjs/pages/middleware-protected/index.js

@@ -1,9 +0,0 @@
-import Layout from "components/layout"
-
-export default function Page() {
-  return (
-    <Layout>
-      <h1>Page protected by Middleware</h1>
-    </Layout>
-  )
-}

apps/dev/nextjs/pages/server.js

@@ -1,46 +0,0 @@
-import { getServerSession } from "next-auth/next"
-import Layout from "../components/layout"
-import { authConfig } from "./api/auth-old/[...nextauth]"
-
-export default function Page() {
-  // As this page uses Server Side Rendering, the `session` will be already
-  // populated on render without needing to go through a loading stage.
-  // This is possible because of the shared context configured in `_app.js` that
-  // is used by `useSession()`.
-
-  return (
-    <Layout>
-      <h1>Server Side Rendering</h1>
-      <p>
-        This page uses the <strong>getServerSession()</strong> method in{" "}
-        <strong>getServerSideProps()</strong>.
-      </p>
-      <p>
-        Using <strong>getServerSession()</strong> in{" "}
-        <strong>getServerSideProps()</strong> is currently the recommended
-        approach, although the API may still change, if you need to support
-        Server Side Rendering with authentication.
-      </p>
-      <p>
-        Using <strong>getSession()</strong> is still recommended on the client.
-      </p>
-      <p>
-        The advantage of Server Side Rendering is this page does not require
-        client side JavaScript.
-      </p>
-      <p>
-        The disadvantage of Server Side Rendering is that this page is slower to
-        render.
-      </p>
-    </Layout>
-  )
-}
-
-// Export the `session` prop to use sessions with Server Side Rendering
-export async function getServerSideProps(context) {
-  return {
-    props: {
-      session: await getServerSession(context.req, context.res, authConfig),
-    },
-  }
-}