rework middleware logic

Author: jeremyphilemon

app/(auth)/auth.config.ts

@@ -1,4 +1,3 @@
-import { anonymousRegex } from '@/lib/constants';
 import type { NextAuthConfig } from 'next-auth';
 
 export const authConfig = {
@@ -10,29 +9,5 @@ export const authConfig = {
     // added later in auth.ts since it requires bcrypt which is only compatible with Node.js
     // while this file is also used in non-Node.js environments
   ],
-  callbacks: {
-    authorized({ auth, request: { nextUrl } }) {
-      const isLoggedIn = !!auth?.user;
-      const isAnonymousUser = anonymousRegex.test(auth?.user?.email ?? '');
-
-      const isOnLoginPage = nextUrl.pathname.startsWith('/login');
-      const isOnRegisterPage = nextUrl.pathname.startsWith('/register');
-
-      // If logged in, redirect to home page
-      if (
-        isLoggedIn &&
-        !isAnonymousUser &&
-        (isOnLoginPage || isOnRegisterPage)
-      ) {
-        return Response.redirect(new URL('/', nextUrl as unknown as URL));
-      }
-
-      // Always allow access to register and login pages
-      if (isOnRegisterPage || isOnLoginPage) {
-        return true;
-      }
-
-      return true;
-    },
-  },
+  callbacks: {},
 } satisfies NextAuthConfig;

app/(auth)/auth.ts

@@ -29,6 +29,7 @@ export const {
         const passwordsMatch = await compare(password, user.password);
 
         if (!passwordsMatch) return null;
+
         return user;
       },
     }),

app/(auth)/login/page.tsx

@@ -9,6 +9,7 @@ import { AuthForm } from '@/components/auth-form';
 import { SubmitButton } from '@/components/submit-button';
 
 import { login, type LoginActionState } from '../actions';
+import { useSession } from 'next-auth/react';
 
 export default function Page() {
   const router = useRouter();
@@ -23,6 +24,8 @@ export default function Page() {
     },
   );
 
+  const { update: updateSession } = useSession();
+
   useEffect(() => {
     if (state.status === 'failed') {
       toast({
@@ -36,6 +39,7 @@ export default function Page() {
       });
     } else if (state.status === 'success') {
       setIsSuccessful(true);
+      updateSession();
       router.refresh();
     }
   }, [state.status]);

app/(auth)/register/page.tsx

@@ -9,6 +9,7 @@ import { SubmitButton } from '@/components/submit-button';
 
 import { register, type RegisterActionState } from '../actions';
 import { toast } from '@/components/toast';
+import { useSession } from 'next-auth/react';
 
 export default function Page() {
   const router = useRouter();
@@ -23,6 +24,8 @@ export default function Page() {
     },
   );
 
+  const { update: updateSession } = useSession();
+
   useEffect(() => {
     if (state.status === 'user_exists') {
       toast({ type: 'error', description: 'Account already exists!' });
@@ -37,6 +40,7 @@ export default function Page() {
       toast({ type: 'success', description: 'Account created successfully!' });
 
       setIsSuccessful(true);
+      updateSession();
       router.refresh();
     }
   }, [state]);

components/sidebar-user-nav.tsx

@@ -43,7 +43,7 @@ export function SidebarUserNav({ user }: { user: User }) {
                     Loading auth status
                   </span>
                 </div>
-                <div className="animate-spin text-zinc-500/30">
+                <div className="animate-spin text-zinc-500">
                   <LoaderIcon />
                 </div>
               </SidebarMenuButton>

middleware.ts

@@ -1,7 +1,6 @@
-import NextAuth from 'next-auth';
 import { auth } from './app/(auth)/auth';
-import { authConfig } from './app/(auth)/auth.config';
 import { NextResponse, type NextRequest } from 'next/server';
+import { anonymousRegex } from './lib/constants';
 
 export async function middleware(request: NextRequest) {
   // Skip the check for the guest auth endpoint to avoid infinite loops.
@@ -16,12 +15,21 @@ export async function middleware(request: NextRequest) {
     return NextResponse.redirect(new URL('/api/auth/guest', request.url));
   }
 
+  const isLoggedIn = session.user;
+  const isAnonymousUser = anonymousRegex.test(session.user?.email ?? '');
+
+  const isOnLoginPage = request.nextUrl.pathname.startsWith('/login');
+  const isOnRegisterPage = request.nextUrl.pathname.startsWith('/register');
+
+  // If the user is logged in and not an anonymous user, redirect to the home page
+  if (isLoggedIn && !isAnonymousUser && (isOnLoginPage || isOnRegisterPage)) {
+    return NextResponse.redirect(new URL('/', request.url));
+  }
+
   // Otherwise, continue handling the request.
   return NextResponse.next();
 }
 
-export default NextAuth(authConfig).auth;
-
 export const config = {
   matcher: [
     '/',