feat: migrate to v4

components/access-denied.js

@@ -1,4 +1,4 @@
-import { signIn } from 'next-auth/client'
+import { signIn } from 'next-auth/react'
 
 export default function AccessDenied () {
   return (

components/header.js

@@ -1,23 +1,31 @@
-import Link from 'next/link'
-import { signIn, signOut, useSession } from 'next-auth/client'
-import styles from './header.module.css'
+import Link from "next/link"
+import { signIn, signOut, useSession } from "next-auth/react"
+import styles from "./header.module.css"
 
 // 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 function Header () {
-  const [ session, loading ] = useSession()
-
+export default function Header() {
+  const { data: session, status } = useSession()
+  const loading = status === "loading"
+
   return (
     <header>
       <noscript>
         <style>{`.nojs-show { opacity: 1; top: 0; }`}</style>
       </noscript>
       <div className={styles.signedInStatus}>
-        <p className={`nojs-show ${(!session && loading) ? styles.loading : styles.loaded}`}>
-          {!session && <>
-            <span className={styles.notSignedInText}>You are not signed in</span>
-            <a
+        <p
+          className={`nojs-show ${
+            !session && loading ? styles.loading : styles.loaded
+          }`}
+        >
+          {!session && (
+            <>
+              <span className={styles.notSignedInText}>
+                You are not signed in
+              </span>
+              <a
                 href={`/api/auth/signin`}
                 className={styles.buttonPrimary}
                 onClick={(e) => {
@@ -27,14 +35,22 @@ export default function Header () {
               >
                 Sign in
               </a>
-          </>}
-          {session && <>
-            {session.user.image && <span style={{backgroundImage: `url(${session.user.image})` }} className={styles.avatar}/>}
-            <span className={styles.signedInText}>
-              <small>Signed in as</small><br/>
-              <strong>{session.user.email || session.user.name}</strong>
+            </>
+          )}
+          {session && (
+            <>
+              {session.user.image && (
+                <span
+                  style={{ backgroundImage: `url('${session.user.image}')` }}
+                  className={styles.avatar}
+                />
+              )}
+              <span className={styles.signedInText}>
+                <small>Signed in as</small>
+                <br />
+                <strong>{session.user.email || session.user.name}</strong>
               </span>
-            <a
+              <a
                 href={`/api/auth/signout`}
                 className={styles.button}
                 onClick={(e) => {
@@ -44,16 +60,42 @@ export default function Header () {
               >
                 Sign out
               </a>
-          </>}
+            </>
+          )}
         </p>
       </div>
       <nav>
         <ul className={styles.navItems}>
-          <li className={styles.navItem}><Link href="/"><a>Home</a></Link></li>
-          <li className={styles.navItem}><Link href="/client"><a>Client</a></Link></li>
-          <li className={styles.navItem}><Link href="/server"><a>Server</a></Link></li>
-          <li className={styles.navItem}><Link href="/protected"><a>Protected</a></Link></li>
-          <li className={styles.navItem}><Link href="/api-example"><a>API</a></Link></li>
+          <li className={styles.navItem}>
+            <Link href="/">
+              <a>Home</a>
+            </Link>
+          </li>
+          <li className={styles.navItem}>
+            <Link href="/client">
+              <a>Client</a>
+            </Link>
+          </li>
+          <li className={styles.navItem}>
+            <Link href="/server">
+              <a>Server</a>
+            </Link>
+          </li>
+          <li className={styles.navItem}>
+            <Link href="/protected">
+              <a>Protected</a>
+            </Link>
+          </li>
+          <li className={styles.navItem}>
+            <Link href="/api-example">
+              <a>API</a>
+            </Link>
+          </li>
+          <li className={styles.navItem}>
+            <Link href="/middleware-protected">
+              <a>Middleware protected</a>
+            </Link>
+          </li>
         </ul>
       </nav>
     </header>