initial commit - code moved to separate repo

pages/examples/admin.tsx

@@ -0,0 +1,17 @@
+import Layout from "../../components/layout"
+
+export default function Page() {
+  return (
+    <Layout>
+      <h1>This page is protected by Middleware</h1>
+      <p>Only admin users can see this page.</p>
+      <p>
+        To learn more about the NextAuth middleware see&nbsp;
+        <a href="https://docs-git-misc-docs-nextauthjs.vercel.app/configuration/nextjs#middleware">
+          the docs
+        </a>
+        .
+      </p>
+    </Layout>
+  )
+}

pages/examples/api-example.tsx

@@ -0,0 +1,19 @@
+import Layout from "../../components/layout"
+
+export default function ApiExamplePage() {
+  return (
+    <Layout>
+      <h1>API Example</h1>
+      <p>The examples below show responses from the example API endpoints.</p>
+      <p>
+        <em>You must be signed in to see responses.</em>
+      </p>
+      <h2>Session</h2>
+      <p>/api/examples/session</p>
+      <iframe src="/api/examples/session" />
+      <h2>JSON Web Token</h2>
+      <p>/api/examples/jwt</p>
+      <iframe src="/api/examples/jwt" />
+    </Layout>
+  )
+}

pages/examples/client.tsx

@@ -0,0 +1,27 @@
+import Layout from "../../components/layout"
+
+export default function ClientPage() {
+  return (
+    <Layout>
+      <h1>Client Side Rendering</h1>
+      <p>
+        This page uses the <strong>useSession()</strong> React Hook in the{" "}
+        <strong>&lt;Header/&gt;</strong> component.
+      </p>
+      <p>
+        The <strong>useSession()</strong> React Hook is easy to use and allows
+        pages to render very quickly.
+      </p>
+      <p>
+        The advantage of this approach is that session state is shared between
+        pages by using the <strong>Provider</strong> in <strong>_app.js</strong>{" "}
+        so that navigation between pages using <strong>useSession()</strong> is
+        very fast.
+      </p>
+      <p>
+        The disadvantage of <strong>useSession()</strong> is that it requires
+        client side JavaScript.
+      </p>
+    </Layout>
+  )
+}

pages/examples/policy.tsx

@@ -0,0 +1,32 @@
+import Layout from "../../components/layout"
+
+export default function PolicyPage() {
+  return (
+    <Layout>
+      <p>
+        This is an example site to demonstrate how to use{" "}
+        <a href="https://next-auth.js.org">NextAuth.js</a> for authentication.
+      </p>
+      <h2>Terms of Service</h2>
+      <p>
+        THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+        OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+        MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+        IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+        CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+        TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+        SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+      </p>
+      <h2>Privacy Policy</h2>
+      <p>
+        This site uses JSON Web Tokens and an in-memory database which resets
+        every ~2 hours.
+      </p>
+      <p>
+        Data provided to this site is exclusively used to support signing in and
+        is not passed to any third party services, other than via SMTP or OAuth
+        for the purposes of authentication.
+      </p>
+    </Layout>
+  )
+}

pages/examples/protected.tsx

@@ -0,0 +1,41 @@
+import { useSession } from "next-auth/react"
+import { useEffect, useState } from "react"
+import AccessDenied from "../../components/access-denied"
+import Layout from "../../components/layout"
+
+export default function ProtectedPage() {
+  const { data: session } = useSession()
+  const [content, setContent] = useState()
+
+  // Fetch content from protected route
+  useEffect(() => {
+    const fetchData = async () => {
+      const res = await fetch("/api/examples/protected")
+      const json = await res.json()
+      if (json.content) {
+        setContent(json.content)
+      }
+    }
+    fetchData()
+  }, [session])
+
+
+  // If no session exists, display access denied message
+  if (!session) {
+    return (
+      <Layout>
+        <AccessDenied />
+      </Layout>
+    )
+  }
+
+  // If session exists, display content
+  return (
+    <Layout>
+      <h1>Protected Page</h1>
+      <p>
+        <strong>{content ?? "\u00a0"}</strong>
+      </p>
+    </Layout>
+  )
+}

pages/examples/server.tsx

@@ -0,0 +1,47 @@
+import { getServerSession } from "next-auth/next"
+import { authOptions } from "../api/auth/[...nextauth]"
+import Layout from "../../components/layout"
+
+import type { GetServerSidePropsContext } from "next"
+import type { Session } from "next-auth"
+
+export default function ServerSidePage({ session }: { session: Session }) {
+  // As this page uses Server Side Rendering, the `session` will be already
+  // populated on render without needing to go through a loading stage.
+  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 the recommended approach if you
+        need to support Server Side Rendering with authentication.
+      </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>
+      <pre>SESSION: {JSON.stringify(session, null, 2)}</pre>
+    </Layout>
+  )
+}
+
+// Export the `session` prop to use sessions with Server Side Rendering
+export async function getServerSideProps(context: GetServerSidePropsContext) {
+  return {
+    props: {
+      session: await getServerSession(
+        context.req,
+        context.res,
+        authOptions
+      ),
+    },
+  }
+}