Added next auth middleware and got re-routing logic that I'm happy with

src/app/api/auth/[...nextauth]/route.ts

@@ -3,6 +3,11 @@ import GoogleProvider from "next-auth/providers/google";
 
 const { GOOGLE_CLIENT_ID = "", GOOGLE_CLIENT_SECRET = "" } = process.env;
 
+// TODO: handle token expiration
+// https://next-auth.js.org/v3/tutorials/refresh-token-rotation
+// propertly set options too
+// https://next-auth.js.org/configuration/options
+
 export const AuthOptions: NextAuthOptions = {
   providers: [
     GoogleProvider({

src/app/components/ProfileDropDown.tsx

@@ -3,15 +3,9 @@
 import { Menu } from "@headlessui/react";
 import { signOut, useSession } from "next-auth/react";
 import Link from "next/link";
-import { redirect } from "next/navigation";
 
 function ProfileDropDown() {
-  const { data: session, status } = useSession({
-    required: true,
-    onUnauthenticated() {
-      redirect("/?callbackUrl=/home");
-    },
-  });
+  const { data: session, status } = useSession();
 
   if (status !== "authenticated" || !session || !session.user) {
     return null;

src/app/home/page.tsx

@@ -4,11 +4,11 @@ import { redirect } from "next/navigation";
 import Nav from "../components/Navbar";
 
 const Home = async () => {
-  const session = await getServerSession(AuthOptions);
+  // const session = await getServerSession(AuthOptions);
 
-  if (!session) {
-    redirect("/?callbackUrl=/home");
-  }
+  // if (!session) {
+  //   redirect("/?callbackUrl=/home");
+  // }
 
   return (
     <>

src/app/page.tsx

@@ -1,6 +1,15 @@
+import { getServerSession } from "next-auth/next";
+import { AuthOptions } from "./api/auth/[...nextauth]/route";
 import GoogleSignInButton from "./components/signin/GoogleSignInButton";
+import { redirect } from "next/navigation";
+
+export default async function Home() {
+  const session = await getServerSession(AuthOptions);
+
+  if (session?.user) {
+    redirect("/home");
+  }
 
-export default function Home() {
   return (
     <section className="flex min-h-full overflow-hidden pt-16 sm:py-28">
       <div className="mx-auto flex w-full max-w-2xl flex-col px-4 sm:px-6">

src/middleware.ts

@@ -0,0 +1,3 @@
+export const config = { matcher: ["/home/:path*"] };
+
+export { default } from "next-auth/middleware";