NextAuth Session Status Stuck at "Loading" State with Spinner in Main Nav

[sundaray]

Hi everyone,

I'm experiencing an issue with NextAuth in my Next.js application. The session status gets stuck at the loading state, and the spinner appears indefinitely in the main navigation bar, but only on the home page.

Setup:

I have a <MainNav /> component in my app, as shown below:

main-nav.tsx:

import React from "react"
import Link from "next/link"
import { MainNavItem } from "@/types"

import { cn } from "@/lib/utils"
import { UserAccountNav } from "@/components/user-account-nav"

interface MainNavProps {
  items?: MainNavItem[]
  children?: React.ReactNode
}

export function MainNav({ items }: MainNavProps) {

  return (
    <div className="flex h-16 items-center px-2.5 py-4 md:px-4">
      {items?.length ? (
        <nav className="ml-6 mr-auto hidden md:block">
          <ul className="flex space-x-4">
            {items.map((item) => (
              <li
                key={item.title}
                className={cn(
                  "nav-link relative z-10 cursor-pointer py-0.5 font-medium text-muted-foreground transition-all hover:text-primary sm:text-sm"
                )}
              >
                <Link href={item.href}>{item.title}</Link>
              </li>
            ))}
          </ul>
        </nav>
      ) : null}
      <div className="ml-auto flex items-center gap-4">
        <Link
          href="/contact"
          className="text-sm font-medium text-muted-foreground"
        >
          Contact
        </Link>
        <UserAccountNav />
      </div>
    </div>
  )
}

In the <MainNav />, I render the <UserAccountNav /> component, as shown below:

user-account-nav.tsx:

"use client"

import React from "react"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { signOut, useSession } from "next-auth/react"

import { cn } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Icons } from "@/components/icons"
import { UserAvatar } from "@/components/user-avatar"

export function UserAccountNav() {
  const { data: session, status } = useSession()
  const pathname = usePathname()

  const name = session?.user?.name
  const image = session?.user?.image

  console.log("Auth status: ", status)

  if (status === "loading") {
    return (
      <Icons.loaderCircle className="size-4 animate-spin text-muted-foreground" />
    )
  }

  return (
    <div className="w-max space-x-2">
      {status === "authenticated" ? (
        <DropdownMenu>
          <DropdownMenuTrigger className="flex items-center space-x-1">
            <UserAvatar
              user={{ name: name || "", image: image || "" }}
              className="size-8"
            />
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <div className="flex items-center justify-start gap-2 p-2">
              <div className="flex flex-col space-y-1 leading-none">
                {session.user.email && (
                  <p className="w-[200px] truncate text-sm text-muted-foreground">
                    {session.user.email}
                  </p>
                )}
              </div>
            </div>
            <DropdownMenuSeparator />
            {/* Menu items */}
            <DropdownMenuSeparator />
            <DropdownMenuItem
              className="cursor-pointer"
              onSelect={(event) => {
                event.preventDefault()
                signOut({
                  callbackUrl: `${window.location.origin}/login`,
                })
              }}
            >
              <Icons.logOut className="mr-2 size-4 text-muted-foreground" />
              Sign out
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      ) : (
        // Conditionally render the Login button only if the pathname is not '/login'
        pathname !== "/login" && (
          <Link
            href="/login"
            className={cn(buttonVariants({ size: "sm" }), "rounded-full")}
          >
            Log in
          </Link>
        )
      )}
    </div>
  )
}

In the <UserAccountNav /> component:

• When the status is loading, I render a loading spinner.
• When the status is authenticated, I render a <UserAvatar /> component.
• When the status is unauthenticated, I render a Login link.

Here is the <NextAuthProvider /> component:

next-auth-provider.tsx

"use client"

import * as React from "react"
import { SessionProvider } from "next-auth/react"

type NextAuthProviderProps = {
  children: React.ReactNode
}

export function NextAuthProvider({ children }: NextAuthProviderProps) {
  return <SessionProvider>{children}</SessionProvider>
}

And here is the root layout of my app:

/app/layout.tsx

import "@/styles/globals.css"

import { Inter } from "next/font/google"
import NextTopLoader from "nextjs-toploader"

import { Toaster } from "@/components/ui/toaster"
import { NextAuthProvider } from "@/components/next-auth-provider"
import { ReactQueryProvider } from "@/components/react-query-provider"

const inter = Inter({ subsets: ["latin"] })

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {

  return (
    <html lang="en" className={`${inter.className} scroll-smooth`}>
      <body>
        <ReactQueryProvider>
          <NextAuthProvider>
            <NextTopLoader showSpinner={false} color="#2563EB" />
            {children}
            <Toaster />
          </NextAuthProvider>
        </ReactQueryProvider>
      </body>
      <Toaster />
    </html>
  )
}

The Issue:

When I first load the home page, the session status remains loading and the spinner in the main nav is displayed indefinitely.
To see this in action, visit indieaitools.com. In the main nav bar, to the right, you will see a loading spinner. Even if you refresh the page multiple times, you will still see the spinner.

Now, if you visit a different page, the loading status correctly updates. To see this in action, visit https://indieaitools.com/tools?name=MakeAudio, and you will see a Login link in the main nav bar. Now come back to the home page, and you will see the Login link. The session status updates correctly. So, this problem appears only when I visit the home page for the first time.

Does anyone know why this might be happening or how to fix it?

Thanks in advance for your help!

Version Info:

• next: 14.1.3
• next-auth: ^4.24.5

[simonecervini]

I don't know if it is related to your issue, but I am mentioning it anyway because I think it might be potentially problematic: as soon as you open the website you sent, hundreds of requests are made in an infinite loop to the address https://lkivpecufdvxrzrijuat.supabase.co/rest/v1/user_reviews?select=*&tool_name=eq.Clarity+AI&approved=eq.true.

[sundaray]

Thanks. I need to find out why the requests are being made in an infinite loop to Supabase.

I commented out the code making API requests to Supabase; yet, the NextAuth session status is still stuck at the loading state. So, Supabase API request is not related to the issue. There is something else going on.

Any idea what could be causing this?